Extended metadata properties for columns.
Column metadata provides extended configuration for display formatting, styling, filtering, editing, and layout behavior. All metadata properties are defined in the meta property of a column definition.
{
accessorKey: 'amount',
header: 'Amount',
meta: {
cellAlign: 'right',
valueFormatter: (value) => `$${value.toFixed(2)}`,
},
}stringmeta: {
label: 'Product Name',
}(value: TValue, data: TData) => ReactNodemeta: {
valueFormatter: (value) => `$${value.toFixed(2)}`,
}
// With access to full row data
meta: {
valueFormatter: (value, row) => {
return `${value} ${row.currency}`;
},
}'left' | 'center' | 'right''left'meta: {
headerAlign: 'center',
}'left' | 'center' | 'right''left'meta: {
cellAlign: 'right',
}string(ctx: HeaderContext) => stringstringRecord<string, (value: TValue, row: TData) => boolean>(value: TValue, row: TData) => CSSProperties | undefinedbooleantruenumberbooleanbooleanbooleanboolean'text' | 'number' | 'date' | 'select' | 'boolean'Array<{label: string; value: string}>booleanfalsebooleanfalsebooleanfalseFilterOperatorFilterOperator[]New in v5.1
'identity' | 'searchOnly' | 'rangeOnly' | 'comparison' | 'noEmpty' | string{ all?: string; true?: string; false?: string }'text' | 'icon''text'New in v5.1
'sum' | 'avg' | 'min' | 'max' | 'count'stringboolean | ((row: TData) => boolean)'text' | 'number' | 'date' | 'select' | 'boolean'Array<{label: string; value: string}>(value: any, row: TData) => string | undefined | Promise<string | undefined>keyof TData(value: TValue, row: TData) => stringbooleanbooleanDataTableHeaderMenuConfigmeta: {
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
}// Fixed width column
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;
},
},
}