TypeScript thinks that accessorKey is not an accessible property when column is defined with createColumnHelper

Describe the bug

When I describe columnDefs via the createColumnHelper api, TypeScript informs me that accessorKey is unavailable. But when I console log the contents of the defined columns, accessorKey is very clearly available.

Your minimal, reproducible example

https://codesandbox.io/s/tanstack-react-table-accessorkey-issue-v68163

Steps to reproduce

Run the codesandbox
Examine the typescript issue on line 22
Examine the rendered content and the console log

Expected behavior

As a user, I expect to be able to access accessorKey without typescript issues when defining my columns via the createColumnHelper API, but typescript doesn’t think the field exists or is available

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 182.22 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 15.6.1
  npmPackages:
    @tanstack/react-table: 8.5.15 => 8.5.15 
    react: 18.0.0 => 18.0.0 
    typescript: ^4.6.2 => 4.8.3

react-table version

8.5.15

TypeScript version

4.8.3

Additional context

No response

Terms & Code of Conduct

I agree to follow this project’s Code of Conduct
I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

jonahallibonecommented, Oct 21, 2022

+1 Same issue here

const [columnVisibility, setColumnVisibility] = useState(
  columns.map((column) => ({ [column.accessorKey]: true }))
);

Property 'accessorKey' does not exist on type 'ColumnDef<DataType, DataType[string]> | ColumnDef<DataType, DataType[number]> | ColumnDef<DataType, DataType[symbol]>'.
  Property 'accessorKey' does not exist on type '{ footer?: ColumnDefTemplate<HeaderContext<DataType, DataType[string]>> | undefined; cell?: ColumnDefTemplate<CellContext<DataType, DataType[string]>> | undefined; meta?: ColumnMeta<...> | undefined; } & ... 6 more ... & StringHeaderIdentifier'.ts(2339)

2reactions

Tushara710406commented, Oct 11, 2022

any updates on this issue

Top Results From Across the Web

columnHelper.accessor Type issue #4241 - GitHub

When defining the columns for the table, columnHelper.accessor seems to cause a type issue. Although, table seems to render fine.

react-table - Bountysource

TypeScript thinks that accessorKey is not an accessible property when column is defined with createColumnHelper $ 0. Created 2 months ago in tannerlinsley/react ......

React Table - types of property 'accessor' are incompatible

Basically you need to define: const columns: Array<Column<{ col1: string; col2: string }>> = useMemo( ... Things which worked for me:.

Documentation - Classes - TypeScript

A field declaration creates a public writeable property on a class: ... TypeScript does not analyze methods you invoke from the constructor to...

How To Use Classes in TypeScript | DigitalOcean

In the name: string declaration, the visibility is not declared, which means that the property uses the default public status that is accessible...