# GridColumnProps

Props for the GridColumn component.

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `field` | <code>keyof TRow &amp; string</code> | Field key in the row object |
| `header?` | <code>string</code> | Column header text (defaults to capitalized field) |
| `type?` | <code>string &#124; number &#124; boolean &#124; select &#124; date &#124; typeahead</code> | Column data type |
| `editable?` | <code>boolean</code> | Whether the column is editable |
| `sortable?` | <code>boolean</code> | Whether the column is sortable |
| `resizable?` | <code>boolean</code> | Whether the column is resizable |
| `width?` | <code>string &#124; number</code> | Column width (e.g., "100px", "10%") |
| `minWidth?` | <code>number</code> | Minimum width for stretch mode |
| `order?` | <code>number</code> | Initial column display index |
| `hidden?` | <code>boolean</code> | Whether the column is hidden |
| `lockVisible?` | <code>boolean</code> | Prevent column from being hidden |
| `children?` | <code>(ctx: <a href="/grid/api/core/interfaces/cellrendercontext/">CellRenderContext</a>&lt;TRow, TValue&gt;) =&gt; ReactNode</code> | Custom cell renderer (render prop pattern). Receives cell context and returns React node. |
| `editor?` | <code>(ctx: <a href="/grid/api/core/interfaces/columneditorcontext/">ColumnEditorContext</a>&lt;TRow, TValue&gt;) =&gt; ReactNode</code> | Custom cell editor. Receives editor context with commit/cancel functions. |
| `options?` | <code>object[]</code> | Select/typeahead options |
| `multi?` | <code>boolean</code> | Allow multiple selection (for select/typeahead) |
| `format?` | <code>(value: TValue, row: TRow) =&gt; string</code> | Custom formatter function |

### Property Details

#### children

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

---

#### editor

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

---