Color columns.

HEX value with swatch, picker and multi-value filter.

RAW DATA · HEX string

01Render

HEX value with swatch, picker and multi-value filter.

02Filter

Click Filter and configure this column.

03Edit

Double-click a value to change it.

INTERACTIVE EXAMPLE

Try color in context

Pick another color in the editor.

Preparing interactive table…

QUICK START

const columns: GridColumn<Row>[] = [
  {
    key: 'color',
    title: 'Color',
    kind: 'color',
    editable: true,
    options: ["#9B8AFB","#64C9A9","#F3B970","#F18A9E","#8FB8F9"],
  },
]

ABOUT THE DATA

Raw values stay raw.

The renderer changes how a cell looks. Sorting, filtering, editing and CSV export work with the underlying value, so integrations can use stable types.

Explore feature labs