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>
        </>
      )
    },
  }
]

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>
        </>
      )
    },
  }
]

Filter by multiple tags (array) ?

Similar Threads

Similar Threads

Similar Threads