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

【问题标题】：How to upgrade column hiding from react-table 6 to react-table 7如何将列隐藏从 react-table 6 升级到 react-table 7
【发布时间】：2020-12-28 09:16:55
【问题描述】：

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

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

【问题讨论】：

标签： react-table react-table-v7

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

【讨论】：

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

【讨论】：