feat: toolbar render prop slots and className override (v1.0.6)

Add five render props to GridToolbar allowing individual controls to be
replaced without rebuilding the entire toolbar. All panels retain their
existing open/close logic — only the trigger elements change.

New GridToolbarProps:
- renderColumnsButton(ToolbarButtonRenderProps) — replace Columns button
- renderFilterButton(ToolbarButtonRenderProps)  — replace Filters button
- renderAggregationButton(ToolbarButtonRenderProps) — replace Summaries button
- renderExportButton()                          — inject an Export button slot
- renderQuickFilter(ToolbarQuickFilterRenderProps) — replace search input
- className                                     — CSS class on toolbar root

ToolbarButtonRenderProps and ToolbarQuickFilterRenderProps are exported
from the package for TypeScript consumers.

Panel positioning switches to the wrapper div ref when a custom button
is provided, so no ref plumbing is required in consumer code.

Also includes:
- Toolbar Customization demo page (/toolbar-customization)
- In-app API docs updated with GridToolbar section
- docs/components/toolbar.md rewritten with full prop reference
- docs/API_REFERENCE.md GridToolbar section added
- docs/features/toolbar-customization.md new standalone guide
- README.md toolbar section updated with render prop table
- App.css header z-index raised to 990
- AdvancedFilteringDemo minor formatting fixes

Author: Asif Ansari

CHANGELOG.md

@@ -5,6 +5,21 @@
 
 ---
 
+## [1.0.6] — August 13, 2026 ✨
+
+### Added
+- **Toolbar render prop slots**: `GridToolbar` now accepts render props to replace individual toolbar controls without replacing the entire toolbar. All panels (columns, filters, aggregation) continue to open and close normally — only the trigger element is swapped.
+  - `renderColumnsButton(props)` — replace the Columns icon button
+  - `renderFilterButton(props)` — replace the Filters icon button; receives `activeCount`
+  - `renderAggregationButton(props)` — replace the Summaries icon button; receives `activeCount`
+  - `renderExportButton()` — inject an Export button after the Aggregation button (no built-in exists)
+  - `renderQuickFilter(props)` — replace the built-in `GlobalSearch` input; receives `value` and `onChange`
+- **`GridToolbar.className`**: Accepts an additional CSS class on the toolbar root `<div>` for full visual override without replacing the component.
+- **Exported types**: `ToolbarButtonRenderProps` and `ToolbarQuickFilterRenderProps` are now exported from the package for TypeScript consumers.
+- **Toolbar Customization demo**: new demo page at `/toolbar-customization` showing a branded dark toolbar and a plain light toolbar, each using all five render props.
+
+---
+
 ## [1.0.5] — August 12, 2026 🐛
 
 ### Fixed

README.md

@@ -339,11 +339,58 @@ import { DataGrid, GridToolbar } from '@opencorestack/opengridx';
 <DataGrid
   rows={rows}
   columns={columns}
