[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>
  );

[JuniYadi]

{column.columnDef?.header?.toString() || column.id}

this works for me

[anuj9196]

I used this approach and this is what I'm getting

[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

[pujayana]

Wow thank you it's worked!

[sangayt1997]

This is the solution and it worked. Thank you!

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

[jffr]

I found another workaround for the issue. While debugging, I noticed you can actually use: column.columnDef.header(column).props.name .
It’s not the most elegant approach, but it works. To clean it up a bit, I moved the logic into a separate helper function and added some type casting to keep TypeScript happy.

Here’s the full example:

function getColumnLabel<TData>(column: Column<TData, unknown>): string {
	if (typeof column.columnDef.header === 'function') {
		const headerNode = column.columnDef.header({ column } as HeaderContext<
			TData,
			unknown
		>)
		return headerNode?.props?.name ?? column.id
	}

	return column.id
}

<DropdownMenu>
	<DropdownMenuTrigger asChild>
		<Button variant="outline" className="ml-auto">
			Columns <ChevronDown />
		</Button>
	</DropdownMenuTrigger>
	<DropdownMenuContent align="end">
		{table
			.getAllColumns()
			.filter((column) => column.getCanHide())
			.map((column) => {
				return (
					<DropdownMenuCheckboxItem
						key={column.id}
						checked={column.getIsVisible()}
						onCheckedChange={(value) =>
							column.toggleVisibility(!!value)
						}
					>
						{getColumnLabel(column)}
					</DropdownMenuCheckboxItem>
				)
			})}
	</DropdownMenuContent>
</DropdownMenu>