@opencorestack/opengridx 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -5,6 +5,28 @@
 
 ---
 
+## [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
+- **Aggregation footer width misalignment with `flex` columns**: When a `GridColDef` used `flex` (with or without a `width` fallback), the aggregation footer cells used `columnWidths` to resolve rendered widths. That map is a user-resize override cache — it contains no entry for columns that have not been manually resized, so flex-columns fell back to their raw `col.width` prop value, producing cells that were narrower than the actual column. Fixed by computing `resolvedColumnWidths` in `DataGrid` that seeds from the layout-computed flex widths (`unpinnedColsWithWidth`, `leftPinnedCols`, `rightPinnedCols`) and then overlays any user-resize overrides. `GridAggregationFooter` now receives `resolvedColumnWidths` instead of `columnWidths`.
+
+---
+
 ## [1.0.4] — July 30, 2026 🐛
 
 ### Fixed

package/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
 

package/dist/index.d.ts

@@ -976,7 +976,7 @@ export declare interface GridThemeTypography {
     fontSizeXl?: string;
 }
 
-export declare function GridToolbar({ columns, baseColumns, aggregationModel, onAggregationModelChange, pivotModel, onPivotModelChange, filterModel, onFilterModelChange, columnVisibilityModel, onColumnVisibilityModelChange, onColumnReorder, onColumnOrderReset, forceColumnsOpen, onColumnsPanelClose, children, rightContent, style, }: GridToolbarProps): JSX.Element;
+export declare function GridToolbar({ columns, baseColumns, aggregationModel, onAggregationModelChange, pivotModel, onPivotModelChange, filterModel, onFilterModelChange, columnVisibilityModel, onColumnVisibilityModelChange, onColumnReorder, onColumnOrderReset, forceColumnsOpen, onColumnsPanelClose, children, rightContent, style, renderColumnsButton, renderFilterButton, renderAggregationButton, renderExportButton, renderQuickFilter, className, }: GridToolbarProps): JSX.Element;
 
 export declare interface GridToolbarProps {
     columns?: GridColDef[];
@@ -1000,6 +1000,33 @@ export declare interface GridToolbarProps {
     children?: default_2.ReactNode;
     rightContent?: default_2.ReactNode;
     style?: default_2.CSSProperties;
+    /**
+     * Replace the built-in Columns button. The columns panel still opens and
+     * closes normally — only the trigger element is replaced.
+     */
+    renderColumnsButton?: (props: ToolbarButtonRenderProps) => default_2.ReactNode;
+    /**
+     * Replace the built-in Filters button. The filter panel still opens and
+     * closes normally — only the trigger element is replaced.
+     */
+    renderFilterButton?: (props: ToolbarButtonRenderProps) => default_2.ReactNode;
+    /**
+     * Replace the built-in Aggregation/Summaries button. The aggregation panel
+     * still opens and closes normally — only the trigger element is replaced.
+     */
+    renderAggregationButton?: (props: ToolbarButtonRenderProps) => default_2.ReactNode;
+    /**
+     * Render an Export button. There is no built-in export button — this slot
+     * inserts your element after the Aggregation button in the toolbar action row.
+     */
+    renderExportButton?: () => default_2.ReactNode;
+    /**
+     * Replace the built-in quick-filter search bar. Receives the current search
+     * value and an onChange handler; connect them to your own input element.
+     */
+    renderQuickFilter?: (props: ToolbarQuickFilterRenderProps) => default_2.ReactNode;
+    /** Additional CSS class applied to the toolbar root element. */
+    className?: string;
 }
 
 export declare function GridTooltip({ title, children, placement, enterDelay, leaveDelay }: GridTooltipProps): JSX.Element;
@@ -1198,6 +1225,24 @@ declare interface SkeletonProps {
     columns?: number;
 }
 
+/** Props passed to a custom toolbar button renderer. */
+export declare interface ToolbarButtonRenderProps {
+    /** Call this to toggle the associated panel open/closed. */
+    onClick: () => void;
+    /** Whether the associated panel is currently open. */
+    isOpen: boolean;
+    /** Number of active items (filters applied, aggregations configured, etc.). */
+    activeCount: number;
+}
+
+/** Props passed to a custom quick-filter renderer. */
+export declare interface ToolbarQuickFilterRenderProps {
+    /** Current search string. */
+    value: string;
+    /** Call with the new search string when the input changes. */
+    onChange: (value: string) => void;
+}
+
 export declare function useAggregation<R extends GridRowModel>(params: UseAggregationParams<R>): UseAggregationReturn;
 
 export declare interface UseAggregationParams<R extends GridRowModel> {