TanStackT
TanStack•17mo ago
sad-indigo

generic column cell helper function

is it possible to have a type-safe cell helper function like this? so that it does getValue() for me and I can access it more easily

function cell<TData, TValue>(
  f: (value: TValue, orig: TData, props: CellContext<TData, TValue>) => any
) {
  return function (props: CellContext<TData, TValue>) {
    const value = props.getValue();
    const orig = props.row.original;
    return f(value, orig, props);
  };
}


to be used like 
const columnHelper = createColumnHelper<{
  id: number;
  email: string;
  role: string;
}>();

const columns = [
  columnHelper.accessor("id", {
    id: "id",
    cell: cell((v) => <span>{v}</span>),
    header: () => <span>Name</span>,
  }),
  columnHelper.accessor("email", {
    id: "name",
    cell: cell((v) => <span>{v}</span>),
    header: () => <span>Name</span>,
  }),
];


however the value is always typed as unknown if I define the function inline inside the cell call

if it's done outside type safety works
const cellFn = (v: string) => <span>{v}</span>;

const columns = [
  columnHelper.accessor("id", {
    cell: cell(cellFn), // error here
  }),
  columnHelper.accessor("email", {
    cell: cell(cellFn),
  }),
];


repro: https://codesandbox.io/p/sandbox/dawn-hill-32md5c?workspaceId=8256b876-f76f-4896-af72-5e665345a9a5
Was this page helpful?