Create a type as union of all column ids using columnHelper

[treasurely]

First off, thank you for this library, it is incredible. I'm working on something right now that's filtering a table's data server side using a filter that's configured by the end user in the app. I'm trying to make the filter's code typesafe (the idea is to pass a list of the column Ids to a generic useFilters hook), but I'm struggling to get a union of the column ids from a table's column definition.

From the below helper, I'd ultimately want to be able to get a type ColumnIds that would be a union name | country | updatedAt, and ideally have a reusable generic I could pass any columnHelper or columns into - everything I've tried so far has returned me just string | undefined.

const columnHelper = createColumnHelper<Companies[number]>();

const columns = [
  columnHelper.accessor("name", {
    id: "name",
    cell: (info) => {info.getValue()}
    header: () => "Name"
  }),
  columnHelper.accessor("country", {
    id: "country",
    cell: (info) => info.getValue().toUpperCase(),
    header: () => "Country"
  }),
  columnHelper.accessor("updatedAt", {
    id: "updatedAt",
    cell: (info) => format(info.getValue(), "MMM dd, yyyy"),
    header: ({ column }) => "Last updated"
  })
]

Any help is much appreciated - thanks!

[treasurely]

Update: Got lost in the Typescript sauce -- for anyone finding this, turns out I could just use type ColumnIds = keyof T, where T is the type passed to columnHelper in the first place. I initially thought "Well what if the table is only a partial of the data & its undelying type", but I actually think in that case you should just reduce the data to only the keys you would want in the table anyway.
By no means am I saying this is the best way, so if a Tanstack or Typescript expert knows better feel free to correct anything I said 😊

Ended up just using:

export type myTableWithSpecificDataColumnIds = keyof SpecificData[number]

const myTableWithSpecificDataColumnHelper = createColumnHelper<SpecificData[number]>();

//...create array of columns using the helper//

[hjoelh]

this would only work if you manually make sure the id you provide is keyof T, which works in your example but it's not enforced

[IPJT]

@hjoelh - True!
Do you know how to achieve this when the ids are not necessarily keyof T?

[hjoelh]

@IPJT Couldnt figure out anything that nice :(

ended up doing this and just using ColumnId type where i needed it

[IPJT]

That makes sense! @hjoelh

So I actually ended up taking a different path (not sure if it works for your case though, but it did for mine).

My case:
I wanted to create a list with metadata associated with each column. I needed the type to make sure the list was complete (had metadata for all the columns). Found out that there are a meta prop in the ColumnDef API => meaning i can put this data in the columns array. Nice!

export const incidentColumns = [
  columnHelper.accessor('incident_number', {
    header: ({ column }) => <DataTableColumnHeader column={column} />,
    cell: (props) => (
      <IncidentLink
        text={props.row.original.incident_number.toString()}
        incidentNumber={props.row.original.incident_number}
      />
    ),
    enableSorting: false,
    enableColumnFilter: false,
    meta: {
      label: 'Nrs',
      filterType: 'range',
    },
  }),
  ...

table.d.ts:

import '@tanstack/react-table';

declare module '@tanstack/react-table' {
  interface ColumnMeta {
    label: string;
    filterType?: 'range' | 'select';
  }
}

[knownasilya]

Still no good answer for this. Can't use the data that is passed into the helper, since some columns are computed and not on the data passed in.