fix: resolve duplicate DOM IDs when multiple grids render on the same page (v1.0.7)

Row checkboxes and FilterPanel inputs used data-derived id attributes (row.id,
col.field) without any grid-instance prefix, causing duplicate DOM IDs when two
grids shared the same row IDs or column fields. Switched to React.useId() in
Row and FilterRow so each rendered element gets a stable, globally unique id.

Author: Asif Ansari

demo/App.tsx

@@ -137,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.6</span>
+                            <span className="app-version">v1.0.7</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.6</span>
+                <span className="home-badge">OpenGridX v1.0.7</span>
                 <p className="home-subtitle">
                     The elite, high-performance DataGrid for modern React.
                     Built to handle massive data with a premium developer experience.

lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -109,8 +109,6 @@ export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
                 <div className="ogx-column-visibility-panel__search-container">
                     <SearchIcon />
                     <input
-                        id="ogx-column-search"
-                        name="ogx-column-search"
                         autoComplete="off"
                         className="ogx-column-visibility-panel__search-input"
                         placeholder="Search"

lib/components/DataGrid/DataGrid.css

@@ -177,6 +177,42 @@
   overflow: hidden;
   box-sizing: border-box;
   border-right: 1px solid var(--ogx-grid-border-color);
+  position: relative;
+}
+.ogx__aggregation-cell--pinned-left,
+.ogx__aggregation-cell--pinned-right {
+  position: sticky;
+  z-index: 3;
+  background: var(--ogx-grid-header-background);
+}
+.ogx__aggregation-cell--pinned-right {
+  border-left: 1px solid var(--ogx-grid-border-color);
+}
+.ogx__aggregation-cell--pinned-left-last {
+  overflow: visible;
+}
+.ogx__aggregation-cell--pinned-left-last::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -10px;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
+}
+.ogx__aggregation-cell--pinned-right-first {
+  overflow: visible;
+}
+.ogx__aggregation-cell--pinned-right-first::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -10px;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.1);
 }
 .ogx__aggregation-label {
   font-size: 0.7em;

lib/components/DataGrid/DataGrid.tsx

@@ -685,6 +685,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const hasRowSpanning = React.useMemo(() => effectiveColumns.some(c => !!c.rowSpan), [effectiveColumns]);
     const [columnsPanelOpen, setColumnsPanelOpen] = React.useState(false);
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const standalonePanelRef = React.useRef<HTMLDivElement>(null);
 
     const toolbarProps = React.useMemo(() => {
         if (!slots?.toolbar) return null;
@@ -735,8 +736,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     useEffect(() => {
         if (!columnsPanelOpen || slots?.toolbar) return;
         function handleClickOutside(e: MouseEvent) {
-            const panel = document.getElementById('ogx-standalone-col-panel');
-            if (panel && !panel.contains(e.target as Node)) {
+            if (standalonePanelRef.current && !standalonePanelRef.current.contains(e.target as Node)) {
                 setColumnsPanelOpen(false);
             }
         }
@@ -762,6 +762,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 <GridStandaloneColumnPanel<R>
                     isOpen={columnsPanelOpen}
                     containerRef={containerRef}
+                    panelRef={standalonePanelRef}
                     effectiveColumns={effectiveColumns}
                     columnVisibilityModel={columnVisibilityModel}
                     effectiveColumnOrder={effectiveColumnOrder}
@@ -995,6 +996,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 checkboxSelection={checkboxSelection}
                                 hasDetailPanel={hasDetailPanel}
                                 rowReordering={rowReordering}
+                                pinnedColumns={pinnedColumns}
                             />
                         )}
 

lib/components/DataGrid/GridAggregationFooter.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { formatAggregationValue } from '../../hooks/features/useAggregation';
-import type { GridColDef, GridAggregationModel, GridAggregationResult } from '../../types';
+import type { GridColDef, GridAggregationModel, GridAggregationResult, GridColumnPinning } from '../../types';
+import { calculatePinnedPositions, isColumnPinned } from '../../utils/pinning';
 
 interface GridAggregationFooterProps {
     columns: GridColDef[];
@@ -11,6 +12,7 @@ interface GridAggregationFooterProps {
     checkboxSelection: boolean;
     hasDetailPanel: boolean;
     rowReordering: boolean;
+    pinnedColumns?: GridColumnPinning;
 }
 
 export function GridAggregationFooter({
@@ -22,7 +24,28 @@ export function GridAggregationFooter({
     checkboxSelection,
     hasDetailPanel,
     rowReordering,
+    pinnedColumns,
 }: GridAggregationFooterProps) {
+    // Compute sticky left/right pixel offsets for each pinned column.
+    // The footer always renders checkbox/detail/reorder spacers unconditionally,
+    // so treat pinCheckboxColumn and pinExpandColumn as always true.
+    const pinnedOffsets = useMemo(
+        () => calculatePinnedPositions(
+            columns,
+            columnWidths,
+            pinnedColumns,
+            checkboxSelection,
+            true,
+            hasDetailPanel,
+            true,
+            rowReordering,
+        ),
+        [columns, columnWidths, pinnedColumns, checkboxSelection, hasDetailPanel, rowReordering]
+    );
+
+    const lastLeftField  = pinnedColumns?.left?.[pinnedColumns.left.length - 1];
+    const firstRightField = pinnedColumns?.right?.[0];
+
     return (
         <div
             className="ogx__aggregation-footer"
@@ -40,17 +63,32 @@ export function GridAggregationFooter({
                 const rawValue = aggregationResult[col.field];
                 const colWidth = columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 120);
 
+                const pinnedPosition = isColumnPinned(col.field, pinnedColumns);
+                const pinnedOffset   = pinnedPosition ? pinnedOffsets[col.field] : undefined;
+
+                const className = [
+                    'ogx__aggregation-cell',
+                    pinnedPosition === 'left'  && 'ogx__aggregation-cell--pinned-left',
+                    pinnedPosition === 'right' && 'ogx__aggregation-cell--pinned-right',
+                    pinnedPosition === 'left'  && col.field === lastLeftField   && 'ogx__aggregation-cell--pinned-left-last',
+                    pinnedPosition === 'right' && col.field === firstRightField && 'ogx__aggregation-cell--pinned-right-first',
+                ].filter(Boolean).join(' ');
+
+                const style: React.CSSProperties = {
+                    width: colWidth,
+                    minWidth: colWidth,
+                    maxWidth: colWidth,
+                    textAlign: (col.align as React.CSSProperties['textAlign']) || 'left',
+                };
+                if (pinnedPosition === 'left'  && pinnedOffset !== undefined) style.left  = pinnedOffset;
+                if (pinnedPosition === 'right' && pinnedOffset !== undefined) style.right = pinnedOffset;
+
                 return (
                     <div
                         key={col.field}
-                        className="ogx__aggregation-cell"
+                        className={className}
                         role="gridcell"
-                        style={{
-                            width: colWidth,
-                            minWidth: colWidth,
-                            maxWidth: colWidth,
-                            textAlign: (col.align as React.CSSProperties['textAlign']) || 'left',
-                        }}
+                        style={style}
                     >
                         {fnName ? (
                             <>

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,

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"

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)}

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}