如何在 React Table 7 中自定义列

Question

我想在其中一列中添加一个按钮，这样当我点击它时，我可以得到包含该按钮的行的详细信息。目前我的表格中没有按钮，我不知道如何放置一个按钮。另外，我想知道如何在单元格中添加自定义标签。我想在单元格中添加两个标签，即标题标签和紧随其后的段落标签，但它们必须在同一个单元格中。

    const location = useLocation();

    useEffect(() => {
        console.log(location.state);
    });

    const data = React.useMemo(
        () => [
            {
                col1: 'Hello',
                col2: "world",
            },
            {
                col1: 'react-table',
                col2: 'rocks',
            },
            {
                col1: 'whatever',
                col2: 'you want',
            },
            {
                col1: 'whatever',
                col2: 'you want',
            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },
            {
                col1: 'whatever',
                col2: 'you want',

            },

        ],
        [],
    );
    const columns = React.useMemo(
        () => [
            {
                Header: 'Student Name',
                accessor: 'col1', // accessor is the "key" in the data
                show: false
            },
            {
                Header: 'Reg-No',
                accessor: 'col2',
            },
            {
                Header: 'QUIZEZ',
                accessor: '',
            },
            {
                Header: 'ASSIGNMENT',
                accessor: '',
            },
            {
                Header: 'FIRST TERM',
                accessor: '',
            },
            {
                Header: 'MID TERM',
                accessor: '',
            },
            {
                Header: 'FINAL TERM',
                accessor: '',

            },
        ],
        [],
    );

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        page,
        prepareRow,
        canPreviousPage,
        canNextPage,
        nextPage,
        previousPage,
        setPageSize,
        pageSize,

    } = useTable({ columns, data, initialState: { pageIndex: 0, pageSize: 7 } }, useExpanded, usePagination);


    return (
        <>
            <div className="row">
                <div className="col class-top-heading">
                    <h4>Class: 7-B</h4>
                    <h4>Subject: English</h4>
                    <h4>No of Students: 32</h4>
                </div>
            </div>
            <div className="row">
                <div className="col table-div-1 highlight" style={{ 'overflowY': 'auto', 'height': '455px' }}>
                    <table {...getTableProps()}>
                        <thead>
                            {headerGroups.map(headerGroup => (
                                <tr {...headerGroup.getHeaderGroupProps()}>
                                    {headerGroup.headers.map(column => (
                                        <th
                                            {...column.getHeaderProps()}
                                        >
                                            {column.render('Header')}
                                        </th>
                                    ))}
                                </tr>
                            ))}
                        </thead>
                        <tbody {...getTableBodyProps()}>
                            {page.map(row => {
                                prepareRow(row)
                                return (
                                    <tr key={123} {...row.getRowProps()} >
                                        {row.cells.map(cell => {
                                            return (
                                                <td
                                                    {...cell.getCellProps()}
                                                    onClick={() => console.log(row.original.col2)}
                                                >
                                                    {cell.render('Cell')}
                                                </td>
                                            )
                                        })}
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
            <div className="row pagination">
                <button onClick={() => previousPage()} disabled={!canPreviousPage}>
                    {'<'}
                </button>{" "}
                <button onClick={() => nextPage()} disabled={!canNextPage}>
                    {'>'}
                </button>{" "}
                <select
                    value={pageSize}
                    onChange={e => {
                        setPageSize(Number(e.target.value));
                    }}
                >
                    {[7, 10, 20, 30].map(pageSize => (
                        <option key={pageSize} value={pageSize}>
                            Show {pageSize}
                        </option>
                    ))}
                </select>
            </div>


        </>

- Nabeel Hussain Shah

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
);

- aturan23

---

非常感谢，这真的很有帮助。但是你能告诉我如何在一行中添加自定义元素吗？比如在单元格中，我想添加两个东西：一个名字和一个学号，就在名字下面，这样我就不必再使用另一列来显示学号了。还有，我该如何添加一个输入框而不是一个按钮？我对这些东西都很新，特别是对JavaScript，所以希望能得到帮助，非常感谢。 - Nabeel Hussain Shah

您可以在官方文档 docs 中阅读更多示例。 - aturan23

Answer 2

您也可以创建一个带样式的 td 元素，并查找 cell.column.id 值并有条件地呈现所需的样式。但是，如果您有许多不同的条件语句，则这种方法会变得重复。

- Austin Johnson