id building is not consistent when using accessorKey

[mlarcher]

Describe the bug

When using the accessorKey to define an id as declared in https://github.com/TanStack/table/blob/main/packages/table-core/src/core/column.ts#L39 the logic is not consistent.

let id =
    resolvedColumnDef.id ??
    (accessorKey ? accessorKey.replace('.', '_') : undefined) ??
    (typeof resolvedColumnDef.header === 'string'
      ? resolvedColumnDef.header
      : undefined)

That rule is fine when data is only one level deep, but does not work as expected when accessorKey digs deeper. For example, accessorKey: 'key1.key2' will produce id = 'key1_key2' while accessorKey: 'key1.key2.key3' will produce id = 'key1_key2.key3'. A simple fix would be to use the g flag in a regexp for the replace, i.e. (accessorKey ? accessorKey.replace(/\./g, '_') : undefined)

Your minimal, reproducible example

http://not.needed.com

Steps to reproduce

all is said in the description

Expected behavior

a consistent id

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

all

react-table version

8.7.9

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[xkomiks]

Thumbs up, this is also a problem for me

[xkomiks]

@KevinVandy I just want to draw your attention to this issue, it seems to be a critical issue.

[mlarcher]

fwiw as a workaround we resorted to using explicit ids on all columns 🤷‍♂️

[xkomiks]

@mlarcher it's not cool, we're mainly using the accessorKey so I will probably have to do

columns = columns.map(column => {
  column.id = column.accessorKey;
  return column;
});

[Munter]

Why even have the . to _ replacement for the id? It wrecks havoc when attempting to use the table as a sorting state controller when the server expects a sortBy key that equals the defined accessor. It's really hard to set up typescript guards when the accessorKey is not persisted in the sorting

[Roman86]

The fix was really simple so I've decided to try myself contributing.

I also published a workaround package (feel free to use until merged/fixed) https://www.npmjs.com/package/tanstack-table-deep-accessor-key-workaround

Just wrap your columns with fixDeepAccessorColumnIds function call. Supports nested columns also (column groups).

import { fixDeepAccessorColumnIds } from 'tanstack-table-deep-accessor-key-workaround';

// ...

const columns = fixDeepAccessorColumnIds([
  columnHelper.group({
    header: 'Person',
    columns: [
      // will have id "person_info_name"
      columnHelper.accessor('person.info.name', {
        header: 'Name',
      }),
      columnHelper.accessor('person.info.email', {
        header: 'Email',
        id: 'user_email', // won't be affected since set explicitly
      }),
      // will have id "person_info_extra_notes"
      columnHelper.accessor('person.info.extra.notes', {
        header: 'Notes',
      }),
    ],
  })
]);