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

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

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

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)