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

Question

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

如何在反应表7中实现这一点？

Answer 1

有多种方法可以做到这一点，但其中一种方法是响应您的列规范中的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>
                            );
                        })}