@opencorestack/opengridx 2.0.4 → 2.1.0

package/lib/utils/aggregation/index.ts

@@ -0,0 +1,62 @@
+import type { GridAggregationModel, GridAggregationResult, GridColDef, GridRowModel } from '../../types';
+
+export type BuiltInAggFn = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'unique';
+
+const toNumbers = (values: unknown[]): number[] => {
+    const nums: number[] = [];
+    for (const v of values) {
+        if (v == null) continue;
+        const n = Number(v);
+        if (!isNaN(n)) nums.push(n);
+    }
+    return nums;
+};
+
+// Loops instead of Math.min(...nums): spreading >~120k arguments throws RangeError.
+const minOf = (nums: number[]): number | null => {
+    if (nums.length === 0) return null;
+    let m = nums[0];
+    for (let i = 1; i < nums.length; i++) if (nums[i] < m) m = nums[i];
+    return m;
+};
+
+const maxOf = (nums: number[]): number | null => {
+    if (nums.length === 0) return null;
+    let m = nums[0];
+    for (let i = 1; i < nums.length; i++) if (nums[i] > m) m = nums[i];
+    return m;
+};
+
+export const AGGREGATION_FUNCTIONS: Record<BuiltInAggFn, (values: unknown[]) => unknown> = {
+    sum: (values) => toNumbers(values).reduce((acc, n) => acc + n, 0),
+    avg: (values) => {
+        const nums = toNumbers(values);
+        return nums.length ? nums.reduce((acc, n) => acc + n, 0) / nums.length : null;
+    },
+    count: (values) => values.filter((v) => v != null).length,
+    min: (values) => minOf(toNumbers(values)),
+    max: (values) => maxOf(toNumbers(values)),
+    unique: (values) => new Set(values.filter((v) => v != null)).size,
+};
+
+export function computeAggregations<R extends GridRowModel>(
+    rows: R[],
+    aggregationModel: GridAggregationModel,
+    columnsLookup: Map<string, GridColDef<R>>,
+    warnPrefix: string,
+): GridAggregationResult {
+    const result: GridAggregationResult = {};
+    for (const [field, fnName] of Object.entries(aggregationModel)) {
+        const colDef = columnsLookup.get(field);
+        if (colDef?.availableAggregationFunctions && !colDef.availableAggregationFunctions.includes(fnName)) {
+            continue;
+        }
+        const fn = AGGREGATION_FUNCTIONS[fnName as BuiltInAggFn];
+        if (!fn) {
+            console.warn(`[${warnPrefix}] Unknown aggregation function: "${fnName}"`);
+            continue;
+        }
+        result[field] = fn(rows.map((row) => row[field]));
+    }
+    return result;
+}

