v8: How to derive the Cell props type?

[talatkuyuk]

I am using v8. I would like to get the type of the props of the cell.

const handleChange = async (
  event: React.ChangeEvent<HTMLInputElement>,
  props: // <---------------------------------------------------- what will be the type ??
): Promise<void> => {
  // do something with props
}

const table = createTable().setRowType<Authuser>();

const defaultColumns = [
    table.createDataColumn("isDisabled", {
      cell: (props) => (
          <input
            id={`checkbox-isdisabled-${props.row.values.id}`}
            name="checkbox-isdisabled"
            value={props.row.origin.id}
            checked={props.value}
            type="checkbox"
            onChange={async (event) => {handleChange(event, props)}}. // <--- here I would like to pass props to handleChange
          />
      ),
      header: () => <span>Disabled</span>,
      footer: (props) => props.column.id,
    }),
];

I read all discussions, and stackoverflow. I couldn't figure out.

[talatkuyuk]

Isn't there anybody who encounter the situation above?

[evbo]

yes, and going 1 step further, how can we add our own custom props? For example, if you needed to toggle where your input was disabled based on state external from the table, how could that be done?

[mcongrove]

yes, and going 1 step further, how can we add our own custom props?

Could you maybe follow the pattern used for extending ColumnMeta? https://tanstack.com/table/v8/docs/api/core/column-def#meta

[evbo]

I thought the answer might be cell context. Can you explain how do I update meta and how do those updates make their way to cell props?

[evbo]

@mcongrove I am right, the answer for this is adding additional custom props by merging them with the result of cell.getContext() that gets passed to flexRender

[Gusis93]

With the newest version I do this

export type TableCustomCell<TData = unknown, TValue = unknown> = CellContext<TData, TValue>;

Much simpler than before, I don't know if this is the proper way but its how it looks like internally and it allows me to get all the props from the cell.

[Gusis93]

I have the same question and was just about to open a question with how I made it work from reading the types:

const CustomCellComp = ({ getValue }: ReturnType<Cell<SomeType, unknown>['getContext']>)

const columns: ColumDef<SomeType>[] = [
   {
      accessorKey: 'some',
      cell: CustomCellComp
   }
]

Cell<SomeType, unknown> second argument has to be unknown else the table column definitions will complain telling me the types are incompatible. I don't know if this is the way to go but this is how I got it.

Hope someone can shine a light here