+  filterModel={filterModel}
+  onFilterModelChange={setFilterModel}
+  columnVisibilityModel={columnVisibilityModel}
+  onColumnVisibilityModelChange={setColumnVisibilityModel}
   slots={{ toolbar: GridToolbar }}
 />
 ```
 
-`GridToolbar` provides global search, column visibility panel, filter panel, and export controls out of the box.
+`GridToolbar` provides global search, column visibility management, advanced filters, and aggregation controls. Each feature button is automatically hidden if its callback prop is not provided.
+
+#### Customizing individual toolbar controls
+
+Replace any single control using render props — the panels remain fully functional:
+
+| Prop | What it replaces |
+|------|-----------------|
+| `renderQuickFilter(props)` | The search input. Receives `{ value, onChange }`. |
+| `renderColumnsButton(props)` | The Columns toggle button. Receives `{ onClick, isOpen, activeCount }`. |
+| `renderFilterButton(props)` | The Filters toggle button. Receives `{ onClick, isOpen, activeCount }`. |
+| `renderAggregationButton(props)` | The Summaries toggle button. Receives `{ onClick, isOpen, activeCount }`. |
+| `renderExportButton()` | Inserts an Export button slot (no built-in exists). |
+| `className` | CSS class on the toolbar root for theme overrides. |
+
+```tsx
+import { GridToolbar, exportToCsv, useGridApiRef,
+         type ToolbarButtonRenderProps, type ToolbarQuickFilterRenderProps } from '@opencorestack/opengridx';
+
+const apiRef = useGridApiRef();
+
+<DataGrid
+  apiRef={apiRef}
+  slots={{ toolbar: GridToolbar }}
+  slotProps={{
+    toolbar: {
+      className: 'my-branded-toolbar',
+      renderQuickFilter: ({ value, onChange }: ToolbarQuickFilterRenderProps) => (
+        <input className="my-search" value={value} onChange={e => onChange(e.target.value)} />
+      ),
+      renderFilterButton: ({ onClick, isOpen, activeCount }: ToolbarButtonRenderProps) => (
+        <button className={isOpen ? 'active' : ''} onClick={onClick}>
+          Filters {activeCount > 0 && <span>{activeCount}</span>}
+        </button>
+      ),
+      renderExportButton: () => (
+        <button onClick={() => exportToCsv(apiRef.current.getAllRows(), columns)}>
+          Export CSV
+        </button>
+      ),
+    },
+  }}
+/>
+```
 
 ### Export Functionality
 

demo/App.css

@@ -15,7 +15,7 @@
     padding: 0 24px;
     position: sticky;
     top: 0;
-    z-index: 50;
+    z-index: 990;
 }
 
 .app-github-link {

demo/App.tsx

@@ -34,6 +34,7 @@ const RealEstatePortfolioDemo = lazy(() => import('./examples/RealEstatePortfoli
 const EmployeeCalendarDemo = lazy(() => import('./examples/EmployeeCalendarDemo/EmployeeCalendarDemo'));
 const LoadingStatesDemo = lazy(() => import('./examples/LoadingStatesDemo/LoadingStatesDemo'));
 const ToolbarDemo = lazy(() => import('./examples/ToolbarDemo/ToolbarDemo'));
+const ToolbarCustomizationDemo = lazy(() => import('./examples/ToolbarCustomizationDemo/ToolbarCustomizationDemo'));
 const FilterPanelDemo = lazy(() => import('./examples/FilterPanelDemo/FilterPanelDemo'));
 const SlotsDemo = lazy(() => import('./examples/SlotsDemo/SlotsDemo'));
 const CRUDTutorial = lazy(() => import('./examples/CRUDTutorial/CRUDTutorial'));
@@ -78,6 +79,7 @@ const examplesConfig = [
 
     // Components
     { path: '/toolbar', name: 'Toolbar', component: ToolbarDemo, category: 'Components' },
+    { path: '/toolbar-customization', name: 'Toolbar Customization', component: ToolbarCustomizationDemo, category: 'Components' },
     { path: '/filter-panel', name: 'Filter Panel', component: FilterPanelDemo, category: 'Components' },
 
     // Customization
@@ -135,7 +137,7 @@ export default function App() {
                         <img src={`${import.meta.env.BASE_URL}logo.png`} alt="OpenGridX Logo" className="app-logo" />
                         <h2 className="app-title">
                             OpenGridX
-                            <span className="app-version">v1.0.5</span>
+                            <span className="app-version">v1.0.6</span>
                         </h2>
                     </div>
 

demo/Home.tsx

@@ -68,7 +68,7 @@ export default function Home(_props: HomeProps) {
                 <div className="home-logo-hero">
                     <img src={`${import.meta.env.BASE_URL}banner.png`} alt="OpenGridX Logo" className="home-banner-image" />
                 </div>
-                <span className="home-badge">OpenGridX v1.0.5</span>
+                <span className="home-badge">OpenGridX v1.0.6</span>
                 <p className="home-subtitle">
                     The elite, high-performance DataGrid for modern React.
                     Built to handle massive data with a premium developer experience.

demo/examples/AdvancedFilteringDemo/AdvancedFilteringDemo.css

@@ -39,7 +39,7 @@
 }
 
 .filtering-export-btn {
-    color: #4b5563;
+    color: #fff;
 }
 
 .filtering-export-btn--disabled {
@@ -49,7 +49,7 @@
 /* Toolbar Export Spinner */
 .toolbar-spinner {
     animation: ogx-spin 1s linear infinite;
-    border: 2px solid rgba(0,0,0,0.1);
+    border: 2px solid rgba(0, 0, 0, 0.1);
     border-top: 2px solid #6b7280;
     border-radius: 50%;
     width: 16px;
@@ -58,5 +58,7 @@
 }
 
 @keyframes ogx-spin {
-    to { transform: rotate(360deg); }
-}
+    to {
+        transform: rotate(360deg);
+    }
+}

demo/examples/AdvancedFilteringDemo/AdvancedFilteringDemo.tsx

@@ -1,15 +1,25 @@
 
 import { useState } from 'react';
-import { DataGrid, GridToolbar, GridColDef, GridFilterModel, GridTooltip, exportToCsv, exportToExcel, exportToJson, printGrid } from '@opencorestack/opengridx';
+import { DataGrid, GridToolbar, GridColDef, GridRowModel, GridFilterModel, GridTooltip, exportToCsv, exportToExcel, exportToJson, printGrid } from '@opencorestack/opengridx';
 import { DocsLayout } from '../../components/DocsLayout';
 import './AdvancedFilteringDemo.css';
 
 import sourceCode from './AdvancedFilteringDemo.tsx?raw';
 
+interface Employee extends GridRowModel {
+    id: number;
+    firstName: string;
+    lastName: string;
+    age: number;
+    department: string;
+    salary: number;
+    active: boolean;
+}
+
 interface ExportToolbarProps {
     apiRef?: any;
-    fallbackRows: any[];
-    fallbackColumns: GridColDef[];
+    fallbackRows: Employee[];
+    fallbackColumns: GridColDef<Employee>[];
 }
 
 function ExportToolbar({ apiRef, fallbackRows, fallbackColumns }: ExportToolbarProps) {
@@ -113,7 +123,7 @@ function ExportToolbar({ apiRef, fallbackRows, fallbackColumns }: ExportToolbarP
     );
 }
 
-const rows = [
+const rows: Employee[] = [
     { id: 1, firstName: 'Jon', lastName: 'Snow', age: 35, department: 'Engineering', salary: 95000, active: true },
     { id: 2, firstName: 'Cersei', lastName: 'Lannister', age: 42, department: 'Management', salary: 140000, active: false },
     { id: 3, firstName: 'Jaime', lastName: 'Lannister', age: 45, department: 'Security', salary: 88000, active: true },
@@ -141,9 +151,9 @@ const rows = [
     { id: 25, firstName: 'Tormund', lastName: 'Giantsbane', age: 38, department: 'Security', salary: 72000, active: true },
 ];
 
-const columns: GridColDef[] = [
+const columns: GridColDef<Employee>[] = [
     { field: 'id', headerName: 'ID', width: 70, type: 'number' },
-    { field: 'firstName', headerName: 'First Name', width: 140 },
+    { field: 'firstName', headerName: 'First Name', flex: 1, width: 100 },
     { field: 'lastName', headerName: 'Last Name', width: 150 },
     { field: 'age', headerName: 'Age', width: 90, type: 'number' },
     { field: 'department', headerName: 'Department', width: 150 },