package/lib/utils/export/exportToExcelAdvanced.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import ExcelJS from 'exceljs';
+import { exportToExcelAdvanced } from './exportToExcelAdvanced';
+import type { GridColDef, GridGroupedExportRow, GridRowModel } from '../../types';
+
+type Row = GridRowModel & { id: number; dept: string; salary: number };
+
+const columns: GridColDef<Row>[] = [
+    { field: 'dept', headerName: 'Department' },
+    { field: 'salary', headerName: 'Salary', type: 'number' },
+];
+
+const flatRows: Row[] = [
+    { id: 1, dept: 'Engineering', salary: 90000 },
+    { id: 2, dept: 'Engineering', salary: 85000 },
+    { id: 3, dept: 'Marketing', salary: 70000 },
+];
+
+const groupedRows: GridGroupedExportRow[] = [
+    { type: 'group-header', depth: 0, groupField: 'dept', groupValue: 'Engineering' },
+    { type: 'leaf', depth: 1, row: flatRows[0] },
+    { type: 'leaf', depth: 1, row: flatRows[1] },
+    { type: 'group-subtotal', depth: 0, groupField: 'dept', groupValue: 'Engineering', aggregatedValues: { salary: 175000 } },
+    { type: 'group-header', depth: 0, groupField: 'dept', groupValue: 'Marketing' },
+    { type: 'leaf', depth: 1, row: flatRows[2] },
+    { type: 'group-subtotal', depth: 0, groupField: 'dept', groupValue: 'Marketing', aggregatedValues: { salary: 70000 } },
+    { type: 'grand-total', depth: 0, aggregatedValues: { salary: 245000 } },
+];
+
+let capturedBlob: Blob | null = null;
+const origCreateObjectURL = URL.createObjectURL;
+const origRevokeObjectURL = URL.revokeObjectURL;
+const origClick = HTMLAnchorElement.prototype.click;
+
+beforeEach(() => {
+    capturedBlob = null;
+    URL.createObjectURL = (blob: Blob) => { capturedBlob = blob; return 'blob:mock'; };
+    URL.revokeObjectURL = () => {};
+    HTMLAnchorElement.prototype.click = () => {};
+});
+
+afterEach(() => {
+    URL.createObjectURL = origCreateObjectURL;
+    URL.revokeObjectURL = origRevokeObjectURL;
+    HTMLAnchorElement.prototype.click = origClick;
+});
+
+async function readSheet(): Promise<ExcelJS.Worksheet> {
+    const wb = new ExcelJS.Workbook();
+    await wb.xlsx.load(await capturedBlob!.arrayBuffer());
+    return wb.worksheets[0];
+}
+
+const rowValues = (ws: ExcelJS.Worksheet) =>
+    ws.getSheetValues().slice(1).map(r => (Array.isArray(r) ? r.slice(1) : []));
+
+describe('exportToExcelAdvanced — flat', () => {
+    it('writes a header row and one row per record when groupedRows is absent', async () => {
+        await exportToExcelAdvanced(flatRows, columns);
+        const ws = await readSheet();
+        expect(rowValues(ws)).toEqual([
+            ['Department', 'Salary'],
+            ['Engineering', 90000],
+            ['Engineering', 85000],
+            ['Marketing', 70000],
+        ]);
+    });
+});
+
+describe('exportToExcelAdvanced — grouped', () => {
+    it('writes group headers, leaves, subtotals and a single grand total in order', async () => {
+        await exportToExcelAdvanced(flatRows, columns, {
+            groupedRows,
+            aggregationModel: { salary: 'sum' },
+            aggregationResult: { salary: 245000 },
+            sheets: [{ name: 'Data', includeSummary: true }],
+        });
+        const ws = await readSheet();
+        expect(rowValues(ws)).toEqual([
+            ['Department', 'Salary'],
+            ['Department: Engineering'],
+            ['Engineering', 90000],
+            ['Engineering', 85000],
+            ['Subtotal', 175000],
+            ['Department: Marketing'],
+            ['Marketing', 70000],
+            ['Subtotal', 70000],
+            ['Grand Total', 245000],
+        ]);
+    });
+
+    it('outlines leaf rows one level below their group header', async () => {
+        await exportToExcelAdvanced(flatRows, columns, { groupedRows });
+        const ws = await readSheet();
+        expect(ws.getRow(2).outlineLevel ?? 0).toBe(0);
+        expect(ws.getRow(3).outlineLevel).toBe(1);
+        expect(ws.getRow(4).outlineLevel).toBe(1);
+    });
+
+    it('uses groupingValueFormatter for group-header labels', async () => {
+        const cols: GridColDef<Row>[] = [
+            { ...columns[0], groupingValueFormatter: ({ value }) => `Dept ${String(value)}` },
+            columns[1],
+        ];
+        await exportToExcelAdvanced(flatRows, cols, { groupedRows });
+        const ws = await readSheet();
+        expect(ws.getRow(2).getCell(1).value).toBe('Dept Engineering');
+    });
+});

package/lib/utils/export/exportToExcelAdvanced.ts

@@ -1,5 +1,5 @@
 
-import type { GridColDef, GridRowModel, GridAggregationModel } from '../../types';
+import type { GridColDef, GridRowModel, GridAggregationModel, GridGroupedExportRow } from '../../types';
 import { formatAggregationValue } from '../../hooks/features/useAggregation';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -68,6 +68,19 @@ export interface ExcelAdvancedExportOptions {
     aggregationModel?: GridAggregationModel | null;
     /** Currently selected row IDs */
     selectedRows?: (string | number)[];
+    /**
+     * Grouped row structure, typically from `apiRef.current.getGroupedExportRows()`.
+     * When provided, sheets with `rows: 'all'` are written in grouped order: group-header,
+     * leaf, group-subtotal and grand-total rows, using Excel row outlining so groups
+     * collapse natively. A `grand-total` entry replaces the sheet's `includeSummary` row.
+     * Ignored for `rows: 'selected'` sheets.
+     * @since v2.1
+     */
+    groupedRows?: GridGroupedExportRow[];
+    /** Fill color for group-header rows in grouped export (default: '#e8eaf6') */
+    groupHeaderFillColor?: string;
+    /** Fill color for group-subtotal rows in grouped export (default: '#f0f4ff') */
+    groupSubtotalFillColor?: string;
 }
 
 // ─── Cell type inference ──────────────────────────────────────────────────────
