[column-visibility] How to display the header of a column instead of the column.id?

[marceloverdijk]

Looking at https://tanstack.com/table/v8/docs/examples/react/column-visibility

the box to show the columns to toggle uses:

        {table.getAllLeafColumns().map(column => {
          return (
            <div key={column.id} className="px-1">
              <label>
                <input
                  {...{
                    type: 'checkbox',
                    checked: column.getIsVisible(),
                    onChange: column.getToggleVisibilityHandler(),
                  }}
                />{' '}
                {column.id}
              </label>
            </div>
          )
        })}

and in particular column.id to display the label.

But how to use actual header value here? E.g. in this example Last Name instead of lastName...

[KevinVandy]

Just don't use column.id. use column.columnDef.header

[marceloverdijk]

Column does not seem to have header field.

It has a columnDef which can access the (optional) header, so I tried:
{column.columnDef.header?.toString()} which seems to work.

But I wonder if this is the best/supposed way to do it...

As initially my column was defined like (which I copied from some example):

	columnHelper.accessor('lastName', {
		header: () => 'Last Name',

but then the header?.toString() outputs () => "Last Name" on my page.
So {column.columnDef.header?.toString()} seems not to be a solution that would work in all cases unfortunately.

[IudexSoren]

Hello @marceloverdijk.
I don't know if it's too late for this, but I faced the same issue but I ended up resolving it by using the meta property from the column. You can add multiple properties to this object and it is very useful.

Check the following image and pay attention to the columnName property. As you can see, I use it for other several functionalities.

You can access the meta property like this: column.columnDef.meta.

Find more information about it here: https://tanstack.com/table/v8/docs/api/core/column-def#meta

I hope this helps you!

Regards.

[Davasny]

I ran into the same issue today and ended up creating a custom method to get the header value. Note that the header can be a function if it wasn't defined or was defined intentionally as function in the columns property of useReactTable().

In my case it's enough to assume header in column definition is string.

  const getHeaderValue = (column: Column<unknown>): string => {
    const header = column.columnDef.header;

    if (typeof header === "string") {
      return header;
    }

    // note: here we should somehow implement execution of header() function
    // but we need to get "header context" which is not available in "column context"

    return column.id;
  };

  return (
    <Grid templateColumns="1fr 1fr" gap={3}>
      {table.getAllLeafColumns().map((column) => (
        <Fragment key={column.id}>
          <HorizontalFormLabel htmlFor={column.id}>
            {getHeaderValue(column)}
          </HorizontalFormLabel>

          <Switch
            id={column.id}
            isChecked={column.getIsVisible()}
            onChange={column.getToggleVisibilityHandler()}
          />
        </Fragment>
      ))}
    </Grid>
  );

[sonetlumiere-code]

as @IudexSoren said, you can use meta column property, for example:

const columns = [
  {
    accessorKey: "createdAt",
    meta: "Fecha de creación",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Fecha de creación
          <Icons.caretSortIcon className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    cell: ({ row }) => (
      <div className="ml-4">{format(row.getValue("createdAt"), "dd/MM/yyyy")}</div>
    ),
  },
]

Then you can access it:

{table
  .getAllColumns()
  .filter(
    (column) => typeof column.accessorFn !== "undefined" && column.getCanHide(),
  )
  .map((column) => {
    return (
      <DropdownMenuCheckboxItem
        key={column.id}
        className="capitalize"
        checked={column.getIsVisible()}
        onCheckedChange={(value) => column.toggleVisibility(!!value)}
      >
        {(column.columnDef.meta as string) || column.id}
      </DropdownMenuCheckboxItem>
    )
})}

[cbptamtom]

It has worked! Thanks all

[gdostie]

I ran into the same problem and ended-up using flexRender in the following way:

flexRender(column.columnDef.header, {
  table,
  column,
  header: {column} as Header<unknown, unknown>,
})

You can replace {column.id} by this directly:

Since we don't have direct access to header.getContext() from the column, we build the props object it needs manually. Its a bit hackish but it works fine for my use case. Hope it helps anyone, cheers.