Column Definition

The ColumnDefinition interface defines how each column behaves and appears.

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;
  cellRenderer?: string | ((params: CellRendererParams) => ReactNode);
  editRenderer?: string | ((params: EditRendererParams) => ReactNode);
  headerRenderer?: string | ((params: HeaderRendererParams) => ReactNode);
}

Required Properties

field

Type: string

The property name in the row data object.

// For data like { id: 1, firstName: "Giovanni" }
{ field: "firstName", cellDataType: "text", width: 150 }

cellDataType

Type: CellDataType

The data type of the cell. Used for formatting, sorting, and filtering.

Value	Description
`"text"`	String values
`"number"`	Numeric values
`"boolean"`	Boolean values
`"date"`	Date objects
`"dateString"`	ISO date strings
`"dateTime"`	DateTime objects
`"dateTimeString"`	ISO DateTime strings
`"object"`	Complex objects

width

Type: number

Column width in pixels.

{ field: "email", cellDataType: "text", width: 250 }

Optional Properties

colId

Type: string Default: Same as field

Unique identifier for the column. Useful when multiple columns use the same field.

{
  field: "price",
  colId: "originalPrice",
  cellDataType: "number",
  width: 100
}

headerName

Type: string Default: Same as field

Display name shown in the column header.

{
  field: "firstName",
  headerName: "First Name",
  cellDataType: "text",
  width: 150
}

editable

Type: boolean Default: false

Enable inline editing for this column.

{
  field: "email",
  cellDataType: "text",
  width: 250,
  editable: true
}

sortable

Type: boolean Default: true (when sortingEnabled is true on Grid)

Enable sorting for this column.

{
  field: "id",
  cellDataType: "number",
  width: 80,
  sortable: false  // Disable sorting for this column
}

filterable

Type: boolean Default: true

Enable filtering for this column.

{
  field: "status",
  cellDataType: "text",
  width: 100,
  filterable: false
}

hidden

Type: boolean Default: false

Whether the column is hidden. Hidden columns are not rendered but still exist in the definition.

{
  field: "internalId",
  cellDataType: "text",
  width: 100,
  hidden: true  // Column exists but isn't visible
}

resizable

Type: boolean Default: true

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

{
  field: "id",
  cellDataType: "number",
  width: 80,
  resizable: false  // Fixed width
}

minWidth

Type: number Default: 50

Minimum width in pixels when resizing.

maxWidth

Type: number Default: undefined (no limit)

Maximum width in pixels when resizing.

{
  field: "name",
  cellDataType: "text",
  width: 150,
  minWidth: 80,
  maxWidth: 400
}

movable

Type: boolean Default: true

Whether the column can be moved/reordered by dragging its header.

{
  field: "id",
  cellDataType: "number",
  width: 80,
  movable: false  // Cannot be reordered
}

rowDrag

Type: boolean Default: false

Whether this column acts as a drag handle for row dragging. When set to true, clicking and dragging cells in this column initiates a row drag.

{
  field: "handle",
  cellDataType: "text",
  width: 40,
  rowDrag: true,
  sortable: false
}

cellRenderer

Type: string | ((params: CellRendererParams) => ReactNode)

Custom cell renderer. Pass a function directly or a string key to look up from the cellRenderers registry.

// Inline function — simplest approach
{
  field: "status",
  cellDataType: "text",
  width: 100,
  cellRenderer: (params) => (
    <div className="flex items-center h-full px-2">
      <span className={params.value === "Active" ? "text-green-500" : "text-red-500"}>
        {params.value as string}
      </span>
    </div>
  )
}

// String key — reference from cellRenderers registry
{ field: "status", cellDataType: "text", width: 100, cellRenderer: "status" }

editRenderer

Type: string | ((params: EditRendererParams) => ReactNode)

Custom edit renderer. Pass a function directly or a string key to look up from the editRenderers registry.

headerRenderer

Type: string | ((params: HeaderRendererParams) => ReactNode)

Custom header renderer. Pass a function directly or a string key to look up from the headerRenderers registry.

Example

const columns: ColumnDefinition[] = [
  {
    field: "id",
    cellDataType: "number",
    width: 80,
    headerName: "ID",
    sortable: true,
    filterable: false,
    editable: false,
  },
  {
    field: "name",
    cellDataType: "text",
    width: 200,
    headerName: "Full Name",
    editable: true,
  },
  {
    field: "salary",
    cellDataType: "number",
    width: 120,
    headerName: "Salary",
    editable: true,
    cellRenderer: "currency",
  },
  {
    field: "status",
    cellDataType: "text",
    width: 100,
    headerName: "Status",
    cellRenderer: "status",
    editRenderer: "statusDropdown",
  },
];

Column Definition

On this page