Skip to content

Incorrect TableMeta definition #6046

@leandroluk

Description

@leandroluk

TanStack Table version

v8.21.3

Framework/Library version

v19.1.0

Describe the bug and the steps to reproduce it

Looking at the documentation on the meta property, the only way to effectively type this information is, in every file where I need to declare this typing, to extend the interface as in the following example.

declare module '@tanstack/table-core' {
  interface TableMeta<TData extends RowData> {
    foo: string
  }
}

The problem is that when you don't use "TData" in the TableMeta declaration, TypeScript displays the message 'TData' is declared but its value is never read and when you remove the typing declaration, TypeScript displays the message All declarations of 'TableMeta' must have identical type parameters.

I believe that the solution to this problem would be to adjust the declaration of the TableMeta interface, leaving the TData value as the default RowData like this:

See: https://github.com/TanStack/table/blob/main/packages/table-core/src/types.ts#L118

export interface TableMeta<TData extends RowData = RowData> {
}

This will make it possible to make the declaration as stated in the documentation without necessarily passing the TData, ensuring correct typing in the ColumnHelper type like this:

import { useNavigate } from 'react-router';

declare module '@tanstack/table-core' {
  interface TableMeta {
    navigate: ReturnType<typeof useNavigate>;
  }
}

Another way to solve the problem is to resolve the generic type as there does not seem to be a need for TableMeta since it is used to share properties across table rows as in this example:

import {createColumnHelper, getCoreRowModel, useReactTable} from '@tanstack/react-table';
import {useNavigate} from 'react-router';

type Person = { id: string; name: string; };

const columnHelper = createColumnHelper<Person>();

const columns = [
  columnHelper.acessor('id', { ... }),
  columnHelper.acessor('name', { ... }),
]

const data: Array<Person> = []

export default function Example() {
  const navigate = useNavigate();
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {navigate}, // meta doens't add any property of Person here...
  });
  //...
}

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/sandbox/m75ws5

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I am also opening a PR that solves the problem along side this issue

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions