Status columns.

Semantic colors backed by stable status codes.

RAW DATA · string

01Render

Semantic colors backed by stable status codes.

02Filter

Click Filter and configure this column.

03Edit

Double-click a value to change it.

INTERACTIVE EXAMPLE

Try status in context

Filter statuses or edit one from the list.

Preparing interactive table…

QUICK START

const columns: GridColumn<Row>[] = [
  {
    key: 'status',
    title: 'Status',
    kind: 'status',
    editable: true,
    cellOptions: {"statusOptions":{"active":{"label":"Active","tone":"success"},"pending":{"label":"Pending","tone":"warning"},"paused":{"label":"Paused","tone":"neutral"},"blocked":{"label":"Blocked","tone":"danger"}}},
  },
]

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