@opencorestack/opengridx 1.0.5 → 1.0.7

package/lib/components/DataGrid/GridStandaloneColumnPanel.tsx

@@ -6,6 +6,7 @@ import type { GridColDef, GridRowModel, GridColumnOrderChangeParams } from '../.
 export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
     isOpen: boolean;
     containerRef: React.RefObject<HTMLDivElement | null>;
+    panelRef?: React.RefObject<HTMLDivElement | null>;
     effectiveColumns: GridColDef<R>[];
     columnVisibilityModel: Record<string, boolean>;
     effectiveColumnOrder: string[];
@@ -20,6 +21,7 @@ export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
 export function GridStandaloneColumnPanel<R extends GridRowModel>({
     isOpen,
     containerRef,
+    panelRef,
     effectiveColumns,
     columnVisibilityModel,
     effectiveColumnOrder,
@@ -64,7 +66,7 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
 
     return ReactDOM.createPortal(
         <div
-            id="ogx-standalone-col-panel"
+            ref={panelRef}
             style={{
                 position: 'fixed',
                 top: panelTop,

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type {
     GridFilterModel,
     GridFilterItem,
@@ -25,6 +25,7 @@ const FilterRow: React.FC<{
     item: GridFilterItem | undefined;
     onChange: (item: GridFilterItem | null) => void;
 }> = ({ col, item, onChange }) => {
+    const filterId = useId();
     const operators = getOperatorsForType(col.type);
     const isActive = !!item;
     const currentOperator = item?.operator ?? operators[0];
@@ -99,7 +100,7 @@ const FilterRow: React.FC<{
             <div className="ogx-filter__controls">
                 { }
                 <select
-                    id={`ogx-filter-op-${col.field}`}
+                    id={`${filterId}-op`}
                     name={`filter-op-${col.field}`}
                     className={`ogx-filter__op-select${isActive ? ' ogx-filter__op-select--active' : ''}`}
                     value={String(currentOperator)}
@@ -114,7 +115,7 @@ const FilterRow: React.FC<{
                 { }
                 {showValue && isBoolean && (
                     <select
-                        id={`ogx-filter-val-${col.field}`}
+                        id={`${filterId}-val`}
                         name={`filter-val-${col.field}`}
                         className={`ogx-filter__value-input ogx-filter__value-select${isActive ? ' ogx-filter__value-input--active' : ''}`}
                         value={String(item?.value ?? 'true')}
@@ -136,7 +137,7 @@ const FilterRow: React.FC<{
 
                 {showValue && !isBoolean && (
                     <input
-                        id={`ogx-filter-val-${col.field}`}
+                        id={`${filterId}-val`}
                         name={`filter-val-${col.field}`}
                         className={`ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`}
                         type="text"

package/lib/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import { ColumnResizeHandle } from '../ColumnResizeHandle/ColumnResizeHandle';
 import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroup, GridColumnGroupingModel } from '../../types';
@@ -171,6 +171,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         onManageColumns,
     } = props;
 
+    const selectAllId = useId();
     const cellRefs = React.useRef<Record<string, HTMLElement | null>>({});
     const [menuOpenParams, setMenuOpenParams] = React.useState<{ colDef: GridColDef<R>; anchorEl: HTMLElement } | null>(null);
 
@@ -340,8 +341,8 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         }}
                     >
                         <Checkbox
-                            id="ogx-select-all"
-                            name="ogx-select-all"
+                            id={selectAllId}
+                            name={selectAllId}
                             checked={allSelected}
                             indeterminate={someSelected}
                             onChange={(e) => onSelectAll?.(e.target.checked)}

package/lib/components/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useId } from 'react';
 import { Button } from '../ui/Button';
 
 export interface PaginationProps {
@@ -14,6 +14,7 @@ export interface PaginationProps {
 }
 
 export function Pagination(props: PaginationProps) {
+    const pageSizeId = useId();
     const {
         page,
         pageSize,
@@ -61,11 +62,11 @@ export function Pagination(props: PaginationProps) {
         <div className="ogx-pagination" role="navigation" aria-label="Pagination">
             { }
             <div className="ogx-pagination__page-size">
-                <label htmlFor="page-size-select" className="ogx-pagination__label">
+                <label htmlFor={pageSizeId} className="ogx-pagination__label">
                     Rows per page:
                 </label>
                 <select
-                    id="page-size-select"
+                    id={pageSizeId}
                     className="ogx-pagination__select"
                     value={pageSize}
                     onChange={handlePageSizeChange}

package/lib/components/Row/Row.tsx

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useId } from 'react';
 import { Cell } from '../Cell/Cell';
 import { Checkbox } from '../ui/Checkbox';
 import { ExpandIcon } from '../ui/ExpandIcon';
@@ -94,6 +94,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         rowHeight = 52
     } = props;
 
+    const checkboxId = useId();
     const expandCellRef = React.useRef<HTMLDivElement>(null);
     const checkboxCellRef = React.useRef<HTMLDivElement>(null);
 
@@ -291,7 +292,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                         }}
                     >
                         <Checkbox
-                            id={`ogx-select-row-${row.id}`}
+                            id={checkboxId}
                             name={`ogx-select-row-${row.id}`}
                             checked={isSelected}
                             onChange={handleCheckboxChange}

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -146,8 +146,6 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
             </div>
             <input
                 ref={inputRef}
-                id="ogx-global-search-input"
-                name="ogx-global-search"
                 className="ogx-global-search__input"
                 value={localValue}
                 onChange={(e) => setLocalValue(e.target.value)}

package/lib/components/Toolbar/GridToolbar.tsx

@@ -7,6 +7,24 @@ import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibility
 import { FilterPanel } from '../FilterPanel/FilterPanel';
 import { GridTooltip } from '../Tooltip/Tooltip';
 
+/** Props passed to a custom toolbar button renderer. */
+export 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 interface ToolbarQuickFilterRenderProps {
+    /** Current search string. */
+    value: string;
+    /** Call with the new search string when the input changes. */
+    onChange: (value: string) => void;
+}
+
 export interface GridToolbarProps {
     columns?: GridColDef[];
     /** Original user-defined columns (before pivot transformation).
@@ -29,6 +47,33 @@ export interface GridToolbarProps {
     children?: React.ReactNode;
     rightContent?: React.ReactNode;
     style?: React.CSSProperties;
+    /**
+     * Replace the built-in Columns button. The columns panel still opens and
+     * closes normally — only the trigger element is replaced.
+     */
+    renderColumnsButton?: (props: ToolbarButtonRenderProps) => React.ReactNode;
+    /**
+     * Replace the built-in Filters button. The filter panel still opens and
+     * closes normally — only the trigger element is replaced.
+     */
+    renderFilterButton?: (props: ToolbarButtonRenderProps) => React.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) => React.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?: () => React.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) => React.ReactNode;
+    /** Additional CSS class applied to the toolbar root element. */
+    className?: string;
 }
 
 const AGGREGATION_FUNCTIONS = ['none', 'sum', 'avg', 'count', 'min', 'max'] as const;
@@ -78,7 +123,7 @@ function AggregationPanel({
     onClose,
     activeCount,
 }: {
-    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    anchorRef: React.RefObject<HTMLElement | null>;
     aggregationModel: GridAggregationModel;
     aggregableColumns: GridColDef[];
     onFunctionChange: (field: string, fn: string) => void;
@@ -205,7 +250,7 @@ function ColumnsPanelWrapper({
     onColumnOrderReset,
     onClose
 }: {
-    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    anchorRef: React.RefObject<HTMLElement | null>;
     columns: GridColDef[];
     visibleColumns: Set<string>;
     onVisibilityChange: (field: string, isVisible: boolean) => void;
@@ -286,7 +331,7 @@ function FilterPanelWrapper({
     onFilterModelChange,
     onClose
 }: {
-    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    anchorRef: React.RefObject<HTMLElement | null>;
     columns: GridColDef[];
     filterModel: GridFilterModel;
     onFilterModelChange: (model: GridFilterModel) => void;
@@ -413,6 +458,12 @@ export function GridToolbar({
     children,
     rightContent,
     style,
+    renderColumnsButton,
+    renderFilterButton,
+    renderAggregationButton,
+    renderExportButton,
+    renderQuickFilter,
+    className,
 }: GridToolbarProps) {
     const [aggOpen, setAggOpen] = useState(false);
     const [pivotOpen, setPivotOpen] = useState(false);
@@ -433,6 +484,12 @@ export function GridToolbar({
     const colsButtonRef = useRef<HTMLButtonElement>(null);
     const filterButtonRef = useRef<HTMLButtonElement>(null);
 
+    // Wrapper div refs — used as panel anchors when a custom button renderer
+    // is provided (the custom element doesn't expose a ref to us).
+    const colsWrapperRef = useRef<HTMLDivElement>(null);
+    const filterWrapperRef = useRef<HTMLDivElement>(null);
+    const aggWrapperRef = useRef<HTMLDivElement>(null);
+
     const currentPivotModel = pivotModel ?? EMPTY_PIVOT;
     const pivotActive = currentPivotModel.rowFields.length > 0
         || currentPivotModel.columnFields.length > 0
@@ -512,7 +569,7 @@ export function GridToolbar({
     }, [columns, columnVisibilityModel, onColumnVisibilityModelChange]);
 
     return (
-        <div className="ogx-toolbar" role="toolbar" aria-label="Grid toolbar" style={style}>
+        <div className={['ogx-toolbar', className].filter(Boolean).join(' ')} role="toolbar" aria-label="Grid toolbar" style={style}>
             {/* Left slot — custom content */}
             {children && <div className="ogx-toolbar__left">{children}</div>}
 
@@ -523,35 +580,49 @@ export function GridToolbar({
             <div className="ogx-toolbar__actions">
                 {onFilterModelChange && (
                     <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                        <GlobalSearch
-                            value={searchValue}
-                            onChange={handleSearchChange}
-                            placeholder="Search..."
-                        />
+                        {renderQuickFilter
+                            ? renderQuickFilter({ value: searchValue, onChange: handleSearchChange })
+                            : (
+                                <GlobalSearch
+                                    value={searchValue}
+                                    onChange={handleSearchChange}
+                                    placeholder="Search..."
+                                />
+                            )
+                        }
                     </div>
                 )}
 
                 {/* Columns Button */}
                 {onColumnVisibilityModelChange && (
-                    <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                        <GridTooltip title="Columns">
-                            <button
-                                ref={colsButtonRef}
-                                className={`ogx-toolbar__icon-btn${colsOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                aria-label="Manage columns"
-                                onClick={() => {
-                                    setColsOpen(!colsOpen);
-                                    setAggOpen(false);
-                                    setPivotOpen(false);
-                                    setFilterOpen(false);
-                                }}
-                            >
-                                <ViewColumnIcon />
-                            </button>
-                        </GridTooltip>
+                    <div ref={colsWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
+                        {renderColumnsButton
+                            ? renderColumnsButton({
+                                onClick: () => { setColsOpen(o => !o); setAggOpen(false); setPivotOpen(false); setFilterOpen(false); },
+                                isOpen: colsOpen,
+                                activeCount: columns.length - visibleColumns.size,
+                            })
+                            : (
+                                <GridTooltip title="Columns">
+                                    <button
+                                        ref={colsButtonRef}
+                                        className={`ogx-toolbar__icon-btn${colsOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
+                                        aria-label="Manage columns"
+                                        onClick={() => {
+                                            setColsOpen(!colsOpen);
+                                            setAggOpen(false);
+                                            setPivotOpen(false);
+                                            setFilterOpen(false);
+                                        }}
+                                    >
+                                        <ViewColumnIcon />
+                                    </button>
+                                </GridTooltip>
+                            )
+                        }
                         {colsOpen && (
                             <ColumnsPanelWrapper
-                                anchorRef={colsButtonRef}
+                                anchorRef={renderColumnsButton ? colsWrapperRef : colsButtonRef}
                                 columns={columns}
                                 visibleColumns={visibleColumns}
                                 onVisibilityChange={handleVisibilityChange}
@@ -567,28 +638,37 @@ export function GridToolbar({
 
                 {/* Filters Button */}
                 {onFilterModelChange && (
-                    <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                        <GridTooltip title="Filters">
-                            <button
-                                ref={filterButtonRef}
-                                className={`ogx-toolbar__icon-btn${filterOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                aria-label="Advanced filters"
-                                onClick={() => {
-                                    setFilterOpen(!filterOpen);
-                                    setAggOpen(false);
-                                    setPivotOpen(false);
-                                    setColsOpen(false);
-                                }}
-                            >
-                                <FilterIcon />
-                                {activeFilterCount > 0 && (
-                                    <span className="ogx-toolbar__dot" aria-label="Filters active" />
-                                )}
-                            </button>
-                        </GridTooltip>
+                    <div ref={filterWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
+                        {renderFilterButton
+                            ? renderFilterButton({
+                                onClick: () => { setFilterOpen(o => !o); setAggOpen(false); setPivotOpen(false); setColsOpen(false); },
+                                isOpen: filterOpen,
+                                activeCount: activeFilterCount,
+                            })
+                            : (
+                                <GridTooltip title="Filters">
+                                    <button
+                                        ref={filterButtonRef}
+                                        className={`ogx-toolbar__icon-btn${filterOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
+                                        aria-label="Advanced filters"
+                                        onClick={() => {
+                                            setFilterOpen(!filterOpen);
+                                            setAggOpen(false);
+                                            setPivotOpen(false);
+                                            setColsOpen(false);
+                                        }}
+                                    >
+                                        <FilterIcon />
+                                        {activeFilterCount > 0 && (
+                                            <span className="ogx-toolbar__dot" aria-label="Filters active" />
+                                        )}
+                                    </button>
+                                </GridTooltip>
+                            )
+                        }
                         {filterOpen && (
                             <FilterPanelWrapper
-                                anchorRef={filterButtonRef}
+                                anchorRef={renderFilterButton ? filterWrapperRef : filterButtonRef}
                                 columns={columns}
                                 filterModel={filterModel || { items: [] }}
                                 onFilterModelChange={onFilterModelChange}
@@ -604,11 +684,9 @@ export function GridToolbar({
                         <GridTooltip title="Pivot">
                             <button
                                 ref={pivotButtonRef}
-                                id="ogx-pivot-btn"
                                 className={`ogx-toolbar__icon-btn${pivotOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
                                 aria-label="Configure pivot"
                                 aria-expanded={pivotOpen}
-                                aria-controls="ogx-pivot-panel"
                                 onClick={() => {
                                     setPivotOpen(!pivotOpen);
                                     setAggOpen(false);
@@ -636,32 +714,39 @@ export function GridToolbar({
                 )}
 
                 {/* Summaries button */}
-                <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                    <GridTooltip title="Summaries">
-                        <button
-                            ref={aggButtonRef}
-                            id="ogx-aggregation-btn"
-                            className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                            aria-label="Configure summaries"
-                            aria-expanded={aggOpen}
-                            aria-controls="ogx-aggregation-panel"
-                            onClick={() => {
-                                setAggOpen(!aggOpen);
-                                setPivotOpen(false);
-                                setColsOpen(false);
-                                setFilterOpen(false);
-                            }}
-                        >
-                            <SigmaIcon />
-                            {activeCount > 0 && (
-                                <span className="ogx-toolbar__dot" aria-label={`${activeCount} active summaries`} />
-                            )}
-                        </button>
-                    </GridTooltip>
+                <div ref={aggWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
+                    {renderAggregationButton
+                        ? renderAggregationButton({
+                            onClick: () => { setAggOpen(o => !o); setPivotOpen(false); setColsOpen(false); setFilterOpen(false); },
+                            isOpen: aggOpen,
+                            activeCount,
+                        })
+                        : (
+                            <GridTooltip title="Summaries">
+                                <button
+                                    ref={aggButtonRef}
+                                    className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
+                                    aria-label="Configure summaries"
+                                    aria-expanded={aggOpen}
+                                    onClick={() => {
+                                        setAggOpen(!aggOpen);
+                                        setPivotOpen(false);
+                                        setColsOpen(false);
+                                        setFilterOpen(false);
+                                    }}
+                                >
+                                    <SigmaIcon />
+                                    {activeCount > 0 && (
+                                        <span className="ogx-toolbar__dot" aria-label={`${activeCount} active summaries`} />
+                                    )}
+                                </button>
+                            </GridTooltip>
+                        )
+                    }
 
                     {aggOpen && (
                         <AggregationPanel
-                            anchorRef={aggButtonRef}
+                            anchorRef={renderAggregationButton ? aggWrapperRef : aggButtonRef}
                             aggregationModel={aggregationModel}
                             aggregableColumns={aggregableColumns}
                             onFunctionChange={handleFunctionChange}
@@ -672,6 +757,9 @@ export function GridToolbar({
                     )}
                 </div>
 
+                {/* Export button slot */}
+                {renderExportButton && renderExportButton()}
+
                 {rightContent}
             </div>
         </div>

package/lib/index.ts

@@ -9,7 +9,7 @@ export { Header } from './components/Header/Header';
 export { Skeleton } from './components/Skeleton/Skeleton';
 export { FilterPanel } from './components/FilterPanel';
 export { GridToolbar } from './components/Toolbar/GridToolbar';
-export type { GridToolbarProps } from './components/Toolbar/GridToolbar';
+export type { GridToolbarProps, ToolbarButtonRenderProps, ToolbarQuickFilterRenderProps } from './components/Toolbar/GridToolbar';
 export { GridTooltip } from './components/Tooltip/Tooltip';
 
 export { useGridApiRef } from './hooks/core/useGridApiRef';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
   "type": "module",
   "main": "./dist/opengridx.umd.js",