@alaarab/ogrid-react-fluent 2.1.1 → 2.1.2

package/dist/esm/DataGridTable/DataGridTable.js

@@ -71,7 +71,7 @@ function DataGridTableInner(props) {
                     ['--data-table-min-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'max-content' : fitToContent ? 'max-content' : '100%',
                     ['--data-table-total-min-width']: `${minTableWidth}px`,
                     ...(rowHeight ? { ['--ogrid-row-height']: `${rowHeight}px` } : {}),
-                }, children: [_jsx("div", { className: styles.tableScrollContent, children: _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsxs("div", { className: styles.tableWidthAnchor, ref: tableContainerRef, children: [_jsxs(Table, { role: "grid", className: styles.dataTable, children: [_jsx(TableHeader, { className: styles.stickyHeader, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableHeaderCell, { className: styles.selectionHeaderCellWrapper, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox, { checked: allSelected ? true : someSelected ? 'mixed' : false, onChange: (_, data) => handleSelectAll(!!data.checked), "aria-label": "Select all rows" }) }) }, "__selection__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__")), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableHeaderCell, { className: styles.rowNumberHeaderCellWrapper, children: _jsx("div", { className: styles.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__")), row.map((cell, cellIdx) => {
+                }, children: [_jsx("div", { className: styles.tableScrollContent, children: _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsxs("div", { className: styles.tableWidthAnchor, ref: tableContainerRef, children: [_jsxs(Table, { role: "grid", className: styles.dataTable, children: [_jsx(TableHeader, { className: o.stickyHeader ? styles.stickyHeader : undefined, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableHeaderCell, { className: styles.selectionHeaderCellWrapper, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox, { checked: allSelected ? true : someSelected ? 'mixed' : false, onChange: (_, data) => handleSelectAll(!!data.checked), "aria-label": "Select all rows" }) }) }, "__selection__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__")), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableHeaderCell, { className: styles.rowNumberHeaderCellWrapper, children: _jsx("div", { className: styles.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__")), row.map((cell, cellIdx) => {
                                                             if (cell.isGroup) {
                                                                 return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));
                                                             }

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -514,8 +514,6 @@
   font-size: 14px;
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   white-space: nowrap;
-  position: sticky;
-  top: 0;
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
   z-index: 8;
   border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
@@ -657,6 +655,11 @@
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
 }
 
+.stickyHeader :global(.fui-TableHeaderCell) {
+  position: sticky;
+  top: 0;
+}
+
 .stickyHeader .pinnedColLeft,
 .stickyHeader .pinnedColRight {
   top: 0;
@@ -665,6 +668,8 @@
 
 .dataTable .pinnedColLeft {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  border-right: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
+  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
 }
 
 .dataTable :global(.fui-TableHeader) .pinnedColLeft {
@@ -673,6 +678,8 @@
 
 .dataTable .pinnedColRight {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  border-left: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
+  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
 }
 
 .dataTable :global(.fui-TableHeader) .pinnedColRight {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.1"
+    "@alaarab/ogrid-react": "2.1.2"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",