TanStackT
TanStack•3y ago•
4 replies
progressive-amaranth

Trying to access a column titles to populate a dropdown

I'm fairly new to TanStack table so please forgive me if this is a simple thing to achieve.

I'm having trouble accessing a column's title to populate a dropdown menu which will toggle that columns visibility. At present I pass in the title to a DataTableColumnHeader component through the header property of my columns definitions object:

{
  accessorKey: 'user_id',
  header: ({ column }) => <DataTableColumnHeader column={column} title='User ID' />
},

I then have a DataTableViewOptions component which loops over each column using the getAllColumns method and filters the columns that can be hidden. I can only seem to access the column.id property though:

{table
  .getAllColumns()
  .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
  .map(column => {
    return (
      <DropdownMenuCheckboxItem
        key={column.id}
        checked={column.getIsVisible()}
        onCheckedChange={value => column.toggleVisibility(!!value)}
      >
        {column.id}. // HERE IS WHERE I'D LIKE TO USE THE COLUMN TITLE
      </DropdownMenuCheckboxItem>
    );
  })}

I understand I may need to do some refactoring here but is there a way to do this? Thanks 🙂
Was this page helpful?