T
TanStack•10mo ago
afraid-scarlet

columns accessors defined inside group gets wrong types

info.getValue() type resolves to any instead of correct type, if the accessor is defined in column group. For example: 
const colHelper = createColumnHelper<{name:string}>();

const columns = [
  colHelper.accessor("name", {
    cell: (info) => info.getValue() // <-- resolves to "string"
  })
]

const columnsWithGroup = [
  colHelper.group({
    columns: [
      colHelper.accessor("name", {
        cell: (info) => info.getValue(), // <-- resolves to "any"
      }),
    ],
  })
]
const colHelper = createColumnHelper<{name:string}>();

const columns = [
  colHelper.accessor("name", {
    cell: (info) => info.getValue() // <-- resolves to "string"
  })
]

const columnsWithGroup = [
  colHelper.group({
    columns: [
      colHelper.accessor("name", {
        cell: (info) => info.getValue(), // <-- resolves to "any"
      }),
    ],
  })
]
Related GH issues: 1. https://github.com/TanStack/table/issues/5065 2. https://github.com/TanStack/table/issues/5860 Does anybody knows workaround other that just using as ... ?
GitHub
Accessor Function in columnHelper.group() fails to infer properly ·...
Describe the bug If you use createColumnHelper<RowType>() to make a column helper, then make a group, then make accessor columns inside of that group; then the types of the TValue generic for...
GitHub
getValue fails to infer correct type when columnHelper.accessor...
TanStack Table version 8.20.6 Framework/Library version React 19.0.0 Describe the bug and the steps to reproduce it When a column is created using the columnHelper.accessor() utility within a colum...
1 Reply
afraid-scarlet
afraid-scarletOP•10mo ago
As it's always happening, I've just realized that the workaround is quite simple 😅 
const colHelper = createColumnHelper<{name:string}>();

const groupColumns = [
      colHelper.accessor("name", {
        cell: (info) => info.getValue(), // <-- resolves to "string"
      }),
// ... other columns
    ]

const columnsWithGroup = [
  colHelper.group({
    columns: groupColumns
  })
]
const colHelper = createColumnHelper<{name:string}>();

const groupColumns = [
      colHelper.accessor("name", {
        cell: (info) => info.getValue(), // <-- resolves to "string"
      }),
// ... other columns
    ]

const columnsWithGroup = [
  colHelper.group({
    columns: groupColumns
  })
]

Did you find this page helpful?