[v8] ColumnMeta in module declaration giving other errors now

[marceloverdijk]

I'm trying to add classNames to column definitions and as per #4100 column meta is the way to do this.

So I have a column def like:

    {
      id: 'placeName',
      header: 'Placename',
      accessorKey: 'placeName',
      meta: {
        className: 'd-none d-md-table-cell',
      },
    },

and when rendering the table I use:

{table.getHeaderGroups().map(headerGroup => (
  <tr key={headerGroup.id}>
    {headerGroup.headers.map(header => (
      <th key={header.id} colSpan={header.colSpan} className={header.column.columnDef.meta?.classclassName}>
..

<tbody>
  {table.getRowModel().rows.map(row => (
    <tr key={row.id}>
      {row.getVisibleCells().map(cell => (
        <td key={cell.id} className={cell.column.columnDef.meta?.className}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
      ))}
    </tr>
  ))}
</tbody>

to add this className to both the header as the row cells.

Now off course typeScript complains about the meta and as per the docs I've added the below to a custom react-table.d.ts file:

declare module '@tanstack/table-core' {
  interface ColumnMeta {
    className?: string
  }
}

but now TypeScript starts to complain about the the headerGroup, header, row and cell variables...

{row.getVisibleCells().map(cell => (

Parameter 'cell' implicitly has an 'any' type.ts(7006)

Do I need to add something else to the module declaration?

[LinnJS]

This is a ongoing problem Tanner mentioned that he is working on a solution in this thread. I was struggling with this yesterday and I ended up just putting some @ts-ignore comments on the two spots I am using className. Not TypeSafe but after all its just styles do I dont feel the risk is too high.

[AzzouQ]

Don't forget to import @tanstack/react-table otherwise everything will be typed as any except ColumnMeta.

import '@tanstack/react-table';

declare module '@tanstack/react-table' {
  interface ColumnMeta {
    className?: string
  }
}

[marceloverdijk]

Thx @AzzouQ and Interesting, I wasn't aware of that.

I tried now with:

react-table.d.ts:

import '@tanstack/react-table'

declare module '@tanstack/react-table' {
  interface ColumnMeta {
    className?: string
  }
}

Note I also changed @tanstack/table-core to @tanstack/react-table as you suggested.

But then I seem to get back to square one as the code using this:

            {table.getRowModel().rows.map(row => (
              <tr key={row.id}>
                {row.getVisibleCells().map(cell => (
                  <td key={cell.id} className={cell.column.columnDef.meta?.className}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            ))}

gives the below error on the line trying to access the meta?.className:

Object is of type 'unknown'.ts(2571)

[AzzouQ]

Hmm it work for me so idk, be sure to be at least on @tanstack/react-table@8.2.0. Othrewise if you could provide a reproducible example, it will be easier to see what's wrong.

[marceloverdijk]

I've upgraded from 8.2.6 to 8.3.3 and now it works with:

import '@tanstack/react-table'

declare module '@tanstack/react-table' {
  interface ColumnMeta {
    className?: string
  }
}

Thx for helping out!

[tar-aldev]

WOrks for me during runtime but not during build time 🤔

[Jennifer-JY-Lee]

same here

[amocarski]

any updates on this? same here

[valajczech]

Well I face this issue if I import my DataTable component (which uses the global.d.ts file for the ColumnMeta definitions) outside of the folder that contains both (specifically internal ui library and next app inside a monorepo). Are you sure you are not facing the same issue? The workaround would be to create another globals.d.ts file in every subproject, but I dont like this solution.
I am thinking about somehow hijacking the ColumnDef.

[lovelyKarthi]

To add custom properties to the ColumnMeta interface in @tanstack/react-table, extend the module using TypeScript's declaration merging feature:

Component <DataGrid /> (common reusable component)
extend strictly:

declare module '@tanstack/react-table' {
  interface ColumnMeta<TData extends RowData, TValue> {
    align?: 'left' | 'right' | 'center';
    className?: string;
    showVisibilitySettings?: boolean;
    [key: string]: any; // Allows additional custom properties
  }
}

Usage in <YourList /> Component
In your <YourList /> component, you can now use these custom properties:

const columns: ColumnDef<DataRow>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    meta: {
      align: 'left',
      className: 'text-center',
      showVisibilitySettings: true,
      foo: "as you wish" // Users can add any custom properties they need in the meta field of the column definitions.
    },
  },
  // Define other columns
];