columnDef.header not being rendered when it's a JSX element

[ThibaultJanBeyer]

TanStack Table version

v8.20.5

Framework/Library version

v18.3.1

Describe the bug and the steps to reproduce it

The documentation points out to write:

{table.getAllColumns().map((column) => (
  <label key={column.id}>
    <input
      checked={column.getIsVisible()}
      disabled={!column.getCanHide()}
      onChange={column.getToggleVisibilityHandler()}
      type="checkbox"
    />
    {column.columnDef.header}
  </label>
))}

However {column.columnDef.header} gives a type error and also does not seem to render anything when the header part is a React Element.

Here is a working reproduction of the issue: https://codesandbox.io/p/devbox/pensive-nash-rhj46y?file=%2Fsrc%2Fmain.tsx%3A124%2C42 (forked from this example and only changed the line 124 to {column.columnDef.header})

As you can clearly see only the headers that are defined as strings are being rendered:

Thanks for your help and the great table!

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/pensive-nash-rhj46y?file=%2Fsrc%2Fmain.tsx%3A124%2C42

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

That's what flexRender is for

[ThibaultJanBeyer]

@KevinVandy thanks, maybe, but I can't figure out how to get the header context from within the column? Because anything else would not be available if the column is hidden, right?

To show what I mean consider this example where I'm doing this:

{table.getAllLeafColumns().map((column) => {
  // I'm trying to get the corresponding header to pass in the flexRender context
  const headers = table.getFlatHeaders();
  const header = headers.find((h) => h.id === column.id);
  return (
    ...
    {header ? flexRender(column.columnDef.header, header.getContext()) : 'nope'}
    ...

This works well UNTIL I click the checkbox to hide the column, then nope will be rendered as the header column is not available in table.getFlatHeaders() anymore as it has been hidden: https://github.com/user-attachments/assets/dc58cb51-b589-4d09-b802-1c9954f0a572

See Codesandbox: https://codesandbox.io/p/devbox/distracted-babycat-c8jddy?workspaceId=790e1583-3209-4b95-9825-3e0704bc5629