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

marceloverdijk · 2023-05-11T21:22:26Z

marceloverdijk
May 11, 2023

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 · 2023-05-11T21:32:55Z

KevinVandy
May 11, 2023
Maintainer

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

4 replies

marceloverdijk May 12, 2023
Author

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 Jun 25, 2023

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 Nov 5, 2023

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 Dec 19, 2024

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

this works for me

sonetlumiere-code · 2024-02-03T22:04:34Z

sonetlumiere-code
Feb 3, 2024

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>
    )
})}

3 replies

cbptamtom Mar 16, 2024

It has worked! Thanks all

pujayana Dec 22, 2024

Wow thank you it's worked!

sangayt1997 Feb 14, 2025

This is the solution and it worked. Thank you!

gdostie · 2024-05-01T21:33:45Z

gdostie
May 1, 2024

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.

0 replies

jffr · 2025-05-01T11:53:24Z

jffr
May 1, 2025

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>

0 replies

Uh oh!

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

Uh oh!

Replies: 4 comments · 7 replies

Uh oh!

Uh oh!

KevinVandy May 11, 2023 Maintainer

Uh oh!

marceloverdijk May 12, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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

Replies: 4 comments 7 replies

KevinVandy
May 11, 2023
Maintainer

marceloverdijk May 12, 2023
Author