Cannot assign columns
Hello I am very new to tanstack tables so this might be a dumb question but I am not able to assign the column definitions to the table. I am getting the following errors on vscode:
This is my code in page.tsx
Type is this:
And the column definition this:
I am not sure how to approach this :(
Type 'ColumnDef<{ name: string; quantity: number; amulet: number; }>[]' is not assignable to type 'ColumnDef<unknown, any>[]'.
Type 'ColumnDef<{ name: string; quantity: number; amulet: number; }>' is not assignable to type 'ColumnDef<unknown, any>'.
Type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown, any>'.
Type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, any> & IdIdentifier<unknown, any>'.
Property 'accessorFn' is missing in type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<unknown, any>'.Type 'ColumnDef<{ name: string; quantity: number; amulet: number; }>[]' is not assignable to type 'ColumnDef<unknown, any>[]'.
Type 'ColumnDef<{ name: string; quantity: number; amulet: number; }>' is not assignable to type 'ColumnDef<unknown, any>'.
Type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown, any>'.
Type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, any> & IdIdentifier<unknown, any>'.
Property 'accessorFn' is missing in type 'ColumnDefBase<{ name: string; quantity: number; amulet: number; }, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<unknown, any>'.This is my code in page.tsx
'use client'
import { type NextPage } from 'next';
import { list } from '../utils/data';
import { listDefinition } from '../utils/table.definitions';
import { useReactTable, flexRender, getCoreRowModel } from '@tanstack/react-table';
const Home: NextPage = () => {
const tableInstance = useReactTable({
list,
columns: listDefinition,
getCoreRowModel: getCoreRowModel(),
});`
// Return function here'use client'
import { type NextPage } from 'next';
import { list } from '../utils/data';
import { listDefinition } from '../utils/table.definitions';
import { useReactTable, flexRender, getCoreRowModel } from '@tanstack/react-table';
const Home: NextPage = () => {
const tableInstance = useReactTable({
list,
columns: listDefinition,
getCoreRowModel: getCoreRowModel(),
});`
// Return function hereType is this:
type List = {
name: string;
quantity: number;
amulet: number;
}type List = {
name: string;
quantity: number;
amulet: number;
}And the column definition this:
import type { List } from "./data";
import { type ColumnDef } from "@tanstack/react-table";
export const listDefinition: ColumnDef<List>[] = [
{
header: "Card Name",
accessorKey: "name"
},
{
header: "Quantity",
accessorKey: "quantity"
},
{
header: "Amulet",
accessorKey: "amulet",
},
];import type { List } from "./data";
import { type ColumnDef } from "@tanstack/react-table";
export const listDefinition: ColumnDef<List>[] = [
{
header: "Card Name",
accessorKey: "name"
},
{
header: "Quantity",
accessorKey: "quantity"
},
{
header: "Amulet",
accessorKey: "amulet",
},
];I am not sure how to approach this :(
