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?

Answer 1

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