national-gold

TypeScript, how to extend ColumnMeta type?

Hi. I would like to add new properties to the type od ColumnMeta. Is it somehow possible to do so without TS error?

// Example of usage
columns: [
  {
    header: "ID",
    accessorKey: "id",
    meta: { chakra: { fontFamily: "mono" } },
  }
]

interface ExtendedColumnMeta<T> extends ColumnMeta<T, unknown> {
  style?: React.CSSProperties;
  truncate?: boolean;
  chakra?: TableCellProps;
}

// Example of usage
columns: [
  {
    header: "ID",
    accessorKey: "id",
    meta: { chakra: { fontFamily: "mono" } },
  }
]

interface ExtendedColumnMeta<T> extends ColumnMeta<T, unknown> {
  style?: React.CSSProperties;
  truncate?: boolean;
  chakra?: TableCellProps;
}

7 Replies

national-goldOP•3y ago

Err: Property 'chakra' does not exist on type 'ColumnMeta<T, unknown>'.

vicious-gold•3y ago

Hi, just create react-table.d.ts file and append your keys like this

import '@tanstack/react-table';

declare module '@tanstack/react-table' {
    interface ColumnMeta<TData, TValue> {
        yourKey: keyType;
    }
}

import '@tanstack/react-table';

declare module '@tanstack/react-table' {
    interface ColumnMeta<TData, TValue> {
        yourKey: keyType;
    }
}

stuck-chocolate•16mo ago

Thank you! How can I make ColumMeta mandatory?

stormy-gold•16mo ago

I don't think you can, since it's used in ColumnDef which has meta as optional.

stuck-chocolate•16mo ago

In typescript, declaring an interface extends existing ones with the same name. But which one should be extended to have the desired effect? Or is it not possible with interface extension to make optional properties mandatory?

stormy-gold•16mo ago

Well, that's the thing. ColumnDef is a type, not an interface. So we can't use interface merging to change it.

stuck-chocolate•16mo ago

Ah I see. Thank you!

Gaming

Programming

TypeScript, how to extend ColumnMeta type?

Did you find this page helpful?