Custom column "collapse" property in typescript

[jzbuchalski]

Hey guys, second day working with react-table (v7). I would like to add a "collapse" property to my column definition, something like:

      {
        Header: 'Age',
        accessor: 'age',
        collapse: true,
      },

The example below works fine, but I cannot get the same working in typescript. Any suggestions for adding custom props in typescript? Probably missing something obvious, apologies in advance!

#2421

[GuptaSiddhant]

The custom properties needs to be explicitly added to react-table type definitions.

1. First, you need to have react-table-config.d.ts or react-table.d.ts file in your src folder. This contains all custom react-table type-defs. You already should have something similar if you're working with Typescript (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table).
2. Then add something like this to it. As you can see I've added 3 custom properties.

 export interface ColumnInterface<D extends object = {}>
    extends UseFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseSortByColumnOptions<D> {
    hidden?: boolean;
    className?: string;
    align?: "left" | "center" | "right";
  }

That should do it. Try and let me know if that works for you.

[jzbuchalski]

@GuptaSiddhant , thank you so much. Worked on the first go!

[yaroslavdraha]

To be able to access the custom props in JSX during table rendering, you should also add the custom props to ColumnInstance. Also, I've added declare module 'react-table' to make it workable, full example:

interface CustomColumn {
  sticky?: boolean;
}

declare module 'react-table' {
  export interface ColumnInterface<
    D extends Record<string, unknown> = Record<string, unknown>
  > extends UseFiltersColumnOptions<D>,
      UseGlobalFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D>,
      CustomColumn {}

  export interface ColumnInstance<
    D extends Record<string, unknown> = Record<string, unknown>
  > extends UseFiltersColumnProps<D>,
      UseGroupByColumnProps<D>,
      UseResizeColumnsColumnProps<D>,
      UseSortByColumnProps<D>,
      CustomColumn {}
}

You can read official docs here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table#configuration-using-declaration-merging

[Schmell]

i thought that v8 was written in typescript, why do i get
Could not find a declaration file for module '@tanstack/react-table'.

[KevinVandy]

What exact version do you have installed? There was a types bug in 8.0 but has been solved as of 8.1

[james-Infotrack]

Is there a way to do this in v8 without using the meta properties so consuming the table I get types?

I have this as my type, but it does not give my types via intellisense, when trying to add headerAlignment or cellAlignment

export type TableColumn<
 D extends object = {
   headerAlignment?: 'left' | 'right' | 'center';
   cellAligment?: 'left' | 'right' | 'center';
 }
> = ColumnDef<D>;

[neotrow]

better late than never:

But I think the meta prop would be the place to do this in v8:
https://tanstack.com/table/v8/docs/api/core/column-def#meta