Typescript issues with useReactTable hook

[zachkaigler]

Hey folks, got a really quick question here. I'm scaffolding a super basic table in React based off this example and this section in the documentation, but typescript is giving me some grief about the accessor functions when I pass my columns to useReactTable , claiming the following:

Type 'ColumnDef<User, string>[]' is not assignable to type 'ColumnDef<unknown, any>[]'.
  Type 'ColumnDef<User, string>' is not assignable to type 'ColumnDef<unknown, any>'.
    Type 'ColumnDefBase<User, string> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown, any>'.
      Type 'ColumnDefBase<User, string> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, any> & IdIdentifier<unknown, any>'.
        Property 'accessorFn' is missing in type 'ColumnDefBase<User, string> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<unknown, any>'.ts(2322)
types.d.ts(83, 5): 'accessorFn' is declared here.
table.d.ts(27, 5): The expected type comes from property 'columns' which is declared here on type 'TableOptions<unknown>'

I've tried both using the columnHelper functions to format my columns:

const columns = useMemo(
    () => [
      columnHelper.accessor((user) => user.details.name, {
        id: "name",
        header: "Name",
        cell: (info) => info.getValue(),
      }),
      columnHelper.accessor((user) => user.email, {
        id: "email",
        header: "Email",
        cell: (info) => info.getValue(),
      }),
      columnHelper.accessor((user) => user.org.role, {
        id: "role",
        header: "Role",
        cell: (info) => info.getValue(),
      }),
    ],
    [],
  );

As well as formatting them myself by typing the columns array with <ColumnDef<User>[]> manually assigning the accessorFn myself in each column obj:

const columns = useMemo<ColumnDef<User>[]>(
    () => [
      {
        accessorFn: (user) => user.details.name,
        id: "name",
        header: "Name",
        cell: (info) => info.getValue(),
      },
      {
        accessorFn: (user) => user.email,
        id: "email",
        header: "Email",
        cell: (info) => info.getValue(),
      },
      {
        accessorFn: (user) => user.org.role,
        id: "role",
        header: "Role",
        cell: (info) => info.getValue(),
      },
    ],
    [],
  );

What am I missing? Full code with error is linked below - you may have to close and reopen App.tsx once or twice to see the ts error on line 75.

https://codesandbox.io/p/devbox/musing-brook-6rpxxw

[zachkaigler]

I'm silly - wasn't tagging the users array with the data key in the options object, instead just supplying it directly, which obviously created a bunch of issues :)

[ghaderhp]

Greate...