Removing a header name in react table and making it empty

Question

I am trying to create a new checkbox column for a react table. I don't need a header name for the checkbox column. If I put in an empty string in the header, my app crashes and I get the error message below

    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',
          }
        ]
    )

How can I do this with an empty Header?

a single space maybe?? ```Header: " "``` – punjira Apr 23 '20 at 21:02 — punjira, Apr 23 '20 at 21:02

toki · Answer 1 · 2022-02-14T00:09:42.767

The answers provided in the comments are technically correct, but also very much a hack. There is a non-workaround method of doing this: simply provide an id key to the Column. This use of id is described in the useTable hook docs:

Technically speaking, [accessor] isn't required if you have a unique id for a column.

A name like "checkbox" won't fly, because of the requirement to be unique. Thus, it should probably be slightly more descriptive. Furthermore, Header is explicitly an Optional property -- you can omit it entirely, to no detriment.

Therefore, your column can just look like:

   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',
          }
        ],
      []
    );

(Also: fixed the minor typo where the dependency array wasn't passed to useMemo. It'll let you do it, but less chances for failure if you pass one, even empty, yourself.)

Jeevanantham S · Answer 2 · 2021-06-28T17:45:18.880

Add a custom key hideHeader: false, in the columns variable.

hideHeader: false, in the columns variable

In the Material table check for this key.

<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>

paste to

This should remove the empty row from html output.

credit to link

Removing a header name in react table and making it empty

2 Answers2