Skip to main content
The Column editor lets a user reorder, show, hide, pin, and unpin the columns of a table. Present it in a Drawer. Each example below is a starting point: copy it, then wire the columns and actions to your table’s state.

​
Resources

Drawer

Drawer component anatomy and usage guidance.

Column editor

Figma reference implementations for the column editor.

​
In a Drawer

The full column editor inside a Drawer — header with close, a search field, Pinned / Visible / Hidden sections, and Reset / Cancel / Apply actions in the footer. The drag handles are decorative in these examples: they are marked aria-hidden and no drag-and-drop is wired up. Reordering needs a drag-and-drop library, and the handles must be made focusable and operable by keyboard before the affordance is shown to users. The SearchField is equally inert — it has no value and filters nothing — so wire it up before shipping; it’s the first interactive thing in every example.

​
System Pinned Options

A system-pinned column stays pinned: its checkbox is disabled so it can’t be hidden, and its unpin action is disabled so it can’t be moved out of the pinned section.

​
Grouped Options

Grouped columns, where a parent column nests child columns that indent beneath it.

​
Column Types Tag

Each column is tagged with its column type using a Chip beside the column name.
Last modified on September 3, 2026