I'm new to tan stack table. I discover it because of shadcn UI. The problem I'm having right now as it says in the title, is that, i want to have a column in my table to have multiple accessor keys so filtering will be able to search on this too. With other column i have separate data as single accessorKey, so i dont have a problem with that, however... i tried literally all. After what I've seen.. other then the documentation and the lack of solutions online, I'm not user if accessorFn is my answer.

This is a column part of what im trying to expect

{
accessorKey: "code",
header: ({ column }) => (

),
filterFn: (row, id, value) => {
return value.includes(row.getValue(id))
},
cell: ({ row }) => {
const rowData = row.original as unknown as ItemData;

  const l = `${rowData.desc} - ${rowData.lcode}`;

  return (
    <div className="flex space-x-2">
      {rowData.code && 
        <Badge variant="secondary" className="text-white rounded-md">
          {rowData.code}
        </Badge>
      }
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger className="max-w-[150px] truncate font-medium">
            {location}
          </TooltipTrigger>
          <TooltipContent>
            {location}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  )
},
enableSorting: false,
enableHiding: false,
}

my structure of my data table is based on different filter, the search bar is searching globally, while i have different "fixed" filter static for the other fields, but i need the search bar to be able to search not only on the PCode but also on the other 2.

Unfortunately i tried not too much because of the lack of threads and question about this particular thing, its related to this question, but the author di dont provied the full solution, so im stuck with it question link

Version of Tan Stack Table: "@tanstack/react-table": "^8.11.3"

0

There are 0 best solutions below