ComponentsEnterpriseColumnManager

ColumnManager

ColumnManager controls visible table columns and their presentation order.

VisibilityOrderingRequired columnsSearchControlled

Overview

Use ColumnManager to personalize dense data tables without losing governed required columns.

Project table columns

Live preview

Manage columns

3 of 4 visible

NameProject title and identifier
OwnerAssigned owner
StatusDelivery stateRequired
BudgetAllocated spend
ProjectColumns.tsx
tsx
import { ColumnManager } from 'omverse-ui'
 
const columns = [
{ id: 'name', label: 'Name', required: true },
{ id: 'owner', label: 'Owner' },
{ id: 'status', label: 'Status' },
]
 
<ColumnManager columns={columns} defaultValue={['name', 'owner', 'status']} />

Anatomy

The manager combines collection status, search, visibility, identity, and ordering controls.

Manage columns3 of 4 visible
✓OwnerAccountable person
12345
  1. 1
    Collection status

    States visible and available counts.

  2. 2
    Reset

    Restores application defaults.

  3. 3
    Search

    Filters columns by name.

  4. 4
    Visibility control

    Shows or hides one column.

  5. 5
    Order controls

    Moves a visible column.

When to use

Use ColumnManager when people need personalized table views without losing required data visibility.

Recommended

  • Personalize dense tables

    Let people focus on relevant fields.

  • Preserve required data

    Lock essential identity columns.

  • Control column order

    Set scanning priority without drag-only interaction.

When not to use

Avoid using ColumnManager for fixed data displays or when ordering belongs to the system.

Avoid

  • Keep layout fixed

    Use regular tables when column structure is fixed.

  • Do not edit dataset values

    Use row actions or forms instead.

  • Do not manage persisted layouts alone

    Pair with SavedViews.

Variants

Surface and density options for governed workspaces.

Outlined

Bounded panel.

Filled

Tonal panel.

Raised

Independent manager.

Density

Three row sizes.

States

Visibility and ordering are interactive states, while loading disables all edits.

StateTriggerVisual responseInteraction
VisibleID selectedChecked rowHide or move
HiddenID absentUnchecked rowShow
RequiredColumn requiredRequired labelCannot hide
FilteredSearch enteredMatching rowsManage match
LoadingColumns resolvingStatusDisabled

Behavior

Visibility

Checked IDs render as visible columns.

Order

Selected IDs determine presentation order.

Search

Filtering never commits selection.

Reset

Host restores default visibility.

Accessibility

KeyAction
TabMoves through search, visibility, and ordering controls.
SpaceToggles a checkbox.
EnterMoves a row up or down when focused.
  • Name checkboxes with column labels.
  • Name movement direction and column.
  • Express required state in text.
  • Avoid drag-and-drop as the only interaction.
  • Announce loading and empty results.

Content guidelines

Match table headers

Use exact column names from the table.

ExampleOwner

Describe unfamiliar fields

Explain each non-obvious field.

ExampleFiscal quarter

State locked fields

Show why these cannot be hidden.

ExampleRequired for compliance.

Examples

Required identity column

Live preview
☑ Owner Required · cannot be hidden

Props / API

ColumnManager extends section attributes.

Props

PropTypeDefaultDescription
columnsreadonly ColumnManagerColumn[]requiredAvailable column definitions.
valuereadonly string[]undefinedControlled visible IDs in order.
defaultValuereadonly string[]allInitial visible IDs.
onValueChange(ids) => voidundefinedRuns after visibility or order changes.
titleReactNode'Manage columns'Visible heading.
searchablebooleantrueEnables column search.
disabledbooleanfalseDisables changes.
loadingbooleanfalseShows loading status.
emptyStateReactNode'No columns'Empty result content.
onReset() => voidundefinedShows reset control.
variant'outlined' | 'filled' | 'raised''outlined'Surface treatment.
size'sm' | 'md' | 'lg''md'Row density.