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

• I agree to follow this project's Code of Conduct
• 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

[Salet]

@ThibaultJanBeyer I'm trying to achieve the same thing, were you able to resolve this on your own? My idea was to iterate over headers instead, but they disappear from the list once a column is hidden

[KevinVandy]

Please just follow one of the hundred examples in the docs

[ThibaultJanBeyer]

No @Salet I was unfortunately not able to resolve this, the issue is, like you say, that the headers can't be accessed from the table anymore once hidden. (as seen here https://codesandbox.io/p/devbox/distracted-babycat-c8jddy?workspaceId=790e1583-3209-4b95-9825-3e0704bc5629)

[Salet]

@KevinVandy Example in the docs shows the exact problem that @ThibaultJanBeyer and me are trying to overcome. Take a look:
https://tanstack.com/table/latest/docs/framework/react/examples/column-visibility
The component to toggle the visibility of columns that is shown above the table renders column IDs on the list. Instead, we would like to render whatever the header contains for each column, and it doesn't seem to be easily possible. You need header context to call the flexRender function, and header object gets removed from the full list once a column is hidden.

[mordv]

@KevinVandy Please just give us ONE of the hundred examples where the header is non-string and we will follow it. You either treat it as string or use column.id(for the user to display!)

@Salet Here's how I did it:

        {table
          .getAllColumns()
          .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
          .map((column) => {
            const header = table.getFlatHeaders().find(h => h.id === column.id);
            return (
              <DropdownMenuCheckboxItem
                key={column.id}
                className="capitalize"
                checked={column.getIsVisible()}
                onCheckedChange={(value) => column.toggleVisibility()}
              >
                {flexRender(column.columnDef.header, header!.getContext())}
              </DropdownMenuCheckboxItem>
            );
          })}

But I didn't like it after all. Headers might be complex, but all we need is just user-friendly localized column name.
So I just put the localized string in meta. Not been able to neat the typings yet though.

  const sorter = <TAccessor extends DeepKeys<T>, TValue = ColumnDef<T, TAccessor>>(
    accessor: TAccessor,
    title: string,
    { meta, ...rest }: Partial<IdentifiedColumnDef<T>> = {}
  ) => {
    return c.accessor(accessor, {
      meta: {
        ...meta,
        columnName: title,
      },
      ...rest,
      header: ({ column }) => <DataTableColumnHeader column={column} title={title} />,
      enableSorting: true,
    } as any);
  };