Column Types

type GridColumnTypes<TData> = Record<
  string,
  Partial<GridColumnDef<TData, any>>
>;

const columnTypes: GridColumnTypes<Order> = {
  currency: {
    size: 120,
    meta: {
      cellAlign: 'right',
      valueFormatter: (value) => `$${value.toFixed(2)}`,
    },
  },
};

// Use in column definition
{
  accessorKey: 'price',
  header: 'Price',
  type: 'currency',
}

const columnTypes: GridColumnTypes<User> = {
  email: {
    size: 250,
    meta: {
      filterType: 'text',
      truncate: true,
    },
  },
};

const columnTypes: GridColumnTypes<Order> = {
  currency: {
    size: 120,
    meta: {
      headerAlign: 'right',
      cellAlign: 'right',
      cellClassName: 'font-mono',
      filterType: 'number',
      aggregationFn: 'sum',
      valueFormatter: (value) =>
        new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
        }).format(value as number),
    },
  },
};

const columnTypes: GridColumnTypes<Data> = {
  percentage: {
    size: 100,
    meta: {
      headerAlign: 'right',
      cellAlign: 'right',
      filterType: 'number',
      aggregationFn: 'avg',
      valueFormatter: (value) => `${value}%`,
      cellClassRules: {
        'text-green-600': (value) => value > 75,
        'text-yellow-600': (value) => value >= 50 && value <= 75,
        'text-red-600': (value) => value < 50,
      },
    },
  },
};

const columnTypes: GridColumnTypes<Event> = {
  date: {
    size: 140,
    meta: {
      filterType: 'date',
      valueFormatter: (value) =>
        new Date(value as string).toLocaleDateString('en-US'),
    },
  },
};

const columnTypes: GridColumnTypes<Task> = {
  badge: {
    size: 120,
    meta: {
      headerAlign: 'center',
      cellAlign: 'center',
      filterType: 'select',
    },
    cell: ({ getValue }) => {
      const value = getValue() as string;
      return <Badge>{value}</Badge>;
    },
  },
};

const columnTypes: GridColumnTypes<User> = {
  boolean: {
    size: 100,
    meta: {
      headerAlign: 'center',
      cellAlign: 'center',
      filterType: 'boolean',
    },
    cell: ({ getValue }) => {
      const value = getValue() as boolean;
      return value ? '✓' : '✗';
    },
  },
};

{
  accessorKey: 'price',
  header: 'Price',
  type: 'currency',
}

const columnTypes = {
  currency: { size: 120 },
  editable: { meta: { editable: true } },
};

// Merges both types
{
  accessorKey: 'price',
  header: 'Price',
  type: ['currency', 'editable'],
}

{
  accessorKey: 'discount',
  header: 'Discount',
  type: 'percentage',
  size: 150, // Overrides type's size
}

const columnTypes: GridColumnTypes<Order> = {
  currency: {
    size: 120,
    meta: {
      headerAlign: 'right',
      cellAlign: 'right',
      cellClassName: 'font-mono',
      filterType: 'number',
      aggregationFn: 'sum',
      valueFormatter: (value) =>
        new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
        }).format(value as number),
    },
  },
  
  percentage: {
    size: 100,
    meta: {
      headerAlign: 'right',
      cellAlign: 'right',
      filterType: 'number',
      aggregationFn: 'avg',
      valueFormatter: (value) => `${value}%`,
    },
  },
  
  date: {
    size: 140,
    meta: {
      filterType: 'date',
      valueFormatter: (value) =>
        new Date(value as string).toLocaleDateString('en-US'),
    },
  },
  
  status: {
    size: 120,
    meta: {
      headerAlign: 'center',
      cellAlign: 'center',
      filterType: 'select',
    },
    cell: ({ getValue }) => {
      const status = getValue() as string;
      return <Badge variant={status}>{status}</Badge>;
    },
  },
  
  actions: {
    size: 100,
    enableSorting: false,
    enableHiding: false,
    enableResizing: false,
    meta: {
      headerAlign: 'center',
      cellAlign: 'center',
    },
  },
  
  editable: {
    meta: {
      editable: true,
      editType: 'text',
    },
  },
  
  numeric: {
    meta: {
      headerAlign: 'right',
      cellAlign: 'right',
      cellClassName: 'font-mono',
      filterType: 'number',
      enableFilterOperators: true,
    },
  },
};

<ActiveGrid columnTypes={columnTypes} columns={columns} {...} />

const columns: GridColumnDef<Order>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    size: 80,
    enableSorting: false,
  },
  {
    accessorKey: 'customer',
    header: 'Customer',
    type: 'editable',
  },
  {
    accessorKey: 'total',
    header: 'Total',
    type: 'currency',
  },
  {
    accessorKey: 'discount',
    header: 'Discount',
    type: 'percentage',
  },
  {
    accessorKey: 'date',
    header: 'Order Date',
    type: 'date',
  },
  {
    accessorKey: 'status',
    header: 'Status',
    type: 'status',
  },
  {
    id: 'actions',
    header: 'Actions',
    type: 'actions',
    cell: ({ row }) => <ActionsMenu row={row} />,
  },
];