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

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

Custom Renderer

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

Custom Editor

<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();
      }}
    />
  )}
/>

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

Parameters

Name	Type	Description
props	GridColumnProps<TRow, TValue>