Filter by multiple tags (array) ?

[PaoloJN]

Hello everyone,

I'm reaching out because I'm new to tanStack/react-table and I'm seeking guidance on implementing a specific feature. I would like to enable users to filter contacts based on multiple tags. To illustrate, if a user selects [tag1, tag2], I want to retrieve all contacts that have both tag1 and tag2. Unfortunately, the documentation doesn't provide clear instructions on how to achieve this. I would greatly appreciate any assistance you can offer regarding this matter. Thank you!

const columns: ColumnDef<Contact>[] = [
  {
    id: "tags",
    accessorFn: (row) => row.tags,
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Tags" />
    ),
    cell: ({ row }: any) => {
      const tags = row.getValue("tags")
      const displayTags = tags.map((tag: string) => {
        const foundTag = TAGS.find((t) => t.value === tag)
        return foundTag ? foundTag.label : tag
      })
      return (
        <>
          <div className="flex max-w-[500px] space-x-2">
            {displayTags.map((tag: string) => (
              <Badge key={tag} variant="outline" className="h-8 rounded-md">
                {tag}
              </Badge>
            ))}
          </div>
        </>
      )
    },
  }
]

interface DataTableFilter<TData, TValue> {
  column?: Column<TData, TValue>
  options: {
    label: string
    value: string
    icon?: LucideIcon
  }[]
}

export function DataTableFilter<TData, TValue>({
  column,
  options,
}: DataTableFilter<TData, TValue>) {
  const selectedValues = new Set(column?.getFilterValue() as string[])

  return (
    // Some code....
    <CommandGroup>
      {options.map((option) => {
        const isSelected = selectedValues.has(option.value)
        return (
          <CommandItem
            key={option.value}
            onSelect={() => {
              if (isSelected) {
                selectedValues.delete(option.value)
              } else {
                selectedValues.add(option.value)
              }
              const filterValues = Array.from(selectedValues)
              // The code to do the filtering ...
            }}
          >
            <div>
              <Check className={cn("h-4 w-4")} />
            </div>
            {option.icon && (
              <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
            )}
            <span>{option.label}</span>
          </CommandItem>
        )
      })}
    </CommandGroup>
    // Some code....
  )
}

{
  table.getColumn("tags") && (
    <DataTableFilter
      column={table.getColumn("tags")}
      title="Tags"
      options={TAGS}
    />
  )
}

[silyont]

Refer to filter functions

Your case might be:

 {
    id: "tags",
    filterFn: 'arrIncludesSome'
    ...
 }