GridColumnProps

Props for the GridColumn component.

Properties

Property	Type	Description
field	keyof TRow & string	Field key in the row object
header?	string	Column header text (defaults to capitalized field)
type?	ColumnType	Column data type
editable?	boolean	Whether the column is editable
sortable?	boolean	Whether the column is sortable
resizable?	boolean	Whether the column is resizable
width?	string | number	Column width (e.g., “100px”, “10%“)
minWidth?	number	Minimum width for stretch mode
order?	number	Initial column display index
hidden?	boolean	Whether the column is hidden
lockVisible?	boolean	Prevent column from being hidden
options?	ColumnOptions	Select/typeahead options. Serialized onto the element’s options attribute, so values and labels must not contain , or : — pass richer option objects through gridConfig.columns[].options instead.
children?	(ctx: CellRenderContext<TRow, TValue>) => ReactNode	Custom cell renderer (render prop pattern). Receives cell context and returns React node.
editor?	(ctx: ColumnEditorContext<TRow, TValue>) => ReactNode	Custom cell editor. Receives editor context with commit/cancel functions.
headerRenderer?	(ctx: HeaderCellContext<TRow>) => ReactNode	Full header cell renderer. Consumer owns sort icons and filter buttons — use the renderSortIcon / renderFilterButton helpers on the context to opt in. Resize handles are appended automatically by the grid for resizable columns; do not render one yourself.
headerLabelRenderer?	(ctx: HeaderLabelContext<TRow>) => ReactNode	Header label renderer. The grid keeps ownership of sort icons, filter buttons, and resize handles; this only replaces the label text.

Property Details

children

<GridColumn field="status">
  {(ctx) => <StatusBadge status={ctx.value} />}
</GridColumn>

---

editor

<GridColumn
  field="name"
  editable
  editor={(ctx) => (
    <input
      defaultValue={ctx.value}
      onBlur={(e) => ctx.commit(e.target.value)}
      onKeyDown={(e) => e.key === 'Escape' && ctx.cancel()}
    />
  )}
/>

---