[V8] How to add types for a Cell function

[navigator-dev]

Hello! I've been using the previous version of react-table for quite some time and decided to start exploring v8 and everything is going pretty well so far.

However I keep running into something that I'm not sure was a design decision or if it was just overlooked.

If I have a column like this

columnHelper.accessor((row) => row.year || "", {
    id: "year",
    cell: (info) => <InlineEditInput info={info} type="number" />,
}),

How would I add add prop types to the InlineEditInput component for the info prop?

I see that the type should be CellContext<A, B> but CellContext is not exported anywhere for me to use. However, HeaderContext is exported which makes me think that CellContext was just forgotten.

[iamgrawal]

I am also stuck in this. While checking the code, I see it's mentioned but seems like it hasn't been exported in the package. @tannerlinsley is there anything that we can do for this?

[evbo]

@iamgrawal is right, and as pointed out, there is a getContext() function for the cell. Here are the 3 steps to this process:

1. In your column def, assume your cell function receives a props with arguments that include whatever you want to pass to it
2. When you call flexRender, the 2nd argument needs to merged with those additional props, e.g. using object.assign, etc.
3. Figure out the proper types to use if you're using typescript, which I am not so sorry for not explaining that part :)

This is confirmed via the docs as well, @tannerlinsley do I have this right?
https://github.com/TanStack/table/blob/c0e52df2edd98c16520a73c0d004e3f120037834/docs/api/core/cell.md#getcontext

Note: Although ColumnDef.meta exists for storing data, it is not updated with each render, hence why a separate mechanism for passing props is necessary. It would be great if there were a way to define custom props in the actual ColumnDef, such that everything column related is co-located.

[navigator-dev]

It looks like this has been resolved, although I'm not sure in which version it was changed. CellContext is now able to be imported: import { CellContext, createColumnHelper } from "@tanstack/react-table";

[ben-xD]

Cool, so this is roughly what mine looks like:

import {
  ColumnDef,
  CellContext,
  createColumnHelper,
  getCoreRowModel,
  RowData,
  useReactTable,
} from "@tanstack/react-table";

const Cell = ({
  getValue,
  table,
  row: { index },
  column: { id },
}: CellContext<MyTData, number>) => {

  // your code

  return (
 <>your component</>
  );
};

const defaultColumn: Partial<ColumnDef<MyTData, number>> = {
  cell: Cell,
};

[kevinashworth]

Thanks! I've been needing this. Dealing with a bug that got past TypeScript because info wasn't typed. I struggled to find an answer in the docs on or Discord, so I'm glad to find this discussion, two years later.