How to set a custom property to table state?

[c-semaan]

I am trying to set a groupId property to my table to I can later reference it from my column. This is what I am trying to do achieve:

useEffect(() => {
  if (stateUpdater) {
    table.setState((prevState) => {
      return {...prevState, groupId: 0}
    });
  }
}, [stateUpdater]);

After setting the property, I can reference in my column by getting the table state

  {
    accessorKey: "actions",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Actions" />
    ),
    enableSorting: false,
    cell: ({ row, column, table }) => {
     // get groupId 
table.getState().groupId
    },
  },

Unfortunately, when I use the setState method, my groupId property is not being added. I suppose we can't add custom properties to the state? If so what can we set a custom property to the table so it can be easily accessed by the columns?

[c-semaan]

After testing again, I can confirm the code is working and was able to get the groupId value from my column.

[MichaelCharles]

This works, but when working with TypeScript the problem is your new property isn't on the TableState type, and so when you do table.getState() TypeScript doesn't know that your new property exists.

[c-semaan]

yes I know but this is the only solution I found, I couldn't find any typescript generics for this to extent the table state type

[MichaelCharles]

Oh hey! Thanks for posting this and reminding me--I solved this problem.

Create a table.d.ts like the one below in your project and you can extend the interface used for the TableState typing. This will globally fix the typing for your table state:

import "@tanstack/table-core";

declare module "@tanstack/table-core" {
  interface TableState {
    groupId?: number;
  }
}

[c-semaan]

thanks for the solution however it doesn't fit my needs since I have several data tables with different state types

[yun-jay]

For me, the following worked 🙃

import "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface TableState {
    groupId?: number;
  }
}