Column Definition

The ColumnDefinition interface is shared with the React package.

interface ColumnDefinition {
  field: string;
  colId?: string;
  cellDataType: CellDataType;
  width: number;
  headerName?: string;
  editable?: boolean;
  sortable?: boolean;
  filterable?: boolean;
  hidden?: boolean;
  resizable?: boolean;
  minWidth?: number;
  maxWidth?: number;
  movable?: boolean;
  rowDrag?: boolean;
  /** Wrap long text onto new lines instead of truncating with an ellipsis. */
  wrapText?: boolean;
  cellRenderer?: string | ((params: CellRendererParams) => unknown);
  editRenderer?: string | ((params: EditRendererParams) => unknown);
  headerRenderer?: string | ((params: HeaderRendererParams) => unknown);
  valueFormatter?: (value: CellValue) => string;
  distinctValues?: CellValue[];
  computeColumnClasses?: (context: HighlightContext) => string[];
  computeCellClasses?: (context: HighlightContext) => string[];
}

Required Properties

field

Type: string

Property name in row data.

cellDataType

Type: CellDataType

width

Type: number

Column width in pixels.

Optional Properties

colId

Type: string Default: Same as field

headerName

Type: string Default: Same as field

editable

Type: boolean Default: false

sortable

Type: boolean Default: true

filterable

Type: boolean Default: true

hidden

Type: boolean Default: false

Whether the column is hidden.

resizable

Type: boolean Default: true

Whether the column can be resized by dragging the header edge.

minWidth / maxWidth

Type: number Default: 50 / undefined

Minimum and maximum width constraints when resizing.

movable

Type: boolean Default: true

Whether the column can be reordered by dragging its header.

rowDrag

Type: boolean Default: false

Whether this column acts as a drag handle for row dragging.

wrapText

Type: boolean Default: false

Whether long cell text wraps onto new lines instead of being truncated with an ellipsis. Wrapped text is clipped to the fixed row height (rows do not auto-grow). Only affects the default text renderer, not custom cellRenderer output.

{
  field: "bio",
  cellDataType: "text",
  width: 300,
  wrapText: true,
}

cellRenderer / editRenderer / headerRenderer

Type: string | ((params) => unknown)

Pass a render function directly or a string key to look up in the renderer registry.

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  {
    field: "status",
    cellDataType: "text",
    width: 100,
    // Inline function — no registry needed
    cellRenderer: (params) => {
      const status = params.value as string;
      return status === "Active" ? `✓ ${status}` : status;
    },
  },
  {
    field: "priority",
    cellDataType: "text",
    width: 100,
    cellRenderer: "priority",  // String key — looks up from registry
  },
];
</script>

valueFormatter

Type: (value: CellValue) => string

Converts a raw cell value into the string the grid treats as the cell's display value. The formatter runs before the default cell renderer paints the cell, so the output is what the user sees on screen.

Beyond display, each feature uses the formatter in a specific way:

• Values (checkbox) filter mode — the popup groups its checkbox entries by formatted label; ticking a label selects every raw value that renders as that label. The filter model itself — and any request sent to a server data source — always carries the raw values, never the labels.
• Free-text filter conditions (contains, equals, ...) — compared against the formatted string, so users can type exactly what they see in the cell.
• Copy to clipboard — copies the formatted string.
• Sorting — compares raw values; the formatter is not involved.

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  {
    field: "salary",
    cellDataType: "number",
    width: 140,
    headerName: "Salary",
    valueFormatter: (value) => `$${(value as number).toLocaleString()}`, 
  },
];
</script>

Pairing with cellRenderer

A cellRenderer only changes how a cell is painted; it does not change the value used by filters or sort. Pair custom renderers with a matching valueFormatter so both stay in sync:

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  {
    field: "salary",
    cellDataType: "number",
    width: 140,
    cellRenderer: SalaryRenderer,
    valueFormatter: (value) => `$${(value as number).toLocaleString()}`, 
  },
];
</script>

Without the formatter, a user typing "$82,000" into a free-text condition would match nothing because the comparison would run against the raw 82000.

Formatters that collapse values

Several raw values may format to the same label (e.g. dates formatted to their month). The values filter shows one checkbox per label, and ticking it selects all raw values behind it — but only the raw values the grid has discovered. On high-cardinality columns, pre-supply the full raw domain via distinctValues so no raw value is missed:

{
  field: "priority",
  cellDataType: "number",
  width: 120,
  valueFormatter: (value) => (value as number) > 1 ? "High" : "Low",
  distinctValues: [0, 1, 2, 3], // full raw domain, raw values only
}

The grid warns in the console when its distinct-value scan is cut short for a formatted column.

Common use cases

Formatting "object"-type columns where the default JSON.stringify is unhelpful:

{
  field: "address",
  cellDataType: "object",
  width: 250,
  valueFormatter: (value) => {
    const addr = value as { city: string; country: string };
    return `${addr.city}, ${addr.country}`;
  },
}

Date display with a library-free format:

{
  field: "createdAt",
  cellDataType: "dateString",
  width: 140,
  valueFormatter: (value) => new Date(value as string).toLocaleDateString(),
}

Null-safe formatting:

valueFormatter: (value) => value == null ? "—" : String(value),

computeColumnClasses

Type: (context: HighlightContext) => string[]

Per-column override for column-level highlighting. Overrides the grid-level computeColumnClasses for this column. The context has colIndex set and rowIndex is null.

{
  field: "status",
  cellDataType: "text",
  width: 120,
  computeColumnClasses: (context) =>
    context.colIndex === 0 ? ["first-column"] : [],
}

computeCellClasses

Type: (context: HighlightContext) => string[]

Per-column override for cell-level highlighting. Overrides the grid-level computeCellClasses for cells in this column. The context has both rowIndex and colIndex set.

{
  field: "score",
  cellDataType: "number",
  width: 100,
  computeCellClasses: (context) => {
    const value = context.rowData?.score as number;
    if (value != null && value < 60) return ["bg-red-50"];
    if (value != null && value >= 90) return ["bg-green-50"];
    return [];
  },
}

For full context shape, see the Styling guide.

Example

<script setup lang="ts">
const columns: ColumnDefinition[] = [
  {
    field: "id",
    cellDataType: "number",
    width: 80,
    headerName: "ID",
    sortable: true,
    filterable: false,
  },
  {
    field: "name",
    cellDataType: "text",
    width: 200,
    headerName: "Full Name",
    editable: true,
  },
  {
    field: "status",
    cellDataType: "text",
    width: 100,
    cellRenderer: "status",
    editRenderer: "statusDropdown",
  },
];
</script>