如何在反应表7的列中添加按钮

Question

我想在我的其中一列中添加一个按钮，以便当我单击它时，可以获得按钮所在行的详细信息。目前我的桌子上没有按钮，我不知道如何将按钮初始化。我也想知道如何在单元格旁边添加自定义标签。我想在一个单元格中添加两个标签，即标题标签和其下方的段落标签，但它们必须位于同一单元格中。

常量位置= useLocation（）;useEffect（（）=> {console.log（location.state）;}）;const data = React.useMemo（（）=> [{col1：“你好”，col2：“世界”，}，{col1：“反应表”，col2：“岩石”，}，{col1：“无论如何”，col2：“您要”，}，{col1：“无论如何”，col2：“您要”，}，{col1：“无论如何”，col2：“您要”，}，{col1：“无论如何”，col2：“您要”，}，{col1：“无论如何”，col2：“您要”，}，{col1：“无论如何”，col2：“您要”，}，{col1：“无论如何”，col2：“您要”，}，]，[]，）;const列= React.useMemo（（）=> [{标头：“学生姓名”，访问器：'col1'，//访问器是数据中的“关键字”显示：错误}，{标头：“ Reg-No”，访问者：“ col2”，}，{标头：“ QUIZEZ”，访问者：“，}，{标头：“ ASSIGNMENT”，访问者：“，}，{标头：“第一条款”，访问者：“，}，{标头：“ MID TERM”，访问者：“，}，{标头：“最终字词”，访问者：“，}，]，[]，）;const {getTableProps，getTableBodyProps，headerGroups，页，prepareRow，canPreviousPage，canNextPage，下一页，上一页，setPageSize，页面大小，} = useTable（{列，数据，initialState：{pageIndex：0，pageSize：7}}，useExpanded，usePagination）;返回（<>
类别：7-B  h4>
主题：英语 h4>
学生人数：32  h4> div> div>
{headerGroups.map（headerGroup =>（{headerGroup.headers.map（column =>（{column.render（'Header'）} th>））} tr>））} thead>{page.map（row => {prepareRow（行）返回（{row.cells.map（cell => {返回（ console.log（row.original.col2）}>{cell.render（'Cell'）} td>）}）} tr>）}）} tbody> table> div> div>
 previousPage（）}已禁用= {！canPreviousPage}>{' {“”} nextPage（）}已禁用= {！canNextPage}>{'>'} button> {“”} {setPageSize（Number（e.target.value））;}}>{[7，10，20，30] .map（pageSize =>（显示{pageSize} option>））} select> div>>  code>
我想在我的其中一列中添加一个按钮，以便当我单击它时，可以获得按钮所在行的详细信息。目前我的桌子上没有按钮，我不知道该如何...
 
您可以修改列，例如：
{
        accessor: 'accessor',
        Header: 'Header',
        Cell: ({ row: { original } }) => (
            <button
                onClick=(() => console.log(original))
            >
                Button text
            </button>
        ),
},
或者您可以修改默认表单元格DefaultCell.js：
const DefaultCell = ({ cell: { value, column }, row: { original } }) => (
 <span
    style={{
     whiteSpace: 'pre-wrap',
    }}
 >
  {column.id === 'button' ?
   (
    <button
        onClick=(() => console.log(original))
    >
        Button text
    </button>
   ) : value}
 </span>
)
和react-table的用法：
const defaultColumn = React.useMemo(
 () => ({
  minWidth: 5,
  width: 150,
  maxWidth: 400,
  Cell: DefaultCell,
 }),
 []
);

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    setPageSize,
    pageSize,
} = useTable({
  {
   columns,
   data,
   defaultColumn
  },
  initialState: { pageIndex: 0, pageSize: 7 } },
  useExpanded,
  usePagination
);

Answer 1

您可以修改列，例如：

{
        accessor: 'accessor',
        Header: 'Header',
        Cell: ({ row: { original } }) => (
            <button
                onClick=(() => console.log(original))
            >
                Button text
            </button>
        ),
},

或者您可以修改默认表单元格DefaultCell.js：

const DefaultCell = ({ cell: { value, column }, row: { original } }) => (
 <span
    style={{
     whiteSpace: 'pre-wrap',
    }}
 >
  {column.id === 'button' ?
   (
    <button
        onClick=(() => console.log(original))
    >
        Button text
    </button>
   ) : value}
 </span>
)

和react-table的用法：

const defaultColumn = React.useMemo(
 () => ({
  minWidth: 5,
  width: 150,
  maxWidth: 400,
  Cell: DefaultCell,
 }),
 []
);

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    canPreviousPage,
    canNextPage,
    nextPage,
    previousPage,
    setPageSize,
    pageSize,
} = useTable({
  {
   columns,
   data,
   defaultColumn
  },
  initialState: { pageIndex: 0, pageSize: 7 } },
  useExpanded,
  usePagination
);