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

Posted 2023-02-19

【中文标题】如何自定义反应表 7 中的列

【英文标题】：How to customize a column in react table 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>


        </>

【参考方案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 值并有条件地呈现您需要的任何样式。但是，如果您有一堆不同的条件，这是重复的。