T
TanStack•3y ago
secure-lavender

Filter by multiple tags (array) ?

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>
        </>
      )
    },
  }
]
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>
        </>
      )
    },
  }
]
No description
No description
1 Reply
secure-lavender
secure-lavenderOP•3y ago
const facets = column?.getFacetedUniqueValues()
const selectedValues = new Set(column?.getFilterValue() as string[])
<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>
        {facets?.get(option.value) && (
          <span>
            {facets.get(option.value)}
          </span>
        )}
      </CommandItem>
    )
  })}
</CommandGroup>
const facets = column?.getFacetedUniqueValues()
const selectedValues = new Set(column?.getFilterValue() as string[])
<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>
        {facets?.get(option.value) && (
          <span>
            {facets.get(option.value)}
          </span>
        )}
      </CommandItem>
    )
  })}
</CommandGroup>

Did you find this page helpful?