cold-orange

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?

TanStack•3y ago

cold-orange

Filter array of objects :sweat_smile:

[
    {
        "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",

    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?

Filter array of objects :sweat_smile:

Similar Threads

Filter array of objects :sweat_smile:

Similar Threads

Similar Threads

Similar Threads