T
TanStack•3y ago
continuing-cyan

Filtering Arrays

Hello, I have data that looks like the example below. Using Cell, I can return a map of the data to display each of the tag names separately but for I can't figure out how to filter against that information.
example column: { accessorFn: row => row.tag, header: "tags", cell: cell => { const tags = cell.row.original.tags; return ( tags.map((tag) => { return (tag.name)
}) ) } } example data: { id: 'some id' title : 'some title', description : 'some description', tags: [ { id: 'some id', name: 'some tag name' }, { id: 'some other id', name: 'some other name' } ] }
2 Replies
national-gold
national-gold•3y ago
same problem, any solution?
quickest-silver
quickest-silver•3y ago
Hi there @nuzreq & @jcenlo I was able to get it to work. here's the structure of my table data, 
interface ProjectDetails {
  id: number;
  name: string;
  complexity: "low" | "medium" | "high";
  techSkills: string[];
  points: string;
  product: string;
  type: string[];
  status: "open" | "closed";
}
interface ProjectDetails {
  id: number;
  name: string;
  complexity: "low" | "medium" | "high";
  techSkills: string[];
  points: string;
  product: string;
  type: string[];
  status: "open" | "closed";
}
here's the column definition for techSkills column, 
{
    accessorKey: "techSkills",
    header: () => <span className="flex items-center justify-center uppercase">tech skills</span>,
    cell: ({ row }) => {
      const techSkill = row.original.techSkills;
      return (
        <div className="flex flex-wrap items-center justify-center min-w-[320px] h-full">
          {techSkill.map((tech) => (
            <div
              key={tech}
              className="rounded-full bg-gray-200 min-w-max px-2 py-1 m-1"
            >
              {tech}
            </div>
          ))}
        </div>
      );
    },
    filterFn: 'arrIncludesSome',  // this was what made it work I believe
  }
{
    accessorKey: "techSkills",
    header: () => <span className="flex items-center justify-center uppercase">tech skills</span>,
    cell: ({ row }) => {
      const techSkill = row.original.techSkills;
      return (
        <div className="flex flex-wrap items-center justify-center min-w-[320px] h-full">
          {techSkill.map((tech) => (
            <div
              key={tech}
              className="rounded-full bg-gray-200 min-w-max px-2 py-1 m-1"
            >
              {tech}
            </div>
          ))}
        </div>
      );
    },
    filterFn: 'arrIncludesSome',  // this was what made it work I believe
  }
and here's where I am filtering the table from a dropdown menu, 
const selectedValues = new Set(column?.getFilterValue() as string[])
options.map((option)=>{
                        const isSelected = selectedValues.has(option)
                        return(
                            <div key={option}
                                className="hover:cursor-pointer mb-1 hover:bg-gray-200 rounded-md capitalize"
                                onClick={()=>{
                                    if (isSelected) {
                                        selectedValues.delete(option)
                                    } else {
                                        selectedValues.add(option)
                                    }
                                    const filterValues = Array.from(selectedValues)
                                    column?.setFilterValue(filterValues.length ? filterValues : undefined)
                                }}
                            >
                                <span>{option}</span>
                            </div>
                        )
                    })
const selectedValues = new Set(column?.getFilterValue() as string[])
options.map((option)=>{
                        const isSelected = selectedValues.has(option)
                        return(
                            <div key={option}
                                className="hover:cursor-pointer mb-1 hover:bg-gray-200 rounded-md capitalize"
                                onClick={()=>{
                                    if (isSelected) {
                                        selectedValues.delete(option)
                                    } else {
                                        selectedValues.add(option)
                                    }
                                    const filterValues = Array.from(selectedValues)
                                    column?.setFilterValue(filterValues.length ? filterValues : undefined)
                                }}
                            >
                                <span>{option}</span>
                            </div>
                        )
                    })
this is working for me, however when filtering with globalFiltering I am unable to make it work

Did you find this page helpful?