T
TanStack•4y ago
rare-sapphire

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
rare-sapphire
rare-sapphireOP•4y ago
Err: Property 'chakra' does not exist on type 'ColumnMeta<T, unknown>'.
crude-lavender
crude-lavender•4y 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;
    }
}
deep-jade
deep-jade•2y ago
Thank you! How can I make ColumMeta mandatory?
rare-sapphire
rare-sapphire•2y ago
I don't think you can, since it's used in ColumnDef which has meta as optional.
deep-jade
deep-jade•2y 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?
rare-sapphire
rare-sapphire•2y ago
Well, that's the thing. ColumnDef is a type, not an interface. So we can't use interface merging to change it.
deep-jade
deep-jade•2y ago
Ah I see. Thank you!

Did you find this page helpful?