Skip to content

toolbar.md

Latest commit

 

History

History
40 lines (30 loc) · 1.11 KB

toolbar.md

File metadata and controls

40 lines (30 loc) · 1.11 KB
Raw

<Toolbar />

The toolbar is an optional component rendered at the top of the grid. It typically contains global actions like exporting, filtering, and column management.

🛠️ Provided Component: GridToolbar

OpenGridX includes a pre-built GridToolbar that bundles common actions.

Usage

import { DataGrid, GridToolbar } from '@opencorestack/opengridx';

<DataGrid
  slots={{
    toolbar: GridToolbar
  }}
/>

Features

  • Quick Search: Search across all visible columns.
  • Export Menu: Download data as CSV, Print, or Advanced Excel.
  • Column Visibility: Toggle which columns are shown via a dropdown Visibility Panel.
  • Density: Switch between Compact, Standard, and Comfortable row heights.

🎨 Custom Toolbar

You can provide your own component to the toolbar slot. It will receive props to interact with the grid state.

const MyToolbar = () => {
  return (
    <div className="custom-toolbar">
      <button onClick={...}>Custom Action</button>
    </div>
  );
};

<DataGrid slots={{ toolbar: MyToolbar }} />