T
TanStack•2y ago
wise-white

columnDef id and accessorKey

Hey guys! 👋 I'm trying to create a table with sorting and toggling column features. so in my columnDefs I define the header component to enable sorting and hiding. 
{
    id: 'id',
    accessorKey: 'id',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Identification" />
    ),
},
{
    id: 'id',
    accessorKey: 'id',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Identification" />
    ),
},
additionally I've got a dropdown next to the table to hide/show all columns. 
import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
import { EyeNoneIcon } from '@radix-ui/react-icons'
import { Table } from '@tanstack/react-table'

import { Button } from 'src/theme/ui/button'
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from 'src/theme/ui/dropdown-menu'

interface DataTableColumnToggle<TData> {
  table: Table<TData>
}

export function DataTableColumnToggle<TData>({
  table,
}: DataTableColumnToggle<TData>) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="ml-auto hidden h-8 md:flex">
          <EyeNoneIcon className="mr-2 h-4 w-4" />
          View
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[150px]">
        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {table
          .getAllColumns()
          .filter(
            (column) => typeof column.id !== 'undefined' && column.getCanHide()
          )
          .map((column) => {
            return (
              <DropdownMenuCheckboxItem
                key={column.id}
                className="capitalize"
                checked={column.getIsVisible()}
                onCheckedChange={(value) => column.toggleVisibility(!!value)}>
                {column.id}
              </DropdownMenuCheckboxItem>
            )
          })}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
import { EyeNoneIcon } from '@radix-ui/react-icons'
import { Table } from '@tanstack/react-table'

import { Button } from 'src/theme/ui/button'
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from 'src/theme/ui/dropdown-menu'

interface DataTableColumnToggle<TData> {
  table: Table<TData>
}

export function DataTableColumnToggle<TData>({
  table,
}: DataTableColumnToggle<TData>) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="ml-auto hidden h-8 md:flex">
          <EyeNoneIcon className="mr-2 h-4 w-4" />
          View
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[150px]">
        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {table
          .getAllColumns()
          .filter(
            (column) => typeof column.id !== 'undefined' && column.getCanHide()
          )
          .map((column) => {
            return (
              <DropdownMenuCheckboxItem
                key={column.id}
                className="capitalize"
                checked={column.getIsVisible()}
                onCheckedChange={(value) => column.toggleVisibility(!!value)}>
                {column.id}
              </DropdownMenuCheckboxItem>
            )
          })}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
TLDR: it's creating an on/off button for all columns of the table that CanHide() and got an 'id'. The problem is that I need these on/off buttons to be localized and if I change the id: '' value of the columnDef then it's also changing all the state id fields of my table states like ColumnOrderState to use an internationalized id.
what can I do? Is there a field in the columnDef for that? FYI: I'm using manualSorting
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?