Resolve IDs before createTable

[torztomasz]

Currently, Tanstack Table resolves column IDs inside the createTable function, which is called when passing column definitions (columnDefs) to the useReactTable hook. This process works as follows:

1. Column Definitions: Column definitions are created using columnHelper.
2. Table Creation: The columnDefs are passed to useReactTable.
3. ID Resolution: Inside useReactTable, the createTable function resolves the column ID using the following logic:

   let id =
     resolvedColumnDef.id ??
     (accessorKey
       ? typeof String.prototype.replaceAll === 'function'
         ? accessorKey.replaceAll('.', '_')
         : accessorKey.replace(/\./g, '_')
       : undefined) ??
     (typeof resolvedColumnDef.header === 'string'
       ? resolvedColumnDef.header
       : undefined)

4. Accessing Resolved IDs: Resolved IDs are only available via table.getAllColumns().at(0).id, after the table is created.

The Problem

This approach delays ID resolution until the table is created, preventing developers from accessing resolved IDs beforehand. This limitation impacts use cases such as syncing sorting states across multiple tables where column IDs need to match, as there is no way to check if one table's column can be sorted by another table's columnId.

Proposed Solutions

To address this, I propose two potential solutions:

---

Solution 1: Resolve IDs in Column Helper Functions

Move ID resolution logic into the column helper functions (columnHelper). This would enable resolved IDs to be available as soon as the column definitions are created, even before they are passed to useReactTable.

Flow:

1. Create columnDefs using columnHelper.
2. Access the resolved ID immediately via columns[0].id.

---

Solution 2: Expose an ID Resolution Utility

Extract the ID resolution logic into a standalone utility function, making it reusable and accessible to users. For example:

function getResolvedId<TData>(resolvedColumnDef: ColumnDefResolved<TData>) {
  const accessorKey = resolvedColumnDef.accessorKey;

  return (
    resolvedColumnDef.id ??
    (accessorKey
      ? typeof String.prototype.replaceAll === 'function'
        ? accessorKey.replaceAll('.', '_')
        : accessorKey.replace(/\./g, '_')
      : undefined) ??
    (typeof resolvedColumnDef.header === 'string'
      ? resolvedColumnDef.header
      : undefined)
  );
}

This function could then be exposed by Tanstack Table, allowing developers to manually resolve IDs when needed.

Flow:

1. Create columnDefs using columnHelper.
2. Resolve the ID explicitly:

   import { getResolvedId } from '@tanstack/table';
   
   const id = getResolvedId(columnDef);

---

Conclusion

Both solutions aim to provide earlier and more consistent access to resolved IDs.
Looking forward to hearing thoughts from the community! Which solution do you prefer, or do you see any alternative approaches?