@@ -187,6 +200,9 @@ export async function exportToExcelAdvanced<R extends GridRowModel>(
         aggregationResult = null,
         aggregationModel = null,
         selectedRows,
+        groupedRows,
+        groupHeaderFillColor = '#e8eaf6',
+        groupSubtotalFillColor = '#f0f4ff',
     } = options;
 
     // Lazy-load ExcelJS to keep initial bundle lean
@@ -270,7 +286,12 @@ export async function exportToExcelAdvanced<R extends GridRowModel>(
             alternateRowColor = '#f8fafc',
         } = def;
 
-        const rowsToExport = rowScope === 'selected' ? sRows : allRows;
+        const useGrouped = rowScope === 'all' && Boolean(groupedRows && groupedRows.length > 0);
+        const rowsToExport = rowScope === 'selected'
+            ? sRows
+            : useGrouped
+                ? groupedRows!.flatMap(e => (e.type === 'leaf' && e.row ? [e.row] : []))
+                : allRows;
 
         // ─ Pre-fetch images for this sheet ──────────────────────────────────────────
         const imageColumns = exportColumns.filter(col => columnStyles[col.field]?.embedImage);
@@ -343,7 +364,7 @@ export async function exportToExcelAdvanced<R extends GridRowModel>(
         // Header occupies index 0 when present; first data row is at index 1.
         let excelRowIdx = includeHeaders ? 1 : 0;
 
-        rowsToExport.forEach((row, rowIdx) => {
+        const writeDataRow = (row: GridRowModel, rowIdx: number, outlineLevel: number) => {
             const cellValues = exportColumns.map(col => {
                 // Image columns: write empty string; image placed below
                 if (columnStyles[col.field]?.embedImage) return '';
@@ -361,6 +382,7 @@ export async function exportToExcelAdvanced<R extends GridRowModel>(
 
             const dataRow = ws.addRow(cellValues);
             dataRow.font = { size: bodyFontSize };
+            if (outlineLevel > 0) dataRow.outlineLevel = outlineLevel;
 
             // Alternate row background
             if (alternateRowColor && rowIdx % 2 === 1) {
@@ -440,10 +462,72 @@ export async function exportToExcelAdvanced<R extends GridRowModel>(
             }
 
             excelRowIdx++;
-        });
+        };
+
+        const groupLabel = (entry: GridGroupedExportRow): string => {
+            const colDef = exportColumns.find(c => c.field === entry.groupField);
+            if (colDef?.groupingValueFormatter && entry.groupField) {
+                return colDef.groupingValueFormatter({ field: entry.groupField, value: entry.groupValue });
+            }
+            return `${colDef?.headerName ?? entry.groupField ?? ''}: ${String(entry.groupValue ?? '')}`;
+        };
+
+        // Numbers are written raw so the column numFmt applies; other values use the formatter.
+        const aggregateCell = (col: GridColDef<GridRowModel>, values: Record<string, unknown>): unknown => {
+            const val = values[col.field];
+            if (val == null) return '';
+            if (typeof val === 'number') return val;
+            if (col.valueFormatter) return col.valueFormatter({ value: val, row: {} as GridRowModel, field: col.field });
+            return formatAggregationValue(val, aggregationModel?.[col.field] ?? '');
+        };
+
+        const writeSummaryRow = (label: string, values: Record<string, unknown>, fill: string, outlineLevel: number, bold: boolean) => {
+            const cells = exportColumns.map((col, i) => (i === 0 && values[col.field] == null ? label : aggregateCell(col, values)));
+            const summaryRow = ws.addRow(cells);
+            summaryRow.height = 18;
+            if (outlineLevel > 0) summaryRow.outlineLevel = outlineLevel;
+            summaryRow.font = { bold, italic: !bold, size: bodyFontSize, color: { argb: argb(headerTextColor) } };
+            summaryRow.eachCell((cell, colIndex) => {
+                cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: argb(fill) } };
+                const colDef = exportColumns[colIndex - 1];
+                cell.alignment = { horizontal: colIndex === 1 ? 'left' : (colDef?.type === 'number' ? 'right' : 'left'), vertical: 'middle' };
+                cell.border = topBorder();
+            });
+            excelRowIdx++;
+        };
+
+        let wroteGrandTotal = false;
+
+        if (useGrouped) {
+            let stripe = 0;
+            groupedRows!.forEach(entry => {
+                if (entry.type === 'group-header') {
+                    const groupHeaderRow = ws.addRow([groupLabel(entry)]);
+                    groupHeaderRow.height = 18;
+                    if (entry.depth > 0) groupHeaderRow.outlineLevel = entry.depth;
+                    groupHeaderRow.font = { bold: true, size: bodyFontSize, color: { argb: argb(headerTextColor) } };
+                    for (let c = 1; c <= exportColumns.length; c++) {
+                        groupHeaderRow.getCell(c).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: argb(groupHeaderFillColor) } };
+                    }
+                    groupHeaderRow.getCell(1).alignment = { horizontal: 'left', vertical: 'middle', indent: entry.depth };
+                    excelRowIdx++;
+                    stripe = 0;
+                } else if (entry.type === 'leaf' && entry.row) {
+                    writeDataRow(entry.row, stripe++, entry.depth);
+                } else if (entry.type === 'group-subtotal' && entry.aggregatedValues) {
+                    writeSummaryRow('Subtotal', entry.aggregatedValues, groupSubtotalFillColor, entry.depth, false);
+                } else if (entry.type === 'grand-total' && entry.aggregatedValues) {
+                    writeSummaryRow('Grand Total', entry.aggregatedValues, headerFillColor, 0, true);
+                    wroteGrandTotal = true;
+                }
+            });
+            ws.properties.outlineProperties = { summaryBelow: true, summaryRight: false };
+        } else {
+            rowsToExport.forEach((row, rowIdx) => writeDataRow(row, rowIdx, 0));
+        }
 
         // ── Aggregation totals row ────────────────────────────────────────────
-        if (includeSummary && aggregationResult && aggregationModel) {
+        if (includeSummary && !wroteGrandTotal && aggregationResult && aggregationModel) {
             // Label row
             const labelValues = exportColumns.map(col => {
                 const fn = aggregationModel![col.field];

package/lib/utils/scroll/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Vertically scrolls the grid viewport so the center (unpinned) row at `centerIndex`
+ * is fully visible below the sticky header / top-pinned rows and above the
+ * bottom-pinned rows. `cumulativeHeights` is the unpinned-row layout.
+ */
+export function scrollRowIntoView(
+    viewport: HTMLElement,
+    centerIndex: number,
+    cumulativeHeights: number[],
+    pinnedBottomHeight: number,
+): void {
+    if (centerIndex < 0 || centerIndex >= cumulativeHeights.length) return;
+    const virtualContainer = viewport.querySelector<HTMLElement>('.ogx__virtual-container');
+    if (!virtualContainer) return;
+
+    const { scrollTop, clientHeight } = viewport;
+    // Everything above the center rows is sticky, so it covers exactly this many
+    // pixels at the top of the viewport at any scroll position.
+    const stickyTop = virtualContainer.getBoundingClientRect().top - viewport.getBoundingClientRect().top + scrollTop;
+    const rowTop = stickyTop + (centerIndex === 0 ? 0 : cumulativeHeights[centerIndex - 1]);
+    const rowBottom = stickyTop + cumulativeHeights[centerIndex];
+
+    if (rowTop < scrollTop + stickyTop) {
+        viewport.scrollTop = Math.max(0, rowTop - stickyTop);
+    } else if (rowBottom > scrollTop + clientHeight - pinnedBottomHeight) {
+        viewport.scrollTop = rowBottom - clientHeight + pinnedBottomHeight;
+    }
+}

package/llms.txt

@@ -1,6 +1,6 @@
 # OpenGridX — AI Agent Context
 # Package: @opencorestack/opengridx
-# Version: 2.0.4
+# Version: 2.1.0
 # Docs: https://opencorestack.github.io/OpenGridX/
 # This file is machine-readable. AI developers: start here.
 
@@ -67,8 +67,11 @@ export default function App() {
 ### Display
 | Prop              | Type      | Default | Description                            |
 |-------------------|-----------|---------|----------------------------------------|
-| height            | number    | 500     | Grid height in pixels                  |
+| height            | number/string | —     | Grid height. The grid must have a BOUNDED height or it renders every row (see GOTCHAS) |
 | autoHeight        | boolean   | false   | Fit height to rows                     |
+| overscanRowCount  | number    | 3       | Minimum rows rendered outside the viewport (adaptive) |
+| ariaLabel         | string    | —       | Accessible name for the grid          |
+| localeText        | GridLocaleText | —  | Override pagination / no-rows strings |
 | rowHeight         | number    | 52      | Row height in pixels                   |
 | headerHeight      | number    | 56      | Header height in pixels                |
 | loading           | boolean   | false   | Show skeleton loading overlay          |
@@ -79,6 +82,8 @@ export default function App() {
 | Prop                       | Type                          | Description                         |
 |----------------------------|-------------------------------|-------------------------------------|
 | checkboxSelection          | boolean                       | Enable checkbox column              |
+| disableMultipleRowSelection | boolean                     | Cap selection to one row            |
+| pinCheckboxColumn          | boolean (default true)        | Pin the checkbox column left        |
 | rowSelectionModel          | GridRowId[]                   | Controlled selection                |
 | onRowSelectionModelChange  | (model: GridRowId[]) => void  | Selection change callback           |
 | disableRowSelectionOnClick | boolean                       | Prevent click toggling selection    |
@@ -87,9 +92,9 @@ export default function App() {
 | Prop              | Type                        | Description                     |
 |-------------------|-----------------------------|----------------------------------|
 | sortModel         | GridSortItem[]              | Controlled sort state            |
+| multiSort         | boolean                     | Plain click appends to sortModel (Shift+click always does) |
 | onSortModelChange | (model: GridSortItem[]) => void | Sort change callback          |
 | sortingMode       | 'client' / 'server'         | Where sorting is applied         |
-| disableColumnSorting | boolean                  | Disable sorting for all columns  |
 
 ### Filtering
 | Prop                | Type                           | Description                       |
@@ -97,7 +102,6 @@ export default function App() {
 | filterModel         | GridFilterModel                | Controlled filter state           |
 | onFilterModelChange | (model: GridFilterModel) => void | Filter change callback          |
 | filterMode          | 'client' / 'server'            | Where filtering is applied        |
-| disableColumnFilter | boolean                        | Disable filter for all columns    |
 
 ### Pagination
 | Prop                    | Type                                    | Description                      |
@@ -119,7 +123,6 @@ export default function App() {
 | columnOrder               | string[]                  | Controlled column order                   |
 | onColumnOrderChange       | (params) => void          | Column reorder callback                   |
 | disableColumnReorder      | boolean                   | Disable drag-to-reorder                   |
-| disableColumnResize       | boolean                   | Disable resize handles                    |
 | columnGroupingModel       | GridColumnGroupingModel   | Multi-level column header groups          |
 
 ### Row Features
@@ -129,8 +132,6 @@ export default function App() {
 | rowReordering     | boolean                   | Enable drag-and-drop row reordering       |
 | onRowOrderChange  | (params) => void          | Row reorder callback                      |
 | getRowId          | (row: R) => GridRowId     | Custom row ID accessor (default: row.id)  |
-| getRowClassName   | (params) => string        | Dynamic CSS class per row                 |
-| getRowHeight      | (params) => number        | Dynamic row height                        |
 
 ### Cell Editing
 | Prop                    | Type                       | Description                             |
@@ -143,15 +144,18 @@ export default function App() {
 | Prop                    | Type                       | Description                             |
 |-------------------------|----------------------------|-----------------------------------------|
 | getDetailPanelContent   | (params) => ReactNode      | Render expanded detail row              |
+| pinExpandColumn         | boolean (default true)     | Pin the detail-panel expand column      |
 | getDetailPanelHeight    | (params) => number / 'auto'| Height of detail panel                  |
-| expandedRowIds          | Set<GridRowId>             | Controlled expanded rows                |
+| detailPanelExpandedRowIds | Set<GridRowId>             | Controlled expanded rows                |
 | onDetailPanelExpandedRowIdsChange | (ids) => void  | Expand/collapse callback               |
 
 ### Grouping & Aggregation
 | Prop                   | Type                      | Description                              |
 |------------------------|---------------------------|------------------------------------------|
-| rowGroupingModel       | string[]                  | Fields to group by                       |
+| rowGroupingModel       | string[]                  | Fields to group by (one nesting level per field). Disables pagination |
 | aggregationModel       | GridAggregationModel      | {field: 'sum'/'avg'/'min'/'max'/'count'} |
+| onAggregationModelChange | (model) => void        | Aggregation model changed                |
+| groupingColDef         | Partial<GridColDef>       | Dedicated pinned __group__ column        |
 | getAggregationPosition | (group) => 'footer'/'inline' | Where to render aggregation row       |
 | defaultGroupingExpansionDepth | number             | Auto-expand depth (default -1 = all)     |
 
@@ -179,8 +183,8 @@ export default function App() {
 |--------------|-----------------------|------------------------------------------|
 | slots        | GridSlots             | Replace toolbar, pagination, overlays    |
 | slotProps    | GridSlotProps         | Props for slot components                |
-| theme        | GridTheme             | Override theme tokens                    |
-| sx           | React.CSSProperties   | Inline styles on the root element        |
+| className    | string                | Extra CSS class on the root element      |
+| style        | React.CSSProperties   | Inline styles on the root element (use DataGridThemeProvider for theming) |
 
 ### Callbacks
 | Prop              | Type                  | Description                   |
@@ -473,8 +477,9 @@ interface GridColumnPinning   { left?: string[]; right?: string[]; }
 interface GridRowPinning      { top?: GridRowId[]; bottom?: GridRowId[]; }
 
 interface GridRenderCellParams<R = GridRowModel> {
-  value: any; row: R; field: string;
+  value: unknown; formattedValue?: string; row: R; field: string;
   colDef: GridColDef<R>; rowIndex: number; colIndex: number;
+  rowMeta?: GridRowMeta; // hierarchy info for tree-data / grouping rows
 }
 
 interface GridDataSource {
@@ -501,4 +506,8 @@ interface GridGetRowsResponse { rows: GridRowModel[]; rowCount: number; }
 7. **`singleSelect` editing**: for dropdown editors in cells, set `type: 'singleSelect'` and provide `valueOptions`.
 8. **`initialState.columns.columnWidths`**: accepts `Record<string, number>` to restore saved column widths.
 9. **`pinnedColumns`** and **`columnWidths`** are independent state — pinning does not reset widths.
-10. **Aggregation** requires `rowGroupingModel` OR a global footer via `getAggregationPosition={() => 'footer'}`.
+10. **Aggregation**: setting `aggregationModel` alone renders a sticky footer with the totals; with `rowGroupingModel` each group row also shows its own aggregates. `null`/`undefined` values are ignored by every function.
+11. **GOTCHAS — bounded height**: virtualization only works if the grid's container has a bounded height. A flex child without `min-height: 0` grows to fit every row, so every row is rendered. Pagination hides this, and row grouping turns pagination off. Use `<div style={{ flex: 1, minHeight: 0 }}>` around `height="100%"`, or pass a fixed pixel `height`. Dev builds log a warning when this happens.
+12. **Pagination is ignored under row grouping** — a grouped grid is one scrollable, virtualized list.
+13. **`valueFormatter` + `renderCell`**: `renderCell` receives `params.formattedValue` (v2.1+), so a custom renderer can reuse the formatter instead of duplicating it.
+14. **`slots.footer`** replaces the pagination area and receives `aggregationResult`, `rowCount`, `paginationModel`, `onPaginationModelChange` and `apiRef` (v2.1+).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "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",
@@ -41,8 +41,10 @@
     "build:lib": "tsc --project tsconfig.build.json && vite build --config vite.config.lib.js && cp lib/styles/opengridx.css.d.ts dist/opengridx.css.d.ts",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "vitest run --project unit",
+    "test:browser": "vitest run --project browser",
+    "test:all": "vitest run",
+    "test:watch": "vitest --project unit",
     "coverage": "vitest run --coverage",
     "prepublishOnly": "npm run build:lib"
   },
@@ -103,6 +105,7 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -111,6 +114,7 @@
     "jsdom": "^29.1.1",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.8",
+    "playwright": "^1.58.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.1",