Side Bar

The Side Bar adds a collapsible panel alongside the grid with two built-in panels: Columns (toggle column visibility with Select All / Clear All) and Filters (inline text, multi-select, and date filters). Click the tab icons to open or close panels.

Live Demo

Click the tab icons on the right to open Columns or Filters panels

Live

Name	Email	Department	Salary	Status
Alice Johnson	alice@example.com	Engineering	$50,000	Active
Bob Smith	bob@example.com	Marketing	$53,500	Draft
Carol Lee	carol@example.com	Sales	$57,000	Archived
David Kim	david@example.com	Finance	$60,500	Active
Eve Torres	eve@example.com	Operations	$64,000	Draft
Frank Wu	frank@example.com	Engineering	$67,500	Archived
Grace Park	grace@example.com	Marketing	$71,000	Active
Henry Adams	henry@example.com	Sales	$74,500	Draft
Irene Costa	irene@example.com	Finance	$78,000	Archived
Jack Rivera	jack@example.com	Operations	$81,500	Active

Showing 1 to 10 of 25 items

Rows102550100

Try it in your framework

The demo above uses Radix UI for styling. To see this feature with your framework's design system (Fluent UI, Material UI, Vuetify, PrimeNG, etc.), click "Open in online demo" below the demo.

React

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

<OGrid
  columns={columns}
  data={items}
  getRowId={(item) => item.id}
  sideBar
  columnChooser="sidebar"
  pagination
/>

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>

Angular

import { Component } from '@angular/core';
import { OGridComponent } from '@alaarab/ogrid-angular-material';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `<ogrid [props]="gridProps" />`
})
export class GridComponent {
  gridProps = {
    columns: columns,
    data: items,
    getRowId: (item: Item) => item.id,
    sideBar: true,
    columnChooser: 'sidebar' as const,
    pagination: true,
  };
}

Switching UI libraries

Same component API across Angular packages. To switch, just change the import:

• Radix (CDK): from '@alaarab/ogrid-angular-radix' (default, lightweight)
• Angular Material: from '@alaarab/ogrid-angular-material'
• PrimeNG: from '@alaarab/ogrid-angular-primeng'

All components are standalone — no NgModule required.

Vue

<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-vuetify';

const gridProps = {
  columns,
  data: items,
  getRowId: (item) => item.id,
  sideBar: true,
  columnChooser: 'sidebar' as const,
  pagination: true,
};
</script>

<template>
  <OGrid :gridProps="gridProps" />
</template>

Switching UI libraries

Same component API across Vue packages. To switch, just change the import:

• Radix (Headless UI): from '@alaarab/ogrid-vue-radix' (default, lightweight)
• Vuetify: from '@alaarab/ogrid-vue-vuetify' — wrap in <v-app> for theming
• PrimeVue: from '@alaarab/ogrid-vue-primevue'

Vanilla JS

import { OGrid } from '@alaarab/ogrid-js';
import '@alaarab/ogrid-js/styles';

const grid = new OGrid(document.getElementById('grid'), {
  columns: columns,
  data: items,
  getRowId: (item) => item.id,
  sideBar: true,
  columnChooser: 'sidebar',
  pagination: true,
});

Set sideBar to true to enable both panels with default settings. Set columnChooser="sidebar" to move the column chooser from the toolbar into the sidebar's Columns panel.

Panels

Columns Panel

The Columns panel lists every column with a checkbox. Users can:

• Toggle individual columns on or off
• Select All to show every column
• Clear All to hide all non-required columns

Columns with required: true cannot be hidden — their checkboxes are disabled.

Filters Panel

The Filters panel shows inline filter controls for every filterable column:

Column filter type	Sidebar control
text	Text input
multiSelect	Checkbox list of options
date	From / To date inputs

Filters applied in the sidebar work the same as column header filters — they share state.

Configuration

Pass an ISideBarDef object instead of true to customize panels, position, and default state.

Left Position

Sidebar on the left with Filters panel open by default

Live

Filters

Name

Department

EngineeringFinanceMarketingOperationsSales

Status

ActiveArchivedDraft

Name	Email	Department	Salary	Status
Alice Johnson	alice@example.com	Engineering	$50,000	Active
Bob Smith	bob@example.com	Marketing	$53,500	Draft
Carol Lee	carol@example.com	Sales	$57,000	Archived
David Kim	david@example.com	Finance	$60,500	Active
Eve Torres	eve@example.com	Operations	$64,000	Draft
Frank Wu	frank@example.com	Engineering	$67,500	Archived
Grace Park	grace@example.com	Marketing	$71,000	Active
Henry Adams	henry@example.com	Sales	$74,500	Draft
Irene Costa	irene@example.com	Finance	$78,000	Archived
Jack Rivera	jack@example.com	Operations	$81,500	Active

Showing 1 to 10 of 25 items

Rows102550100

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

const sideBarDef: ISideBarDef = {
  position: 'left',
  defaultPanel: 'filters',
};

<OGrid
  columns={columns}
  data={items}
  getRowId={(item) => item.id}
  sideBar={sideBarDef}
  columnChooser="sidebar"
/>

Columns Panel Only

Sidebar with only the Columns panel (no Filters tab)

Live

Name	Email	Department	Salary	Status
Alice Johnson	alice@example.com	Engineering	$50,000	Active
Bob Smith	bob@example.com	Marketing	$53,500	Draft
Carol Lee	carol@example.com	Sales	$57,000	Archived
David Kim	david@example.com	Finance	$60,500	Active
Eve Torres	eve@example.com	Operations	$64,000	Draft
Frank Wu	frank@example.com	Engineering	$67,500	Archived
Grace Park	grace@example.com	Marketing	$71,000	Active
Henry Adams	henry@example.com	Sales	$74,500	Draft
Irene Costa	irene@example.com	Finance	$78,000	Archived
Jack Rivera	jack@example.com	Operations	$81,500	Active

Columns

NameEmailDepartmentSalaryStatusAgeStart Date

Showing 1 to 10 of 25 items

Rows102550100

const sideBarDef: ISideBarDef = {
  panels: ['columns'],
  defaultPanel: 'columns',
};

<OGrid
  columns={columns}
  data={items}
  getRowId={(item) => item.id}
  sideBar={sideBarDef}
  columnChooser="sidebar"
/>

Filters Panel Only

const sideBarDef: ISideBarDef = {
  panels: ['filters'],
};

<OGrid
  columns={columns}
  data={items}
  getRowId={(item) => item.id}
  sideBar={sideBarDef}
/>

Props

sideBar (on IOGridProps)

Value	Behavior
false / omitted	No side bar
true	Both panels, right position, collapsed on mount
ISideBarDef	Full configuration (see below)

ISideBarDef

Field	Type	Default	Description
panels	SideBarPanelId[]	['columns', 'filters']	Which panels to include.
defaultPanel	SideBarPanelId	--	Panel to open automatically on mount.
position	'left' | 'right'	'right'	Which side of the grid the bar appears on.

SideBarPanelId

type SideBarPanelId = 'columns' | 'filters';

Related

• Column Chooser -- standalone column visibility dropdown
• Toolbar & Layout -- the container that wraps sidebar + grid
• Filtering -- column header filters (shared state with sidebar)