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(),
];

[amasen02]

The key to making reusable column definitions in TanStack Table without losing TypeScript inference is to use a generic factory function constrained by an interface (structural typing).

Here is the production pattern that allows any table model containing resourceId to consume the column definition with full type safety:

---

1. Generic Column Factory with Structural Constraint

Define an interface describing only the property that this column needs, and constrain the generic TData:

import type { ColumnDef, Row } from '@tanstack/react-table';

// Minimal interface required by this reusable column
export interface HasResourceId {
  resourceId?: string | null;
}

export function createResourceIdColumn<TData extends HasResourceId>(
  overrides?: Partial<ColumnDef<TData, string | null | undefined>>
): ColumnDef<TData, string | null | undefined> {
  return {
    id: 'resourceId',
    accessorKey: 'resourceId',
    header: 'Resource ID',
    cell: ({ getValue }) => {
      const val = getValue();
      return val ? (
        <code className="font-mono text-xs">{val}</code>
      ) : (
        <span className="text-gray-400">—</span>
      );
    },
    enableSorting: true,
    ...overrides,
  };
}

---

2. Consuming Across Different Tables

Each table defines its own row type, and TypeScript guarantees compile-time verification:

// Table A: Users
interface UserRow {
  id: string;
  name: string;
  resourceId?: string; // Satisfies HasResourceId
}

const userColumns: ColumnDef<UserRow>[] = [
  { accessorKey: 'name', header: 'User' },
  // Fully type-checked:
  createResourceIdColumn<UserRow>(),
];

// Table B: Orders
interface OrderRow {
  orderNumber: string;
  total: number;
  resourceId: string; // Also satisfies HasResourceId
}

const orderColumns: ColumnDef<OrderRow>[] = [
  { accessorKey: 'orderNumber', header: 'Order #' },
  // Can pass column overrides if this table needs a custom header or width:
  createResourceIdColumn<OrderRow>({
    header: 'Origin Resource',
    size: 150,
  }),
];

// ❌ TypeScript Error: Missing 'resourceId'
interface ProductRow {
  title: string;
}
// Type 'ProductRow' does not satisfy the constraint 'HasResourceId'.
createResourceIdColumn<ProductRow>(); 

---

3. Alternative: Path-Agnostic Accessor Factory

If different tables store the resource ID under different property names or nested objects (e.g. item.resourceId in one table vs item.meta.resId in another), accept a key or accessor function:

export function createSharedIdColumn<TData>(
  accessor: keyof TData | ((row: TData) => string | undefined),
  headerTitle: string = 'Resource ID'
): ColumnDef<TData, any> {
  return {
    header: headerTitle,
    accessorFn: typeof accessor === 'function' ? accessor : (row) => row[accessor],
    cell: ({ getValue }) => {
      const val = getValue();
      return val ? <code className="font-mono">{val}</code> : <span>—</span>;
    },
  };
}

Why this works best:

1. Zero Duplication: Shared layout, styling, copy-to-clipboard, or tooltip behaviors are defined in one place.
2. Type Safety: Any changes to the shared column signature will surface type errors immediately in any table where the contract is violated.
3. Flexibility: The overrides argument allows individual tables to adjust header titles, widths, or sorting rules while preserving shared cell rendering.