typescript - Aangepast type definiëren voor Tanstack Table FilterFuntion

Ik heb een aangepaste filterfunctie geschreven voor Tanstack Table die gebruikmaakt van fuse.js.

Echter, TypeScript klaagt over al mijn pogingen om het type van mijn aangepaste functie te definiëren.

Ik wil dat mijn functie voldoet aan deze type-definitie

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

Dit is mijn functie. Ik zou graag TData in plaats van any willen gebruiken, maar ik weet niet precies hoe.

/**
 * 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;
};

Dit is mijn tafel

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

Antwoord #1

Om te voorkomen dat het van het type Any is, moet je het type opgeven.

Voorbeeld :

/**
* 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;
};

Geef dan op de plaats waar je de tabel daadwerkelijk weergeeft, de geïmporteerde kolomeigenschap

Het gegevenstype moet YourGenericTypeHere zijn en de kolommen hebben ook hetzelfde type.

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