T
TanStack•3y ago
ratty-blush

Filter array of objects :sweat_smile:

Hi guys i am really stuck whit this I am rendering an object in one of my cells. This object is used to render the UI for the agents, which would be a circle with an initial inside or an image if available. The problem arises when I try to filter each agent individually. this is a example of the array with objects 
[
    {
        "thumb": "https://avatars.githubusercontent.com/u/84169838",
        "color": "#211453",
        "label": "Aleen",
        "id": 8251745,
        "value": "Aleen"
    },
    {
        "thumb": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/741.jpg",
        "color": "#591266",
        "label": "Erika",
        "id": 7187017,
        "value": "Erika"
    }
]
[
    {
        "thumb": "https://avatars.githubusercontent.com/u/84169838",
        "color": "#211453",
        "label": "Aleen",
        "id": 8251745,
        "value": "Aleen"
    },
    {
        "thumb": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/741.jpg",
        "color": "#591266",
        "label": "Erika",
        "id": 7187017,
        "value": "Erika"
    }
]
i am reading this object thought my column definition 
  //--------------------//
  // Agents
  //--------------------//
  {
    header: "Agents",
    accessorKey: "agents",
    cell: (props) => {
      const agents = props.getValue();
      return (
        <>
          <div className="flex items-center">
            {agents.map((agent: any) => (
              ... UI ...
            ))}
          </div>
        </>
      );
    },
    footer: (props) => props.column.id,
    enableColumnFilter: true,
  },
  //--------------------//
  // Agents
  //--------------------//
  {
    header: "Agents",
    accessorKey: "agents",
    cell: (props) => {
      const agents = props.getValue();
      return (
        <>
          <div className="flex items-center">
            {agents.map((agent: any) => (
              ... UI ...
            ))}
          </div>
        </>
      );
    },
    footer: (props) => props.column.id,
    enableColumnFilter: true,
  },
Actually, I found a solution, but it doesn't work for me. I am configuring the accesorFN with the value of the agents. 
    accessorFn: row => row.agents.map(agent => agent.value),
    cell: props => props.getValue().join(", "),
    enableColumnFilter: true,
    filterFn: "arrIncludes",
    accessorFn: row => row.agents.map(agent => agent.value),
    cell: props => props.getValue().join(", "),
    enableColumnFilter: true,
    filterFn: "arrIncludes",
But when I try to access the object to get the rest of the properties like thumb, color, I lose that information because I am limiting it with the accesorFN. Is there any way to define what information it will retrieve from that column? I imagine something like this... 
    header: "Agents",
    accessorKey: "agents",
    accessorFilter: row.agents.map(agent => agent.value),
    ...
    header: "Agents",
    accessorKey: "agents",
    accessorFilter: row.agents.map(agent => agent.value),
    ...
¿any other solution?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?