如何在 React table 7 中自定义列

Question

我想在我的一个列中添加一个按钮，这样当我点击它时，我可以得到按钮所在行的详细信息。目前我的 table 中没有按钮，我不知道如何初始化按钮。我也想知道如何在单元格中添加自定义标签。我想在一个单元格中添加两个标签，一个标题标签和一个段落标签，但它们必须在同一个单元格中。

    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>


        </>

Answer 1

您可以像这样修改列：

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

或者您可以修改默认 table 单元格 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 2

您也可以制作一个带样式的 td 元素并找到 cell.column.id 值并有条件地呈现您需要的任何样式。然而，如果你有一堆不同的条件，这是重复的。

如何在 React table 7 中自定义列

How to customize a column in react table 7

javascript

reactjs

react-table