typescript - Definiera anpassad typ för Tanstack Table FilterFunction

Jag skrev en egen filterfunktion för Tanstack Table som använder fuse.js.

Men TypeScript klagar på alla mina försök att definiera typen för min egen funktion.

Jag vill att min funktion ska följa denna typdefinition

export interface FilterFn<TData extends RowData> {
    (row: Row<TData>, columnId: string, filterValue: any, addMeta: (meta: FilterMeta) => void): boolean;
    resolveFilterValue?: TransformFilterValueFn<TData>;
    autoRemove?: ColumnFilterAutoRemoveTestFn<TData>;
}

Det här är min funktion. Jag skulle vilja använda TData istället för any men jag vet inte exakt hur.

/**
 * FilterFunction for Tanstack Table incorporating fuse's fuzzy search
 */
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, consider the row as a match
    addMeta({ searchResults }); // Optionally, add any metadata for the search results
    return true;
  }

  return false;
};

Det här är mitt bord

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,
  });

Svar #1

För att det inte ska vara typen Any måste du ange typen.

Exempel :

/**
* Here you define your type.
*/
type YourGenericTypeHere = {
  stringprop: string,
  numprop: number,
  recordprop: Record<string,any>,
  optional?: string,
  objectprop: Object
}

// Here you define the columnDefinition and pass the type you defined earlier
export const columns: ColumnDef<YourGenericTypeHere>[] = [{
id: "someidyouchose",
header: ({table}) => (<CustomHeaderElement/>),
// ... etc
}]

/**
 * 
 *
 * We also have to pass the Type definition to the filter, otherwise we don't 
 * know what to filter
 */
export const fuseFilterFn: FilterFn<YourGenericTypeHere> = (
  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, consider the row as a match
    addMeta({ searchResults }); // Optionally, add any metadata for the search results
    return true;
  }

  return false;
};

Sedan, på den plats där du faktiskt renderar tabellen, tillhandahåll den importerade kolumn-egenskapen

Datatypen bör vara YourGenericTypeHere och kolumnerna har samma typ också.

<DataTable data={data} columns={columns} />