[V8] Separate out types to make it easier to overload useReactTable

[haldunanil]

I'm trying to type TableMeta more strongly by overloading the types in @tanstack/table-core and for the most part, it works fine except when I get to attempting to overload useReactTable.

This is what I currently have in my code:

declare module "@tanstack/react-table" {
  function useReactTable<
    TData extends BaseTableResultItem,
    TQueryData extends SelectedData<TData>,
    TTableMetaKeys extends string
  >(options: TableOptions<TData, TQueryData, TTableMetaKeys>): Table<TData, TQueryData, TTableMetaKeys>;
}

However, the above fails when compiling the app with the following error:

error TS2383: Overload signatures must all be exported or non-exported.

194   export function useReactTable<
                      ~~~~~~~~~~~~~

I'm reasonably confident that creating a separate interface that would be assigned to useReactTable would be sufficient to fix this issue and make it properly overloadable. Happy to open a PR if that is a direction that sounds desirable.

[tannerlinsley]

Why not just write your own table Hook with the proper function signature that you want

[haldunanil]

I actually do have a custom hook that uses useReactTable internally. The problem I'm running into is that I want the the table instance returned by useReactTable to retain the stronger typing of the meta object that's being passed in and I don't want to have to cast the output of useReactTable into something like as unknown as TableWithCustomMeta. I was successfully able to do this with other parts of @tanstack/table-core using something like this alongside my custom hook:

declare module "@tanstack/table-core" {
  type BulkActionFn<
    TData extends BaseTableResultItem,
    TQueryData extends SelectedData<TData>,
    TTableMetaKeys extends string
  > = ...some signature

  type BulkActions<
    TData extends BaseTableResultItem,
    TQueryData extends SelectedData<TData>,
    TTableMetaKeys extends string
  > = {
    [action in TTableMetaKeys]: BulkActionFn<TData, TQueryData, TTableMetaKeys>;
  };

  interface TableMeta<
    TData extends BaseTableResultItem = BaseTableResultItem,
    TQueryData extends SelectedData<TData> = SelectedData<TData>,
    TTableMetaKeys extends string = string
  > {
    // object containing bulk action functions
    bulkActions?: BulkActions<TData, TQueryData, TTableMetaKeys>;
  }
}

But I can't seem to be able to do the same for useReactTable because its types are inline.

Ultimately, I just want to be able to have more specific types for the meta object. An alternative approach I can think of is to make shape of the TableMeta into a generic type that can be inferred on both ends the input and output of a useReactTable call. Something like this:

export type CoreOptions<TData extends RowData, TMeta extends unknown> = {
  meta?: TMeta
  ...the rest is the same
}

What do you think?