Column Meta

meta: {
  headerClassName: 'font-bold text-blue-600',
}

meta: {
  headerClass: (ctx) => {
    return ctx.column.getIsSorted() ? 'bg-blue-100' : '';
  },
}

meta: {
  cellClassName: 'font-mono text-sm',
}

meta: {
  cellClassRules: {
    'text-green-600': (value) => value > 0,
    'text-red-600': (value) => value < 0,
    'font-bold': (value, row) => row.isImportant,
  },
}

meta: {
  cellStyle: (value, row) => ({
    backgroundColor: row.highlighted ? '#fef3c7' : undefined,
    fontWeight: value > 1000 ? 'bold' : 'normal',
  }),
}

meta: {
  truncate: false, // Allow text to wrap
}

meta: {
  flex: 0,
}

// Column grows to fill available space
meta: {
  flex: 1,
}

// Column grows twice as much as others
meta: {
  flex: 2,
}

meta: {
  autoHeight: true,
  wrapText: true,
}

meta: {
  wrapText: true,
}

meta: {
  flex: 1,
  locked: true, // Ignore flex, keep fixed size
}

meta: {
  suppressSizeToFit: true,
}

meta: {
  filterType: 'number',
}

meta: {
  filterType: 'select',
  filterOptions: [
    { label: 'Active', value: 'active' },
    { label: 'Inactive', value: 'inactive' },
    { label: 'Pending', value: 'pending' },
  ],
}

meta: {
  filterType: 'select',
  filterOptions: [...],
  filterSearchable: true,
}

meta: {
  filterType: 'select',
  filterOptions: [...],
  filterShowSelectAll: true,
}

meta: {
  filterType: 'number',
  enableFilterOperators: true,
}

meta: {
  filterType: 'number',
  enableFilterOperators: true,
  defaultFilterOperator: 'greaterThan',
}

meta: {
  filterType: 'number',
  enableFilterOperators: true,
  allowedOperators: ['equals', 'greaterThan', 'lessThan'],
}

meta: {
  filterType: 'number',
  enableFilterOperators: true,
  operatorPreset: 'comparison', // equals, notEquals, greaterThan, lessThan
}

meta: {
  filterType: 'boolean',
  booleanFilterLabels: {
    all: 'All Status',
    true: 'Active',
    false: 'Inactive',
  },
}

meta: {
  filterType: 'boolean',
  booleanFilterVariant: 'icon',
}

meta: {
  aggregationFn: 'sum',
}

meta: {
  aggregationFn: 'sum',
  aggregationLabel: 'Total',
}

// Always editable
meta: {
  editable: true,
}

// Conditionally editable
meta: {
  editable: (row) => row.status !== 'locked',
}

meta: {
  editable: true,
  editType: 'number',
}

meta: {
  editable: true,
  editType: 'select',
  editOptions: [
    { label: 'Small', value: 'sm' },
    { label: 'Medium', value: 'md' },
    { label: 'Large', value: 'lg' },
  ],
}

meta: {
  editable: true,
  validate: (value) => {
    if (!value) return 'Required field';
    if (value < 0) return 'Must be positive';
    return undefined;
  },
}

// Async validation
meta: {
  editable: true,
  validate: async (value, row) => {
    const exists = await checkUnique(value);
    return exists ? 'Value already exists' : undefined;
  },
}

meta: {
  tooltipField: 'description',
}

meta: {
  tooltipValueGetter: (value, row) => {
    return `${row.name}: ${value} (${row.status})`;
  },
}

meta: {
  enableResizing: false,
}

meta: {
  enablePinning: false,
}

meta: {
  headerMenu: {
    enabled: true,
    features: { sort: true, filter: false },
  },
}

{
  accessorKey: 'price',
  header: 'Price',
  size: 120,
  meta: {
    headerAlign: 'right',
    cellAlign: 'right',
    cellClassName: 'font-mono',
    valueFormatter: (value) => `$${value.toFixed(2)}`,
    filterType: 'number',
    enableFilterOperators: true,
    operatorPreset: 'comparison',
    aggregationFn: 'sum',
    aggregationLabel: 'Total',
  },
}

{
  accessorKey: 'status',
  header: 'Status',
  size: 120,
  meta: {
    cellClassRules: {
      'text-green-600 font-semibold': (value) => value === 'active',
      'text-yellow-600': (value) => value === 'pending',
      'text-red-600': (value) => value === 'inactive',
    },
    filterType: 'select',
    filterOptions: [
      { label: 'Active', value: 'active' },
      { label: 'Pending', value: 'pending' },
      { label: 'Inactive', value: 'inactive' },
    ],
  },
}

{
  accessorKey: 'description',
  header: 'Description',
  meta: {
    flex: 1,
    wrapText: true,
    autoHeight: true,
    truncate: false,
  },
}

{
  accessorKey: 'quantity',
  header: 'Quantity',
  size: 100,
  meta: {
    cellAlign: 'right',
    editable: true,
    editType: 'number',
    validate: (value) => {
      if (value === undefined || value === null) {
        return 'Quantity is required';
      }
      if (value < 0) {
        return 'Must be positive';
      }
      if (value > 1000) {
        return 'Maximum is 1000';
      }
      return undefined;
    },
  },
}