ColumnDef types gives typescript error #4382
Comments
|
Only way I've found to get around this is to add a |
|
I'm having the same problem, any updates on this? |
|
I m having same, so i fix with i don't know if this is the best way, but the typescript error should go away. |
|
We skipped using columnDef, it still works as good and gives type help. |
|
This is the way. |
|
Thank you, it does work this way! |
|
@tannerlinsley if you're saying @Jontii 's solution is the right way, you might want to change the Column Defs page in the docs to not use a column helper and a typed array. That is what you're saying right, either use one or the other? |
|
If I understand it, if you use grouped columns like this example https://tanstack.com/table/v8/docs/examples/react/column-sizing then it is correct. If you are not using grouped columns, you shouldn't use it. |
|
You should only be using the column helper and not pre-typing anything. |
|
@tannerlinsley This is the first example in the Column Defs guide page: // Define your row shape
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const columnHelper = createColumnHelper<Person>()
// Make some columns!
const defaultColumns: ColumnDef<Person>[] = [ // <- Pre typed Array
// Display Column
columnHelper.display({ // <- While using column helper
id: 'actions',
cell: props => <RowActions row={props.row} />,
}),
// Grouping Column
columnHelper.group({
header: 'Name',
footer: props => props.column.id,
columns: [
// Accessor Column
columnHelper.accessor('firstName', {
cell: info => info.getValue(),
footer: props => props.column.id,
}),
// Accessor Column
columnHelper.accessor(row => row.lastName, {
id: 'lastName',
cell: info => info.getValue(),
header: () => <span>Last Name</span>,
footer: props => props.column.id,
}),
],
}),
// ...It has the column array pre-typed and throws errors if any of these accessor columns are top level. |
|
Yeah… we should fix that.
…On Oct 5, 2022 at 11:40 AM -0700, Chris Sandvik ***@***.***>, wrote:
@tannerlinsley This is the first example in the Column Defs guide page:
// Define your row shape
type Person = {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const columnHelper = createColumnHelper<Person>()
// Make some columns!
const defaultColumns: ColumnDef<Person>[] = [ // <- Pre typed Array
// Display Column
columnHelper.display({ // <- While using column helper
id: 'actions',
cell: props => <RowActions row={props.row} />,
}),
// Grouping Column
columnHelper.group({
header: 'Name',
footer: props => props.column.id,
columns: [
// Accessor Column
columnHelper.accessor('firstName', {
cell: info => info.getValue(),
footer: props => props.column.id,
}),
// Accessor Column
columnHelper.accessor(row => row.lastName, {
id: 'lastName',
cell: info => info.getValue(),
header: () => <span>Last Name</span>,
footer: props => props.column.id,
}),
],
}),
// ...
It has the column array pre-typed and throws errors if any of these accessor columns are top level.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
When using an `accessor` type column helper in a top level column defs array where the array is also typed, you get the type error mentioned in TanStack#4382. It was mentioned that the solution here is to not type the array, so this PR removes the typing from the example in the docs.
|
Pre-typing would be helpful for public interfaces e.g. if we create a wrapper components with interface DataTableProps {
// FIXME: Can we figure out something more type restrictive which actually works?
data: unknown[]
columns: ColumnDef<any, any>[];
}That makes TypeScript "happy"... but I would prefer something more strict. I guess I was looking for a typed |
This! We're making a custom |
When using an `accessor` type column helper in a top level column defs array where the array is also typed, you get the type error mentioned in #4382. It was mentioned that the solution here is to not type the array, so this PR removes the typing from the example in the docs.
This makes typescript happy IF you allow use of |
|
It becomes an issue when passing |
|
I am having the same issue here. Is there a way to avoid typing type Props<T> = {
data: T[];
columns: ColumnDef<T, any>[];
}; |
|
The EditableData example also uses |
|
@LoicKairon Glad I'm not the only one having this issue, I've done the same as you for now but would but nice to get that work properly. |
|
Hey @tannerlinsley 👋 I there any update on "
|
|
I just encountered the same issue, which forced me to turn off |
|
Same use case as above, useTable is wrapped in a reuseable component that takes in |
|
Any update on this issue? Running into the same issue. My solution is to use any for the type and individually define the types for each cell: |
|
Getting the same here, trying to convince our team to migrate to @tanstack/react-table and this is certainly getting in the way of that. I've defined columns as such: (nothing revolutionary) const columnHelper = createColumnHelper<Coffee>();
const columns = [
columnHelper.accessor(data => data.id, {
id: 'id',
cell: info => info.getValue()
})
];and have typed my generic table component as: interface TableProps<T extends object> {
data: T[];
columns: ColumnDef<T>[];
}
export default function index<T extends object>({ columns, data }: TableProps<T>) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel()
});
(...)But am then getting the following Type Error when passing my columns as a prop: Any advice is appreciated react-table version: 8.10.7 |
|
Yeah getting same issue. |
|
is there any solution for this. this still exists. |
That's very excessive, just put any for the second argument and it'll still work really well. |
|
Can anyone provide a working vue-table example project that passes column info into a table component? Edit: An example that works even with the |
|
for the time being I just removed the My generic table component have prop |
|
For me it seems to be anywhere that I'm returning a non-string from the accessor.
vs.
Having to cast everything to a string and back isn't the best. |
|
still waiting for the official fix lol |
|
Downgrade to 8.10.3 and it works. |
|
This still happens only when you have multiple types on your object property export type User = {
id: number;
name: string;
email: string;
role: "admin" | "member";
status: "active" | "pending";
};
// changing everything with type of string fixed the issue but whats the point of using typescript here
export type User = {
id: string;
name: string;
email: string;
role: string;
status: string;
}; |
|
@swernerx can you get some comments about this issue? Are you planning on fixing this? Please pay special attention to @cameronthrntn comment |
|
Still facing this issue |
|
Bump. |
|
👀 |
|
Any update on this issue? What is the best workaround for this? |
|
I have been using the // table component
type Props<T> = {
data: T[];
columns: ColumnDef<T, any>[];
};// when using the table component
const columnHelper = createColumnHelper<Vehicle>();
const columns = [
columnHelper.accessor("brand", {
header: "Marca",
}),
columnHelper.accessor("model", {
header: "Modello",
}),
]
const Testing = () => {
const vehicles = useVehicles();
return (
<Table data={vehicles} columns={columns} />
);
};I haven't had any issues with inference or missing types so far. @tanstack/react-table: "^8.15.3" |
|
@4ndrs That's what I did previously, it's not ideal but it work's perfectly fine tbh. This is my demo from what I created a tanstack table at my last role, see this I wish people would stop spamming this thread 😆 There a good few answers here now, give them a go and see if any of them help you out. @tannerlinsley and all the other maintainers/typescript wizards have done an incredible job with this library especially after it got a massive upgrade in ❤️ It's really difficult to get this sort stuff right so I'm sure in this particular case an "any" or "unknown" cast will do the trick everything else works great last time I checked. I'm going to unsubscribe from this thread as I keep getting emails about it 🤣 |
|
Hello, const columns: ColumnDef<Task, any>[] = [nor const columns: ColumnDef<Task>[] = [I am still getting the following error: The only workaround I use for now is: columns: columns as ColumnDef<unknown>[], |
|
Somebody help please. I added custom variable to columnDef and typescript is not recognizing it I don't know how to fix it. This is the error: |
|
I'm also trying to pass interface DataTableProps<LinkableRows extends boolean | undefined, TData, TValue> {
columns: LinkableRows extends true
? ColumnDef<TData & TableLink, TValue>[]
: ColumnDef<TData, TValue>[];
data: LinkableRows extends true ? (TData & TableLink)[] : TData[];
linkRows?: LinkableRows;
}
type DataTableWithLinksProps<TData, TValue> = DataTableProps<true, TData, TValue>;
type DataTableWithoutLinksProps<TData, TValue> = DataTableProps<false, TData, TValue>;
const export function CustomTable<TData, TValue>({
columns,
data,
linkRows
}: DataTableWithLinksProps<TData, TValue> | DataTableWithoutLinksProps<TData, TValue>) {
const table = useReactTable({
columns, // accessorFn error here
data,
...
});
// ...return table element that navigates to `row.original.tableLink` on
// row click if linkRows is true
}This would work if Strangely, if I replace the union props type definition for the component params, with either Any solution/ideas? |
|
Any updates how to fix correct? |
I am getting the below error while using like this. |
|
Any updates? Two years have already passed |
|
I thought I was going crazy, followed the docs to a T, defined some straightforward columns, but can't make a generic table component and pass the columns to them with type safety for the life of me. Glad to see I'm not alone I guess. |
|
I had something similar to this when I tried to pass the For some reason it worked with me when I changed the type that will be used on the From interface Post {
id: string;
title: string;
content: string;
}To type Post = {
id: string;
title: string;
content: string;
}And I have no idea of why and how |
|
+1 |
|
A common but subtly incorrect approach1 to define the component properties of a table is: interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
data: TData[]
}
export function DataTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {
...
}When using The following approach passes typechecking without the use of interface DataTableProps<TData> {
columns: {
[K in keyof TData]: ColumnDef<TData, TData[K]>;
}[keyof TData][];
data: TData[];
}
export function DataTable<TData>({
columns,
data,
}: DataTableProps<TData>) {
...
}It's not particularly readable, but it will satisfy your linter! Footnotes |
|
I solved it by using a type assertion. <DataTable columns={columns as ColumnDef<YourDataType | null, any>[]} data={balanceData}></DataTable>It may not be a proper solution, but it works for me. |
|
This is what I ended up doing: import type { CoreOptions } from "@tanstack/vue-table";
const { data, columns } = defineProps<{
data: CoreOptions<TData>["data"];
columns: CoreOptions<TData>["columns"];
}>();whatever is the type coming from
|
|
Fix mentioned by @jack-davies works almost all the time. The only problem is data with optional fields. Adding interface DataTableProps<TData> {
columns: {
[K in keyof Required<TData>]: ColumnDef<TData, TData[K]>;
}[keyof TData][];
data: TData[];
}It removes |
|
It was not explained before, so I will do. Check this example: type MyType = {
name: string;
secondName?: string;
role: 'admin' | 'user';
};
type FirstStep<TData> = { [K in keyof Required<TData>]: TData[K] };
type WithFirstStep = FirstStep<MyType>;
/**
* type WithFirstStep = {
name: string;
secondName: string;
role: "admin" | "user";
}
*/
type SecondStep<TData> = {
[K in keyof Required<TData>]: ColumnDef<TData, TData[K]>;
};
type WithSecondStep = SecondStep<MyType>;
/**
* type WithSecondStep = {
name: ColumnDef<MyType, string>;
secondName: ColumnDef<MyType, string | undefined>;
role: ColumnDef<MyType, "admin" | "user">;
}
*/
type ThirdStep<TData> = {
[K in keyof Required<TData>]: ColumnDef<TData, TData[K]>;
}[keyof TData];
type WithThirdStep = ThirdStep<MyType>;
/**
* type WithThirdStep = ColumnDef<MyType, string> | ColumnDef<MyType, string | undefined> | ColumnDef<MyType, "admin" | "user">
*/
type FourthStep<TData> = {
[K in keyof Required<TData>]: ColumnDef<TData, TData[K]>;
}[keyof TData][];
type WithFourthStep = FourthStep<MyType>;
/**
* type WithFourthStep = (ColumnDef<MyType, string> | ColumnDef<MyType, string | undefined> | ColumnDef<MyType, "admin" | "user">)[]
*/
type TableOptionsColumns = TableOptions<MyType>['columns'];
/**
* ColumnDef<MyType, any>[]
*/ |
and others
Describe the bug
Looking at the examples and docs I expect this to correctly type my columns for me. Instead I get a large error with this code:
Am I doing something wrong here?
Regards Jonathan
Your minimal, reproducible example
https://codesandbox.io/s/typescript-playground-export-forked-iqm265?file=/index.tsx
Steps to reproduce
Expected behavior
I expected the Columdef to correctly type my columns.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
Mac OS
react-table version
v8.5.13
TypeScript version
v4.8.2
Additional context
No response
Terms & Code of Conduct
The text was updated successfully, but these errors were encountered: