Skip to main content

Column Chooser

The Column Chooser gives users a dropdown with checkboxes to show or hide columns at runtime. Columns marked required cannot be hidden.

Live Demo​

Use the column chooser to show/hide columns
Live
Name
Email
Department
Salary
Alice Johnson
alice@example.com
Engineering
$50,000
Bob Smith
bob@example.com
Marketing
$53,500
Carol Lee
carol@example.com
Sales
$57,000
David Kim
david@example.com
Finance
$60,500
Eve Torres
eve@example.com
Operations
$64,000
Frank Wu
frank@example.com
Engineering
$67,500
Grace Park
grace@example.com
Marketing
$71,000
Henry Adams
henry@example.com
Sales
$74,500
Irene Costa
irene@example.com
Finance
$78,000
Jack Rivera
jack@example.com
Operations
$81,500
Framework-Specific Styling

The live demo above shows React Radix UI styling (lightweight default). To see how the column chooser dropdown looks in your framework's design system, click the framework buttons above the demo to open online demo. Each framework renders with its native dropdown and checkbox components, so the styling matches your design system.

Quick Example​

import { OGrid } from '@alaarab/ogrid-react-radix';
import type { IColumnDef } from '@alaarab/ogrid-react-radix';

interface Person {
  id: number;
  name: string;
  email: string;
  age: number;
  department: string;
  salary: number;
  startDate: string;
}

const columns: IColumnDef<Person>[] = [
  { columnId: 'name', name: 'Name', required: true },
  { columnId: 'email', name: 'Email' },
  { columnId: 'age', name: 'Age', type: 'numeric', defaultVisible: false },
  { columnId: 'department', name: 'Department' },
  {
    columnId: 'salary',
    name: 'Salary',
    type: 'numeric',
    valueFormatter: (v) => `$${Number(v).toLocaleString()}`,
  },
  { columnId: 'startDate', name: 'Start Date', defaultVisible: false },
];

function App() {
  return (
    <OGrid
      columns={columns}
      data={people}
      getRowId={(p) => p.id}
      defaultPageSize={10}
    />
  );
}
Switching UI libraries

The OGrid component has the same props across all React UI packages. To switch, just change the import:

  • Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
  • Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' — wrap in <FluentProvider>
  • Material UI (MUI v7): from '@alaarab/ogrid-react-material' — wrap in <ThemeProvider>

In this example:

  • Name is always visible (cannot be unchecked because required: true).
  • Age and Start Date are hidden by default but the user can enable them.
  • Email, Department, and Salary are visible by default and can be toggled.

How It Works​

OGrid includes a built-in Column Chooser that appears in the grid toolbar. Users click it to open a dropdown listing all columns with checkboxes.

Hiding Columns by Default​

Set defaultVisible: false on a column definition to hide it when the grid first renders. Users can still show it via the Column Chooser.

{ columnId: 'phone', name: 'Phone', defaultVisible: false }

Preventing Users from Hiding a Column​

Set required: true to lock a column as always visible. Its checkbox in the Column Chooser will be disabled.

{ columnId: 'name', name: 'Name', required: true }

Controlled Visibility​

For full control over which columns are visible, pass visibleColumns and onVisibleColumnsChange.

function App() {
  const [visible, setVisible] = useState<Set<string>>(
    new Set(['name', 'email', 'department'])
  );

  return (
    <OGrid
      columns={columns}
      data={rows}
      getRowId={(r) => r.id}
      visibleColumns={visible}
      onVisibleColumnsChange={setVisible}
    />
  );
}

When these props are provided, OGrid uses them instead of its internal visibility state.

Standalone ColumnChooser Component​

Each UI package also exports a standalone ColumnChooser component that you can render anywhere in your UI.

import { ColumnChooser } from '@alaarab/ogrid-react-radix';

<ColumnChooser
  columns={columns}
  visibleColumns={visibleColumns}
  onVisibleColumnsChange={setVisibleColumns}
/>

Props Reference​

TypeFieldDescription
IColumnMetadefaultVisiblefalse to hide on initial render (default: true)
IColumnMetarequiredtrue to prevent the user from hiding this column
IOGridProps<T>visibleColumnsControlled Set<string> of visible column IDs
IOGridProps<T>onVisibleColumnsChangeCallback when visibility changes: (cols: Set<string>) => void
  • Column Groups -- visibility applies to leaf columns within groups
  • Column Pinning -- pinned columns can also be toggled
  • Grid API -- getColumnState() / applyColumnState() to save and restore visibility