Custom component for parent of nested header cells?

[conormcafee]

I get the following error when trying to use a custom header component if the Header is a parent of an object that contains child Header cells.

Error: A column ID (or unique "Header" value) is required!

Example Code:

export const columns = [
  {
    Header: 'Title',
    accessor: 'title',
    width: 400,
  },
  {
    Header: () => ( // This one does not work
      <span style={{ color: 'red', }} >
        Parent Header Cell
      </span>
    ),
    columns: [
      {
        Header: () => <span style={{ color: 'red' }}>Child Header Cell 01</span>, // This one does work if the the custom header component is removed
        accessor: 'childHeaderCell01',
      },
      {
        Header: 'Child Header Cell 02',
        accessor: 'childHeaderCell02',
      }
    ],
  },
]

Anyone come across this before?

[chasen]

Did you ever get this figured out?

[conormcafee]

No I didn’t actually. Haven’t looked into anymore since posting

[chasen]

NVM figured it out, in order to use a function as the Header property you also have to set the id property. So

Header: () => ( // This one does not work
    <span style={{ color: 'red', }} >
        Parent Header Cell
    </span>
),
columns: [ ... ]

becomes:

Header: () => ( // This will now work
    <span style={{ color: 'red', }} >
        Parent Header Cell
    </span>
),
id: 'someId',
columns: [ ... ]

[conormcafee]

Ah nice! Good spot

[CZHach]

@chasen Thank you for posting your solution! How did you find this great answer? I looked through the react-table docs and couldn't locate this bit of knowledge. Thanks!

[stevetracvc]

omg thank you. I was trying to add the id to the th tag instead 🤦