如何将列隐藏从React-Table 6升级到React-Table 7

问题描述

react-table 6中的上一个，它刚刚在列规范中添加了show: false以隐藏列。

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

解决方法

有多种方法可以执行此操作，但是一种方法是响应列规范中的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> )
})

您的反应表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>
                            );
                        })}