如何自定义反应表 7 中的列答案

【问题标题】：How to customize a column in react table 7如何自定义反应表 7 中的列
【发布时间】：2020-08-02 08:23:22
【问题描述】：

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

    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>


        </>

【问题讨论】：

标签： javascript reactjs react-table

【解决方案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
);

【讨论】：

非常感谢它确实有帮助，但您能否告诉我如何连续添加自定义元素。就像在一个单元格中一样，我想在名称下方添加两个名称和滚动号，这样我就不必为滚动号使用另一列。以及如何添加输入字段而不是按钮。我对这些东西很陌生，尤其是 JavaScript，因此非常感谢您的帮助。
你可以在官方docs阅读更多示例

【解决方案2】：

您也可以只创建一个样式化的 td 元素并找到 cell.column.id 值并有条件地呈现您需要的任何样式。但是，如果您有一堆不同的条件，这是重复的。

【讨论】：