# GridColumn

Column configuration component for use with DataGrid.

Renders a `<tbw-grid-column>` custom element in the light DOM
and registers React renderers/editors with the adapter.

## Basic Usage

```tsx
<DataGrid rows={rows}>
  <GridColumn field="name" header="Full Name" />
  <GridColumn field="age" type="number" sortable />
</DataGrid>
```

## Custom Renderer

```tsx
<GridColumn field="status">
  {(ctx) => (
    <span className={`status-${ctx.value}`}>
      {ctx.value}
    </span>
  )}
</GridColumn>
```

## Custom Editor

```tsx
<GridColumn
  field="price"
  editable
  editor={(ctx) => (
    <input
      type="number"
      defaultValue={ctx.value}
      onBlur={(e) => ctx.commit(Number(e.target.value))}
      onKeyDown={(e) => {
        if (e.key === 'Enter') ctx.commit(Number(e.currentTarget.value));
        if (e.key === 'Escape') ctx.cancel();
      }}
    />
  )}
/>
```

```ts
GridColumn(props: GridColumnProps<TRow, TValue>): ReactElement
```

## Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `props` | <code><a href="/grid/react/api/types/gridcolumnprops/">GridColumnProps</a>&lt;TRow, TValue&gt;</code> |  |