Filtering Arrays in a Reusable Component

[jcenlo]

Hello fellow

I'm currently working on building a reusable component, and I'm facing some challenges when it comes to filtering arrays within some of my columns. In this specific case, the arrays represent people who are directing campaigns. Let me provide an example to better illustrate the issue:

• Campaign 1: ['juan', 'pepe']
• Campaign 2: ['juan', 'jose']
• Campaign 3: ['jose']

I'm encountering difficulties when attempting to filter these arrays by simple values. I've managed to create a solution for filtering when the array is represented as a string, by separating the values, but I'm struggling to apply the filter when the column is referencing something other than a string. It appears that the column is receiving an object or similar data, and I can't figure out how to make it filter based on the value I'm passing.

Here's a simplified representation of my object:

{
     agents: [
        {
            thumb: faker.image.avatar(),
            color: faker.internet.color(),
            name: 'juan'
            id: faker.number.int(11111111),
            value: 'juan'
        },
        {
            thumb: faker.image.avatar(),
            color: faker.internet.color(),
            name: 'pepe'
            id: faker.number.int(11111111),
            value: 'pepe'
        }
    ],
}

And this is the definition of the column:

export const columnsProps: ColumnDef<CampaignListType, any>[] = [
    ... other columns

    {
        id: "agents",
        header: "Agents",
        accessorKey: "agents",
        // accessorFn: row => row.agents.map(agent => agent.name).join(", "),
        cell: (props) => {
        const agents = props.getValue();
        // console.log({ agents });
        return (
            <>
            <div className="flex items-center">
                {agents.map((agent: any) => (
                <div
                    className="flex items-center justify-center w-8 h-8 rounded-full  text-white mr-2"
                    key={agent.id}
                    style={{ background: agent.color }}
                >
                    {agent.name[0]}
                </div>
                ))}
            </div>
            </>
        );
        },
        footer: props => props.column.id,
        enableSorting: false,
        filterFn: 'arrIncludesSome'
    },
];

Additionally, here's my filter definition:

import { useMemo } from "react";
import { Column, Table } from "@tanstack/react-table";
import { DebouncedInput } from "./DebouncedInput";

export function Filter({
	column,
	table,
}: {
	column: Column<any, unknown>;
	table: Table<any>;
}) {
	const firstValue = table
		.getPreFilteredRowModel()
		.flatRows[0]?.getValue(column.id);

	const columnFilterValue = column.getFilterValue();

	console.log(columnFilterValue, "columnFilterValue")
	const sortedUniqueValues = useMemo(() => {
		if (typeof firstValue === "number") {
			return [];
		}
		return Array.from(column.getFacetedUniqueValues().keys()).sort();
	}, [column.getFacetedUniqueValues()]);

	// Determinar el tipo de valor
	let valueType = '';
	if (typeof firstValue === "number") {
		valueType = 'number';
	}
	else if (typeof firstValue === "string") {
		valueType = 'string';
	}
	else if (typeof firstValue === "object") {
		// Asegurarse de diferenciar entre objetos y arrays
		valueType = Array.isArray(firstValue) ? 'array' : 'object';
	}

	switch (valueType) {
		case 'number':
			return (
                <>
                {/* case Numbers */}
                </>
			);
		case 'string':
			return (
				<>
					<datalist id={column.id + "list"}>
						{sortedUniqueValues.slice(0, 5000).map((value: any, index: number) => (
							<option value={value} key={`${value}-${index}`} />
						))}
					</datalist>
					<DebouncedInput
						type="text"
						value={(columnFilterValue ?? "") as string}
						onChange={(value) => column.setFilterValue(value)}
						placeholder={` (${column.columnDef.header}) (${column.getFacetedUniqueValues().size
							})`}
						className="w-36 border shadow rounded text-sm ps-2 py-1"
						list={column.id + "list"}
					/>

				</>
			);
		case 'array':
			return (
				<>
					<datalist id={column.id + "list"}>
						{sortedUniqueValues.slice(0, 5000).map((value: any, index: number) => (
							Array.isArray(value) ? (
								value.map((val, idx) => (
									<option value={val.name} key={`${val.name}-${idx}`} />
								))
							) : (
								<option value={value} key={`${value}-${index}`} />
							)
						))}
					</datalist>
					<DebouncedInput
						type="text"
						value={(columnFilterValue ?? "") as string}
						onChange={(value) => column.setFilterValue(value)}
						placeholder={` (${column.columnDef.header}) (${column.getFacetedUniqueValues().size
							})`}
						className="w-36 border shadow rounded text-sm ps-2 py-1"
						list={column.id + "list"}
					/>
				</>
			);
		case 'object':
			return (
				<>
					{/* case object */}
				</>
			);
		default:
			return null
	}
}

I would greatly appreciate any help or solutions you can offer to overcome this filtering challenge. Thank you in advance for your assistance!

Best regards,

[jcenlo]

any advice?

[IndumathiMR]

@jcenlo have u finished the above implementation .If yes can u please share the repo
I'm facing the same issue and searching for the solution for a week

[cometyang]

@jcenlo Should you define your own filter function to replace default implementation?
filterFn: 'arrIncludesSome'
I implement my own filterFn to replace the 'arrIncludesSome'

I do have a question for you, I am trying to do the similar customization, but I found "getFacetedUniqueValues" does not work. Do you know how to solve this issue?

[jcenlo]

Hi , thanks by the advice i am working on that, sorry by the delay i was on long holidays

[hardik-gupta]

@cometyang what was your implementation ? Also how do I make this filterFn work, I am very new to Tanstack and can't figure out how to even use 'arrIncludesSome'.
@jcenlo were you able to solve the issue?

[jcenlo]

https://github.com/PaoloJN/nessimworks-dashboard, check this repo, i found a way to create a new filter, also i divided data, in different JSON
1º i created a constant with all the info of my users like (name, uuid, thumbs, color,... etc)
2º In my case i am rendering "campaigns" that campaigns have "agents" in the json of the campaign i only download the uuid from the API and them i do somethig like this

  {
    id: "tags",
    accessorFn: (row: any) => row.tags,
    header: ({ column }: any) => (
      <DataTableColumnHeader column={column} title="Tags" />
    ),
    cell: ({ row }: any) => {
      const tags = row.getValue("tags")
      const labels = tags.map((tag: string) => {
        return TAGS.find((t) => t.value === tag)?.label || tag
      })

      return <ShowLabels labels={labels} />
    },
    filterFn: "select",
    enableGlobalFilter: false,
  },

[rostislav444]

const CustomFilterFn = (row: any, key: string, searchValue: string) => {
    return !!row?.original[key].find((item: string) => item.includes(searchValue))
}


export const useColumns = (): ColumnDef<PropertyType>[] => {
    return React.useMemo<ColumnDef<PropertyType>[]>(() => [
        {
            accessorKey: 'phones',
            header: () => 'Phone numbers',
            footer: props => props.column.id,
            filterFn: CustomFilterFn
        },
        {
            accessorKey: 'cars',
            header: 'Cars numbers',
            footer: props => props.column.id,
            filterFn: CustomFilterFn
        },
    ], []);
};