删除反应表中的标头名称并将其设为空

Question

我正在尝试为反应表创建一个新的复选框列。我不需要复选框列的标题名称。如果我在标头中输入空字符串，我的应用程序就会崩溃，并收到以下错误消息

    const columns = React.useMemo(
        () => [
          {
             //id: 'checkbox',
            Header: '',
            accessor: '',
            width: 25,
            Cell: ({ row }: any) => {
              return <input type='checkbox' className={classes.mystyle} />
            },
          },
          {
            Header: 'Jungle Name',
            accessor: 'JungleMan',
          }
        ]
    )

如何使用空标题执行此操作？

Answer 1

评论中提供的答案在技术上是正确的，但也是一种黑客行为。有一种非解决方法可以做到这一点：只需提供id列的密钥即可。useTable 挂钩文档id中描述了这种用法：

从技术上讲，如果列有唯一的 ID，则不需要 [访问器]。

像“checkbox”这样的名字是行不通的，因为要求是唯一的。因此，它可能应该更具描述性。此外，Header它是明确的可选属性——您可以完全省略它，而不会造成任何损害。

因此，您的列可以如下所示：

   const columns = React.useMemo(
        () => [
          {
            id: 'checkbox-table-column'
            width: 25,
            Cell: ({ row }: any) => {
              return <input type='checkbox' className={classes.mystyle} />
            },
          },
          {
            Header: 'Jungle Name',
            accessor: 'JungleMan',
          }
        ],
      []
    );

（另外：修复了依赖数组未传递给 的小拼写错误useMemo。它会让你这样做，但如果你自己传递一个，即使是空的，失败的机会也会减少。）

Answer 2

在 columns 变量中添加自定义键 hideHeader: false。

hideHeader: false, 在 columns 变量中

在材料表中检查此键。

<TableHead>
        {headerGroups.map((headerGroup) => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => {
              return column.hideHeader === false ? null : (
                <TableCell {...column.getHeaderProps()}>
                  {column.render('Header')}
                </TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableHead>

粘贴到

这应该从 html 输出中删除空行。

信用链接