I developed a unique filter function specifically for enhancing the functionality of Tanstack Table by utilizing fuse.js.
Despite my efforts, TypeScript consistently raises concerns when I try to define the type for my custom function.
My goal is to align my Function with the following type definition:
export interface FilterFn<TData extends RowData> {
(row: Row<TData>, columnId: string, filterValue: any, addMeta: (meta: FilterMeta) => void): boolean;
resolveFilterValue?: TransformFilterValueFn<TData>;
autoRemove?: ColumnFilterAutoRemoveTestFn<TData>;
}
This piece of code showcases my function. I aspire to utilize TData instead of any but find myself uncertain about the exact approach.
/**
* Custom FilterFunction designed for Tanstack Table integrating fuse's fuzzy search capability
*/
export const fuseFilterFn: FilterFn<any> = (
row,
columnId,
filterValue,
addMeta
) => {
const searchPattern = filterValue.toString();
const fuse = new Fuse([row.getValue(columnId)]);
const searchResults = fuse.search(searchPattern);
if (searchResults.length > 0) {
// If any search result is found, mark the row as a match
addMeta({ searchResults }); // Optionally, include metadata related to the search results
return true;
}
return false;
};
The following snippet illustrates the structure of my table
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
columnFilters?: ColumnFilter[];
}
export function Table<TData, TValue>({
data,
columns,
columnFilters = [],
}: DataTabelProps<TData, TValue>) {
const [sorting, setSorting] = useState<ColumnSort[]>([]);
const [filtering, setFiltering] = useState('');
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
state: {
sorting: sorting,
globalFilter: filtering,
columnFilters: columnFilters,
},
globalFilterFn: fuseFilterFn,
onSortingChange: setSorting,
onGlobalFilterChange: setFiltering,
});