Sidebar

The sidebar is an icon rail beside the grid with one panel open at a time. The grid core draws it, so it follows the grid's theme and works the same in every adapter.

<Grid
	rows={rows}
	columns={columns}
	sidebar={{
		panels: ['columns', 'filters', 'sort', 'query', 'views'],
		position: 'right', // or 'left'
		width: 300,
	}}
	initialState={{ sidebarPanel: 'columns' }} // the panel open at first
/>

Open and close panels from code with api.setState({ sidebarPanel: id }), api.setState({ sidebarPanel: null }) and api.setState({ sidebarPanel: api.getState().sidebarPanel === id ? null : id }); the open panel is api.getState().sidebarPanel. The rail shows how many filters, sorts and query conditions are active. Arrow keys move between rail buttons and Escape closes the panel.

Built-in panelsCopy Anchor Link

ViewsCopy Anchor Link

The Views panel lists the grid's views and shows whether the grid still shows the open one as defined: Save changes sends it to the view's owner (a refusal or a newer definition is said in the panel), Revert shows it as defined again, and Save as new names what the grid shows. Each view opens in one click; its menu sets the default view, renames, duplicates and deletes (the app's own views are its to rename and delete). Without a view store or storage, views made here last the session, and the panel says so.

Panels of your ownCopy Anchor Link

A panel is an id, a label, an icon (SVG markup on a 24 × 24 view box) and either a React component or a DOM panel. The panel gets the grid api, a slot for actions in its header, close(), and mountFilterEditor to embed a column's filter editor.

import type { GridApi, SidebarPanelDef } from '@witbybit/wit-grid-react';

declare function NotesPanel(props: { api: GridApi<Order> }): JSX.Element;

const notes: SidebarPanelDef<Order> = {
	id: 'notes',
	label: 'Notes',
	icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h6"/></svg>',
	renderPanel: ({ api }) => <NotesPanel api={api} />,
};

<Grid rows={rows} columns={columns} sidebar={{ panels: ['columns', notes] }} />;