I’m pretty new to TS and trying to avoid using any as the types. This is a reusable table component thus passing in a static type of let’s say Users wouldn’t be a good solution. I’m using the forwardRef with an useImperativeHandle to return the table instance to the parent component to be able to filter the table from outside.

I tested many variations of types but nothing seemed to fit in. I tried replacing any with TData but it thrown an TS2304: Cannot find name TData.

Could somebody explain what is the correct type and how would I be able to know it myself next time?

import {
  Table as TTable,
} from '@tanstack/react-table';

import {
  Table,
} from '@/Components/ui/table';

interface DataTableProps<TData, TValue> {
  columns: ExtendedColumnDef<TData, TValue>[];
  data: TData[];
  isLoading?: boolean;
}

export const DataTable = forwardRef<
  TTable<any>, // <--- Here
  DataTableProps<any, unknown> // <--- Here
>(({ columns, data, isLoading }, ref) => {

...

const table = useReactTable({
  data: tableData,
  columns: tableColumns,
  ...
});

useImperativeHandle(ref, () => table, [table]);