Sharing column definitions

[denchen]

My app has a bunch of tables that have similar columns, and I'm trying to ensure those columns look / behave identically across all tables. These definitions are bit involved, with custom headers and value displays, and it's very easy for me to make a change to that column definition in one table but forget to update other tables to match. So I want to extract that column definition to be reusable by multiple tables.

I'm stuck on making that definition type-safe. For instance, if I have a column called resourceId that's typed as string | undefined, then I could have something like:

const columnResourceId: ColumnDef<{ resourceId: string | undefined }> = {
  accessorKey: 'resourceId',
  cell: info => <div>{info.row.original.resourceId}</div>,
  header: 'RESOURCE ID'
};

And then insert it into my table definition as such: (MyTableData includes a resourceId key):

const columns: Array<ColumnDef<MyTableData>> = [{
  accessorKey: 'name',
  cell: info => <div>{info.row.original.name}</div>
}, {
   ...columnResourceId
}]

This works just fine, but Typescript complains with an error similar to:

Property 'accessorFn' is missing in type '{ getUniqueValues?: AccessorFn<{ resourceId: string | undefined; }, unknown[]> | undefined; footer?: ColumnDefTemplate<HeaderContext<{ resourceId: string | undefined; }, unknown>> | undefined; cell?: ColumnDefTemplate<CellContext<{ resourceId: string | undefined; }, unknown>> | undefined; meta?: ColumnMeta<{ resourceId: string | undefined; }, unknown> | undefined; enableHiding?: boolean; enablePinning?: boolean; enableColumnFilter?: boolean; filterFn?: FilterFnOption<{ resourceId: string | undefined; }> | undefined; enableGlobalFilter?: boolean; enableMultiSort?: boolean; enableSorting?: boolean; invertSorting?: boolean; sortDescFirst?: boolean; sortingFn?: SortingFnOption<{ resourceId: string | undefined; }> | undefined; sortUndefined?: false | -1 | 1 | "first" | "last"; aggregatedCell?: ColumnDefTemplate<CellContext<{ resourceId: string | undefined; }, unknown>> | undefined; aggregationFn?: AggregationFnOption<{ resourceId: string | undefined; }> | undefined; enableGrouping?: boolean; getGroupingValue?: ((row: { resourceId: string | undefined; }) => any) | undefined; enableResizing?: boolean; maxSize?: number; minSize?: number; size?: number; header: string; id?: string; }' but required in type 'AccessorFnColumnDefBase<MyTableData, unknown>'.

So is there a proper way of typing sharable column definitions, or is this something that's not supported and my code above may break in some situations?

[BATCOH]

You can use creator function with type parameter:

import { type ColumnDef } from "@tanstack/react-table";

interface MyTableData {
  name: string;
  resourceId: string | undefined;
}

function createResourceIdColumn<
  TData extends { resourceId: string | undefined },
>(): ColumnDef<TData> {
  const columnResourceId: ColumnDef<TData> = {
    accessorKey: "resourceId",
    cell: (info) => <div>{info.row.original.resourceId}</div>,
    header: "RESOURCE ID",
  };
  return columnResourceId;
}

const columns: Array<ColumnDef<MyTableData>> = [
  {
    accessorKey: "name",
    cell: (info) => <div>{info.row.original.name}</div>,
  },
  // No error here:
  createResourceIdColumn(),
];