CODEWITHSUNDEEP
reactjsreact-tablereact-table-v7
Gerald H
Gerald H

Reputation: 618

How to filter for values inside an array of objects for React Table?

I am using React Table and recently I got into an issue of not being able to search nested array of objects in my column data! This is my code so far.

    {
            Header: "competitors",
            accessor: "competitors",
            Cell: ({ cell }: { cell: CellProps<TableInstance> }) => (
              <div className="flex flex-wrap gap-y-1 items-center">
                {cell.value.map((competitor: Competitor, i: number) => {
                  return (
                    <div key={i}>
                      <span
                        key={i}
                        className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mx-1"
                      >
                        {competitor.name}
                      </span>
                    </div>
                  );
                })}

Basically competitors is an array of object and in the cell, I change to values to just its name. Do help thank you! :)

Upvotes: 1

Views: 4430

Answers (2)

Mikayel Margaryan
Mikayel Margaryan

Reputation: 794

Actually you don't need to change accessor. All is needed to wright custom filter function, there you can grub whole object and wright any kind of condition for look up. f.e.

const orderItemsFilter: FilterFn<any> = (row, columnId, value, addMeta) 
=> {
  // Rank the item
  const itemRank = rankItem(
    row.original.order_items
      .map((item: OrderItemType) => item.product_name)
      .join(" "),
    value,
  );

  // Store the itemRank info
  addMeta({
    itemRank,
  });

  // Return if the item should be filtered in/out
  return itemRank.passed;
};

Upvotes: 0

Gerald H
Gerald H

Reputation: 618

I am able to solve this by using a custom accessor. This solution changes the data from array of objects to an array of string instead, making such that my global filter will work. I hope this help someone!

   {
            Header: "Competitors",
            // This is a custom accessor to get the string, name. Mainly for the search.
            accessor: (data: { competitors: Competitor[] }) => {
              const output: string[] = [];
              data.competitors.map((c) => {
                return output.push(c.name);
              });
              return output;
            },
            Cell: ({ cell }: { cell: CellProps<TableInstance> }) => {
              return (
                <div className="flex flex-wrap gap-y-1 items-center">
                  {cell.value.map((name: string, i: number) => {
                    return (
                      <div key={i}>
                        <span
                          key={i}
                          className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mx-1"
                        >
                          {name}
                        </span>
                      </div>
                    );
                  })}

                  <MiniPlusButton onClick={() => console.log("asdasd")} />
                </div>
              );
            },
          },

Upvotes: 3

Related Questions