-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Description
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.