TypeScript Errors when trying to make reusable generic component

[LinnJS]

So I am trying to make a basic table generic. The idea is I want to pass in any data and columns and if the data has what columns is trying to render it just does the work.

I archived this in v7 with a ton of pain and global types. So I am excited about re-implementing this in v8 without global types. I have it 90% of the way there but ColumnDef is complaining about the generic overwrite and I cant figure out if its be or some kind of type inheritance bug or what.

I am not quote yet a TypeScript power user so I am trying to understand the "why" here.

My table code:

import React, { useId } from 'react';

import { ColumnDef, flexRender, getCoreRowModel, useReactTable, TableOptions } from '@tanstack/react-table';

export interface TableProps<T extends object> {
  data: T[];
  columns: ColumnDef<T>[];
}

export const Table = <T extends object>({ data = [], columns = [] }: TableOptions<T>) => {
  const id = useId();
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="p-2">
      <table className="w-full border border-gray-300">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={`${headerGroup.id}-${id}`}>
              {headerGroup.headers.map((header) => (
                <th className="border-b border-r border-gray-300 px-4 py-2 font-semibold" key={`${header.id}-${id}`}>
                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>

        <tbody className="border-b border-gray-300">
          {table.getRowModel().rows.map((row) => (
            <tr key={`${row.id}-${id}`}>
              {row.getVisibleCells().map((cell) => (
                <td className="border text-center" key={`${cell.id}-${id}`}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

My Storybook code where I am passing in props:

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Table } from './index';
import { ColumnDef } from '@tanstack/react-table';

export default {
  title: 'primitives/Table',
  component: Table,
} as ComponentMeta<typeof Table>;

const Template: ComponentStory<typeof Table> = (props) => <Table {...props} />;

type Person = {
  firstName: string;
  lastName: string;
  age: number;
  visits: number;
  status: string;
  progress: number;
};

const defaultData: Person[] = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
];

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: 'age',
    header: () => 'Age',
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'visits',
    header: () => <span>Visits</span>,
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'status',
    header: 'Status',
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'progress',
    header: 'Profile Progress',
    footer: (props) => props.column.id,
  },
];

export const Default = Template.bind({});
Default.args = {
  data: [...defaultData],
  columns: [...columns],
};

My TypeScript error:

Type 'ColumnDef<Person, unknown>[]' is not assignable to type 'ColumnDef<object, any>[]'.
  Type 'ColumnDef<Person, unknown>' is not assignable to type 'ColumnDef<object, any>'.
    Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'ColumnDef<object, any>'.
      Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, any> & { accessorKey: string; id?: string | undefined; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef'.
        Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, any>'.
          Types of property 'columns' are incompatible.
            Type 'ColumnDef<Person, unknown>[] | undefined' is not assignable to type 'ColumnDef<object, unknown>[] | undefined'.
              Type 'ColumnDef<Person, unknown>[]' is not assignable to type 'ColumnDef<object, unknown>[]'.
                Type 'ColumnDef<Person, unknown>' is not assignable to type 'ColumnDef<object, unknown>'.
                  Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'ColumnDef<object, unknown>'.
                    Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, unknown> & { accessorKey: string; id?: string | undefined; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef'.
                      Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, unknown>'.
                        Types of property 'header' are incompatible.
                          Type 'ColumnDefTemplate<HeaderContext<Person, unknown>> | undefined' is not assignable to type 'ColumnDefTemplate<HeaderContext<object, unknown>> | undefined'.
                            Type '(props: HeaderContext<Person, unknown>) => any' is not assignable to type 'ColumnDefTemplate<HeaderContext<object, unknown>> | undefined'.
                              Type '(props: HeaderContext<Person, unknown>) => any' is not assignable to type '(props: HeaderContext<object, unknown>) => any'.
                                Types of parameters 'props' and 'props' are incompatible.
                                  Type 'HeaderContext<object, unknown>' is not assignable to type 'HeaderContext<Person, unknown>'.
                                    Types of property 'table' are incompatible.
                                      Type 'Table<object>' is not assignable to type 'Table<Person>'.
                                        Type 'Table<object>' is not assignable to type 'CoreInstance<Person>'.
                                          Types of property 'options' are incompatible.
                                            Type 'RequiredKeys<TableOptionsResolved<object>, "state">' is not assignable to type 'RequiredKeys<TableOptionsResolved<Person>, "state">'.
                                              Type 'RequiredKeys<TableOptionsResolved<object>, "state">' is not assignable to type 'Omit<TableOptionsResolved<Person>, "state">'.
                                                Types of property 'data' are incompatible.
                                                  Type 'object[]' is not assignable to type 'Person[]'.
                                                    Type '{}' is missing the following properties from type 'Person': firstName, lastName, age, visits, and 2 more.ts(2322)

So when I read this it looks like Typescript is saying object is not assignable to Person but Person is an object and that is exactly what I want so why not?

Update: TabStack Table React to 8.3.0 and got a slightly different error

[LinnJS]

I created a reproduction sandbox here: https://codesandbox.io/s/tanstack-table-react-type-error-reproduction-ii092f

Although I have no idea why but I am receiving a different but slightly less scary looking error... once again have no idea "why" 😰

Error:

Property 'getCoreRowModel' is missing in type '{ data: Person[]; columns: ColumnDef<Person, unknown>[]; }' but required in type 'Omit<TableOptionsResolved<Person>, "state" | "onStateChange" | "renderFallbackValue">'.ts(2741)
index.d.ts(724, 5): 'getCoreRowModel' is declared here.

[LinnJS]

bump 🙏

[LinnJS]

bump

[Victor-Varghese]

Related: #4530

[masiafrest]

So I am trying to make a basic table generic. The idea is I want to pass in any data and columns and if the data has what columns is trying to render it just does the work.

I archived this in v7 with a ton of pain and global types. So I am excited about re-implementing this in v8 without global types. I have it 90% of the way there but ColumnDef is complaining about the generic overwrite and I cant figure out if its be or some kind of type inheritance bug or what.

I am not quote yet a TypeScript power user so I am trying to understand the "why" here.

My table code:

import React, { useId } from 'react';

import { ColumnDef, flexRender, getCoreRowModel, useReactTable, TableOptions } from '@tanstack/react-table';

export interface TableProps<T extends object> {
  data: T[];
  columns: ColumnDef<T>[];
}

export const Table = <T extends object>({ data = [], columns = [] }: TableOptions<T>) => {
  const id = useId();
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="p-2">
      <table className="w-full border border-gray-300">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={`${headerGroup.id}-${id}`}>
              {headerGroup.headers.map((header) => (
                <th className="border-b border-r border-gray-300 px-4 py-2 font-semibold" key={`${header.id}-${id}`}>
                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>

        <tbody className="border-b border-gray-300">
          {table.getRowModel().rows.map((row) => (
            <tr key={`${row.id}-${id}`}>
              {row.getVisibleCells().map((cell) => (
                <td className="border text-center" key={`${cell.id}-${id}`}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

My Storybook code where I am passing in props:

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Table } from './index';
import { ColumnDef } from '@tanstack/react-table';

export default {
  title: 'primitives/Table',
  component: Table,
} as ComponentMeta<typeof Table>;

const Template: ComponentStory<typeof Table> = (props) => <Table {...props} />;

type Person = {
  firstName: string;
  lastName: string;
  age: number;
  visits: number;
  status: string;
  progress: number;
};

const defaultData: Person[] = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
];

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: 'age',
    header: () => 'Age',
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'visits',
    header: () => <span>Visits</span>,
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'status',
    header: 'Status',
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'progress',
    header: 'Profile Progress',
    footer: (props) => props.column.id,
  },
];

export const Default = Template.bind({});
Default.args = {
  data: [...defaultData],
  columns: [...columns],
};

My TypeScript error:

Type 'ColumnDef<Person, unknown>[]' is not assignable to type 'ColumnDef<object, any>[]'.
  Type 'ColumnDef<Person, unknown>' is not assignable to type 'ColumnDef<object, any>'.
    Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'ColumnDef<object, any>'.
      Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, any> & { accessorKey: string; id?: string | undefined; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef'.
        Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, any>'.
          Types of property 'columns' are incompatible.
            Type 'ColumnDef<Person, unknown>[] | undefined' is not assignable to type 'ColumnDef<object, unknown>[] | undefined'.
              Type 'ColumnDef<Person, unknown>[]' is not assignable to type 'ColumnDef<object, unknown>[]'.
                Type 'ColumnDef<Person, unknown>' is not assignable to type 'ColumnDef<object, unknown>'.
                  Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'ColumnDef<object, unknown>'.
                    Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, unknown> & { accessorKey: string; id?: string | undefined; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef'.
                      Type 'CoreColumnDefBase<Person, unknown> & { id: string; } & VisibilityColumnDef & ColumnPinningColumnDef & FiltersColumnDef<...> & SortingColumnDef<...> & GroupingColumnDef<...> & ColumnSizingColumnDef' is not assignable to type 'CoreColumnDefBase<object, unknown>'.
                        Types of property 'header' are incompatible.
                          Type 'ColumnDefTemplate<HeaderContext<Person, unknown>> | undefined' is not assignable to type 'ColumnDefTemplate<HeaderContext<object, unknown>> | undefined'.
                            Type '(props: HeaderContext<Person, unknown>) => any' is not assignable to type 'ColumnDefTemplate<HeaderContext<object, unknown>> | undefined'.
                              Type '(props: HeaderContext<Person, unknown>) => any' is not assignable to type '(props: HeaderContext<object, unknown>) => any'.
                                Types of parameters 'props' and 'props' are incompatible.
                                  Type 'HeaderContext<object, unknown>' is not assignable to type 'HeaderContext<Person, unknown>'.
                                    Types of property 'table' are incompatible.
                                      Type 'Table<object>' is not assignable to type 'Table<Person>'.
                                        Type 'Table<object>' is not assignable to type 'CoreInstance<Person>'.
                                          Types of property 'options' are incompatible.
                                            Type 'RequiredKeys<TableOptionsResolved<object>, "state">' is not assignable to type 'RequiredKeys<TableOptionsResolved<Person>, "state">'.
                                              Type 'RequiredKeys<TableOptionsResolved<object>, "state">' is not assignable to type 'Omit<TableOptionsResolved<Person>, "state">'.
                                                Types of property 'data' are incompatible.
                                                  Type 'object[]' is not assignable to type 'Person[]'.
                                                    Type '{}' is missing the following properties from type 'Person': firstName, lastName, age, visits, and 2 more.ts(2322)

So when I read this it looks like Typescript is saying object is not assignable to Person but Person is an object and that is exactly what I want so why not?

Update: TabStack Table React to 8.3.0 and got a slightly different error

Hey dont know if this help, but it help me, i declare the generic types like in shadcn data table, the problem happen on storybook (not a problem or bug really, is mostly typescript cannot infer it i think)

interface ReusableTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

export function ReusableTable<TData, TValue>({
  data,
  columns,
}: ReusableTableProps<TData, TValue>) {

so to use it in a story will be like

const meta = {
  title: 'Components/Table',
  component: ReusableTable<User, ColumnDef<User>>,
} satisfies Meta<typeof ReusableTable<User, ColumnDef<User>>>;

you can use it in any other component though without passing the data type, cause it will get inferred

<ReusableTable data={users} columns={userColumns} />