T
TanStack•2y ago
vicious-gold

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: 
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 here
Type 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 :(
1 Reply
rival-black
rival-black•2y ago
Your data and columns just have to use the same List generic you can force the generic on the table too useReactTable<List>>({}) and that might get you closer to seeing which of your variables is mistyped

Did you find this page helpful?