react-table - 如何将列隐藏从 react-table 6 升级到 react-table 7

Question

之前在 react-table 6 中，一个只是show: false在列规范中添加了一个来隐藏一列。

这如何在 react-table 7 中实现？

Answer 1

getToggleHiddenProps您可以从列中访问属性。

根据文档

您可以查看演示： https ://codesandbox.io/s/xenodochial-pasteur-dzk3k?file=/src/components/ColumnHiding.js

此外，如果您想默认隐藏某些列，请为要隐藏的列添加访问器并将其作为字符串数组传递给initialState.hiddenColumns

function Table({ columns, data }) {
   const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      allColumns,
      getToggleHideAllColumnsProps,
      prepareRow
   } = useTable({
      initialState: {
         hiddenColumns: ["firstName"]
      },
      columns,
      data
   });
   // usual table markup from here on
}

Answer 2

有不止一种方法可以做到这一点，但一种方法是响应列规范中的 show 属性。

在输出标题的 react-table 7 代码中：

例如。

headerGroup.headers.map(column => {
  return ( <TableCell> column.render('Header') </TableCell> )
})

添加过滤器：

例如。

headerGroup.headers..filter(column => column.show !== false).map(column => {
  return ( <TableCell> column.render('Header') </TableCell> )
})

而你输出你的行的 react-table 7 代码：

例如。

 {row.cells.map(cell =>
                        {
                            return (
                                <TableCell {...cell.getCellProps({ className: cell.column.className })}>
                                    {cell.render('Cell')}
                                </TableCell>
                            );
                        })}

添加过滤器：

例如。

 {row.cells.filter(cell => cell.column.show !== false).map(cell =>
                        {
                            return (
                                <TableCell {...cell.getCellProps({ className: cell.column.className })}>
                                    {cell.render('Cell')}
                                </TableCell>
                            );
                        })}