@alaarab/ogrid-react-fluent 2.0.11 → 2.0.13

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

@@ -4,315 +4,166 @@
   flex-direction: column;
   width: 100%;
   min-width: 0;
-  min-height: 100%;
-  /* Match wrapper so any gap to the right is not transparent (no purple stripe showing through) */
-  background-color: var(--colorNeutralBackground1, #ffffff);
+  background: var(--ogrid-bg, #fff);
 }
 
 .tableWidthAnchor {
   position: relative;
-  /* When table fits (data-auto-fit): fill 100% so last column gets space. When overflow: size to content for scroll. */
   width: max-content;
-  background-color: var(--colorNeutralBackground1, #ffffff);
-}
-
-/* When table fits in container: fill full width so columns (including Tags) use the space, no dead zone on the right */
-.tableWrapper[data-auto-fit=true] .tableWidthAnchor {
-  width: 100%;
+  min-width: var(--data-table-min-width, max-content);
+  background: var(--ogrid-bg, #fff);
 }
 
-/* Always use full container width (matches pagination); columns fill the space */
 .tableWrapper {
   position: relative;
   flex: 1;
   min-height: 0;
-  /* Default: no horizontal scroll unless we explicitly allow overflow (wide tables). */
   overflow-x: hidden;
   overflow-y: auto;
   width: 100%;
   min-width: 0;
   max-width: 100%;
   box-sizing: border-box;
-  /* Border is applied to the grid itself so we don't draw an empty bordered area
-     when the grid content is narrower than the container. */
-  border: none;
-  background-color: var(--colorNeutralBackground1, #ffffff);
-  -webkit-overflow-scrolling: touch;
+  background: var(--ogrid-bg, #fff);
   will-change: scroll-position;
-  /* Wide tables: allow horizontal scroll */
 }
 .tableWrapper[data-overflow-x=true] {
   overflow-x: auto;
 }
-.tableWrapper {
-  /* Empty state: no horizontal scroll – can't scroll right into white space */
-}
 .tableWrapper[data-empty=true] {
   overflow-x: hidden;
 }
-.tableWrapper {
-  /* Scoped by data-column-count so our overrides apply; variable is set on this wrapper */
-}
-.tableWrapper[data-column-count] :global {
-  /* Let the grid/table size to its content.
-     This avoids "last column becomes a giant spacer" when the container is wider than the columns,
-     and keeps header actions (sort/filter) from drifting all the way to the far right.
-     The wrapper still stays width:100% so pagination aligns. */
-}
-.tableWrapper[data-column-count] :global .fui-DataGrid {
-  /* Width behavior is controlled by a CSS var from the React wrapper. */
-  width: var(--data-table-width, fit-content) !important;
-  max-width: 100% !important;
-  min-width: var(--data-table-min-width, max-content) !important;
-  box-sizing: border-box !important;
-  overflow: hidden;
-}
-.tableWrapper[data-column-count] :global {
-  /* Use auto layout so Fluent sizing/resize works naturally. */
-}
-.tableWrapper[data-column-count] :global .fui-DataGrid .fui-Table {
-  width: var(--data-table-width, fit-content) !important;
-  max-width: 100% !important;
-  min-width: var(--data-table-min-width, max-content) !important;
-  table-layout: auto !important;
-  box-sizing: border-box !important;
-  border: none !important;
-  outline: none !important;
-}
-.tableWrapper[data-column-count] :global {
-  /* Rows span full table width */
-}
-.tableWrapper[data-column-count] :global .fui-DataGrid .fui-TableRow,
-.tableWrapper[data-column-count] :global .fui-DataGrid .fui-DataGridRow {
-  width: 100% !important;
-  min-width: 100% !important;
-}
-.tableWrapper[data-column-count] :global .fui-DataGridHeader {
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-}
-.tableWrapper[data-column-count] :global {
-  /* Let Fluent's column sizing system own widths (resizableColumns + columnSizingOptions).
-     We only enforce a min-width + sane box sizing. */
-}
-.tableWrapper[data-column-count] :global .fui-DataGridHeaderCell,
-.tableWrapper[data-column-count] :global .fui-DataGridCell {
-  /* Do NOT use !important here: Fluent sets inline width/min/max during resize. */
-  min-width: 80px;
-  box-sizing: border-box !important;
-}
-.tableWrapper[data-column-count] :global .fui-DataGridHeaderCell {
-  min-width: var(--data-table-cell-min-width, 80px);
-  white-space: nowrap !important;
-  position: sticky; /* Changed from relative - enables vertical sticky for all headers */
-  top: 0; /* Sticky vertically */
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-  z-index: 8; /* Stack above body cells */
-  font-size: 14px;
-  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
-}
-.tableWrapper[data-column-count] :global {
-  /* No extra right border on last column – wrapper provides right edge (row may have trailing <i> so use last-of-type) */
-}
-.tableWrapper[data-column-count] :global .fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type,
-.tableWrapper[data-column-count] :global .fui-DataGridBody .fui-DataGridRow .fui-DataGridCell:last-of-type {
-  border-right: none !important;
-}
-.tableWrapper[data-column-count] :global .fui-DataGridCell {
-  min-width: var(--data-table-cell-min-width, 80px);
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  font-size: 12px;
-  padding: 0 !important;
-  height: 1px;
-  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
-  /* Prevent long unbroken content from forcing intrinsic widths / overlap */
-}
-.tableWrapper[data-column-count] :global .fui-DataGridCell > * {
-  min-width: 0;
-}
-.tableWrapper[data-column-count] :global .fui-DataGridCell .fui-TableCellLayout {
-  font-size: 12px;
-}
-.tableWrapper[data-column-count] :global {
-  /* Resize handle: contained so focus ring doesn't create a purple stripe to the right */
-}
-.tableWrapper[data-column-count] :global .fui-DataGridHeaderCell__aside {
-  display: flex !important;
-  cursor: col-resize !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  width: 16px !important;
-  z-index: 1 !important;
-  outline: none !important;
-  border-radius: 0 !important;
-}
-.tableWrapper[data-column-count] :global {
-  /* Fix: Fluent renders a resize handle on the last header cell.
-     The handle has negative horizontal margins (hit target), which bleeds past the table edge
-     and makes the last header look like it has extra space vs the body cells.
-     Hide the resize affordance on the last column header. */
-}
-.tableWrapper[data-column-count] :global .fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type .fui-DataGridHeaderCell__aside,
-.tableWrapper[data-column-count] :global .fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type .fui-TableResizeHandle {
-  display: none !important;
-}
-.tableWrapper[data-column-count] :global {
-  /* No extra bottom border: last row (row + cells) – wrapper provides bottom edge so no double line */
-}
-.tableWrapper[data-column-count] :global .fui-DataGridBody .fui-DataGridRow:last-child {
-  border-bottom: none !important;
-}
-.tableWrapper[data-column-count] :global .fui-DataGridBody .fui-DataGridRow:last-child .fui-DataGridCell {
-  border-bottom: none !important;
-}
-.tableWrapper[data-column-count] :global .fui-Link {
-  color: var(--colorBrandForeground1, #0f6cbd) !important;
-  font-weight: 600 !important;
-  text-decoration: none !important;
-}
-.tableWrapper[data-column-count] :global .fui-Link:hover {
-  text-decoration: underline !important;
-  color: var(--colorBrandForeground1Hover, #115ea3) !important;
-}
-.tableWrapper[data-column-count] :global .fui-Link:active {
-  color: var(--colorBrandForeground1Pressed, #0c3b5e) !important;
-}
-.tableWrapper {
-  /* When table fits: fill 100% and distribute column width evenly so last column (e.g. Tags) isn't tiny */
-}
-.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGrid {
-  width: 100% !important;
-}
-.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGrid .fui-Table {
-  width: 100% !important;
-}
-.tableWrapper[data-auto-fit=true][data-column-count] :global {
-  /* Equal base width for all columns — override Fluent's inline width/min-width/max-width */
-}
-.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGridHeaderCell,
-.tableWrapper[data-auto-fit=true][data-column-count] :global .fui-DataGridCell {
-  width: calc(100% / var(--data-table-column-count, 1)) !important;
-  min-width: 0 !important;
-  max-width: none !important;
-}
-.tableWrapper {
-  /* Selection column must stay 48px even in auto-fit mode (needs same specificity depth to win) */
-}
-.tableWrapper[data-auto-fit=true][data-column-count] .selectionHeaderCellWrapper, .tableWrapper[data-auto-fit=true][data-column-count] .selectionCellWrapper {
-  width: 48px !important;
-  min-width: 48px !important;
-  max-width: 48px !important;
-}
-.tableWrapper {
-  /* Row numbers column must stay 50px even in auto-fit mode */
-}
-.tableWrapper[data-auto-fit=true][data-column-count] .rowNumberHeaderCellWrapper, .tableWrapper[data-auto-fit=true][data-column-count] .rowNumberCellWrapper {
-  width: 50px !important;
-  min-width: 50px !important;
-  max-width: 50px !important;
-}
-.tableWrapper {
-  /* Hide resize handle on last column only when table fits (autoFitColumns); when overflow/scroll, last column can resize (Fluent docs) */
-}
-.tableWrapper[data-column-count][data-auto-fit=true] :global(.fui-DataGridHeader .fui-DataGridRow .fui-DataGridHeaderCell:last-of-type .fui-DataGridHeaderCell__aside) {
-  display: none !important;
-}
-
-.dataGrid {
-  min-width: 0;
+.tableWrapper[data-loading=true] {
+  min-height: 200px;
 }
 
-.groupHeaderRow th {
-  background: var(--ogrid-header-bg, #f5f5f5);
+.dataTable {
+  width: var(--data-table-width, fit-content);
+  max-width: 100%;
+  min-width: var(--data-table-min-width, max-content);
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  table-layout: auto;
+  background-color: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
 
 .groupHeaderCell {
   text-align: center;
   font-weight: 600;
-  border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
-  padding: 6px 10px;
-}
-
-.leafHeaderCellSpan {
-  font-weight: 600;
+  border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   padding: 6px 10px;
   background: var(--ogrid-header-bg, #f5f5f5);
 }
 
-.selectionHeaderCellWrapper {
-  width: 48px !important;
-  min-width: 48px !important;
-  max-width: 48px !important;
-  padding: 0 !important;
-}
-
-.selectionCellWrapper {
-  width: 48px !important;
-  min-width: 48px !important;
-  max-width: 48px !important;
-  padding: 0 !important;
-}
-
-.rowNumberHeaderCellWrapper {
-  width: 50px !important;
-  min-width: 50px !important;
-  max-width: 50px !important;
-  padding: 0 !important;
-}
-
-.rowNumberCellWrapper {
-  width: 50px !important;
-  min-width: 50px !important;
-  max-width: 50px !important;
-  padding: 0 !important;
-}
-
-.selectionHeaderCell {
+.headerCellContent {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  gap: 4px;
 }
 
-.selectionCell {
+.headerMenuTrigger {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+  opacity: 1;
+  transition: background-color 0.15s;
+  border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
+  min-width: 20px;
+  height: 20px;
+}
+.headerMenuTrigger:hover {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.headerMenuTrigger:active {
+  background: var(--ogrid-active-bg, rgba(0, 0, 0, 0.08));
+}
+.headerMenuTrigger:focus-visible {
+  outline: 2px solid var(--ogrid-accent, #0078d4);
+  outline-offset: 2px;
 }
 
-.rowNumberHeaderCell,
-.rowNumberCell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--colorNeutralForeground3, #666);
-  background: var(--colorNeutralBackground3, #f5f5f5);
+.dropIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--ogrid-selection-color, #217346);
+  pointer-events: none;
+  z-index: 100;
+  transition: left 0.05s;
 }
 
-.selectedRow :global .fui-DataGridCell {
-  background-color: var(--colorNeutralBackground1Selected, #e6f0fb) !important;
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 1;
+}
+.resizeHandle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 3px;
+  bottom: 0;
+  width: 2px;
+}
+.resizeHandle:hover::after {
+  background-color: var(--ogrid-accent, #0078d4);
+}
+.resizeHandle:active::after {
+  background-color: var(--ogrid-accent-dark, #005a9e);
 }
 
-.selectableGrid :global .fui-DataGridBody .fui-DataGridRow:hover .fui-DataGridCell {
-  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
-  cursor: pointer;
+.pinnedColLeft {
+  position: sticky;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
 }
-.selectableGrid :global .fui-DataGridBody .fui-DataGridRow:hover.selectedRow .fui-DataGridCell {
-  background-color: var(--colorNeutralBackground1Hover, #dae8f8) !important;
+.pinnedColLeft::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -4px;
+  bottom: -1px;
+  width: 4px;
+  background: linear-gradient(to right, var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)), transparent);
+  pointer-events: none;
 }
 
-.selectableGrid :global(.fui-DataGridBody .fui-DataGridRow) {
-  cursor: pointer;
+.pinnedColRight {
+  position: sticky;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
+}
+.pinnedColRight::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -4px;
+  bottom: -1px;
+  width: 4px;
+  background: linear-gradient(to left, var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)), transparent);
+  pointer-events: none;
+}
+
+.freezeColFirst {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
 }
 
 .cellContent {
@@ -320,7 +171,7 @@
   height: 100%;
   display: flex;
   align-items: center;
-  padding: 4px 8px;
+  min-width: 0;
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -328,29 +179,33 @@
   user-select: none;
   outline: none;
 }
+.cellContent:focus-visible {
+  outline: none;
+}
 
 .activeCellContent {
-  outline: 2px solid var(--ogrid-selection, #217346) !important;
+  outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
   z-index: 2;
   position: relative;
   overflow: visible;
+  background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
 
 .cellInRange {
-  background-color: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
 }
 
 :global([data-drag-range]) {
-  background-color: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
 }
 
 :global([data-drag-anchor]) {
-  background-color: var(--colorNeutralBackground1, #fff) !important;
+  background: var(--ogrid-bg, #fff) !important;
 }
 
 .cellCut {
-  background-color: var(--colorNeutralBackground1Hover, rgba(0, 0, 0, 0.04)) !important;
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
   opacity: 0.7;
 }
 
@@ -360,7 +215,7 @@
   bottom: -3px;
   width: 7px;
   height: 7px;
-  background: var(--ogrid-selection, #217346);
+  background: var(--ogrid-selection-color, #217346);
   border: 1px solid var(--ogrid-bg, #fff);
   border-radius: 1px;
   cursor: crosshair;
@@ -368,74 +223,21 @@
   z-index: 3;
 }
 
-/* Freeze panes: sticky header when freezeRows >= 1 */
-.stickyHeader {
-  /* Removed position: sticky; top: 0; - breaks horizontal sticky on pinned columns.
-     Instead, apply sticky to individual header cells (.fui-DataGridHeaderCell). */
-  z-index: 8;
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-}
-
-/* Freeze panes: sticky first column(s) when freezeCols >= 1; only first column gets left: 0 (multi-column needs width measurement) */
-.freezeColFirst {
-  position: sticky;
-  left: 0;
-  z-index: 6;
-  background-color: var(--colorNeutralBackground1, #ffffff);
-  will-change: transform;
-}
-
-:global(.fui-DataGridHeader) .freezeColFirst {
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-}
-
-/* Freeze/pinned header cells need top: 0 + highest z-index so they stick in BOTH
-   directions — left/right (from .freezeCol/.pinnedCell) AND top (from .stickyHeader).
-   Without explicit top, the child's own position: sticky overrides the parent's. */
-.stickyHeader .freezeColFirst,
-.stickyHeader .pinnedLeft,
-.stickyHeader .pinnedRight {
-  top: 0;
-  z-index: 10; /* Increased from 9 to stack above base header cells (z-index: 8) */
-}
-
-.activeRow :global .fui-DataGridCell:not(:has(.activeCellContent)) {
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-}
-
-.pinnedCell {
-  position: sticky;
-  z-index: 6;
-  background-color: inherit;
-  will-change: transform;
-}
-
-.pinnedLeft {
-  left: 0;
-}
-.pinnedLeft::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -4px;
-  bottom: 0;
-  width: 4px;
-  background: linear-gradient(to right, var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)), transparent);
-  pointer-events: none;
+.selectionHeaderCellInner,
+.selectionCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
 }
 
-.pinnedRight {
-  right: 0;
-}
-.pinnedRight::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -4px;
-  bottom: 0;
-  width: 4px;
-  background: linear-gradient(to left, var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)), transparent);
-  pointer-events: none;
+.rowNumberHeaderCellInner,
+.rowNumberCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
 }
 
 .statusBar {
@@ -443,15 +245,13 @@
   align-items: center;
   gap: 16px;
   width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
   padding: 6px 12px;
+  box-sizing: border-box;
   font-size: 12px;
-  color: var(--colorNeutralForeground2, #616161);
-  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
-  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  background: var(--ogrid-header-bg, #f5f5f5);
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   min-height: 28px;
-  user-select: none;
 }
 
 .statusBarItem {
@@ -461,20 +261,18 @@
 }
 .statusBarItem:not(:last-child)::after {
   content: "";
-  display: inline-block;
   width: 1px;
   height: 14px;
-  background-color: var(--colorNeutralStroke1, #c4c4c4);
+  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
   margin-left: 12px;
 }
 
 .statusBarLabel {
-  color: var(--colorNeutralForeground3, #707070);
-  font-weight: 400;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
 
 .statusBarValue {
-  color: var(--colorNeutralForeground1, #242424);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   font-weight: 600;
 }
 
@@ -483,11 +281,10 @@
   z-index: 10000;
   min-width: 160px;
   padding: 4px 0;
-  background: var(--colorNeutralBackground1, #fff);
-  border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
-  border-radius: var(--borderRadiusMedium, 4px);
-  box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
-  outline: none;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
 }
 
 .contextMenuItem {
@@ -502,10 +299,10 @@
   font-size: 13px;
   text-align: left;
   cursor: pointer;
-  color: var(--colorNeutralForeground1, #242424);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
 .contextMenuItem:hover:not(:disabled) {
-  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
 .contextMenuItem:disabled {
   opacity: 0.5;
@@ -517,14 +314,14 @@
 }
 
 .contextMenuItemShortcut {
-  color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
   font-size: 0.85em;
 }
 
 .contextMenuDivider {
   height: 1px;
   margin: 4px 0;
-  background-color: var(--colorNeutralStroke2, #e0e0e0);
+  background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
 
 .loadingOverlay {
@@ -534,7 +331,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--ogrid-loading-bg, rgba(255, 255, 255, 0.7));
+  background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
   backdrop-filter: blur(1px);
   pointer-events: all;
 }
@@ -545,22 +342,21 @@
   align-items: center;
   gap: 8px;
   padding: 16px 24px;
-  background: var(--colorNeutralBackground1, #ffffff);
-  border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
-  border-radius: var(--borderRadiusMedium, 4px);
-  box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  box-shadow: var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
 }
 
 .loadingOverlayText {
   font-size: 13px;
   font-weight: 500;
-  color: var(--colorNeutralForeground2, #616161);
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
 }
 
 .loadingDimmed {
   opacity: 0.6;
   pointer-events: none;
-  transition: opacity 0.15s ease;
 }
 
 .emptyStateInGrid {
@@ -571,47 +367,29 @@
   text-align: center;
   padding: 20px 16px;
   min-height: 88px;
-  min-width: 0;
   width: 100%;
   box-sizing: border-box;
-  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
-  background-color: var(--colorNeutralBackground2, #fafafa);
-}
-
-.emptyStateInGridMessageSticky {
-  position: sticky;
-  left: 50%;
-  transform: translateX(-50%);
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.emptyStateInGridIcon {
-  font-size: 24px;
-  margin-bottom: 8px;
-  opacity: 0.6;
+  border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  background: var(--ogrid-header-bg, #f5f5f5);
 }
 
 .emptyStateInGridTitle {
   font-size: 14px;
   font-weight: 600;
-  color: var(--colorNeutralForeground1, #242424);
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   margin-bottom: 4px;
 }
 
 .emptyStateInGridMessage {
   font-size: 13px;
-  color: var(--colorNeutralForeground2, #616161);
-  max-width: 100%;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
   line-height: 1.5;
 }
 
 .emptyStateInGridLink {
   background: none;
   border: none;
-  color: var(--colorBrandForeground1, #0f6cbd);
+  color: var(--ogrid-accent, #0078d4);
   text-decoration: underline;
   cursor: pointer;
   padding: 0;
@@ -619,53 +397,288 @@
   font-family: inherit;
 }
 .emptyStateInGridLink:hover {
-  color: var(--colorBrandForeground1Hover, #115ea3);
+  color: var(--ogrid-accent-dark, #005a9e);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  border-top-color: var(--ogrid-accent, #0078d4);
+  border-radius: 50%;
+  animation: ogrid-spin 0.8s linear infinite;
+}
+
+@keyframes ogrid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* ─── OGrid Theme Variables ─── */
+/* Bridge Fluent UI tokens -> ogrid CSS variables so headless components (SideBar, etc.)
+   automatically follow the active FluentProvider theme (light or dark). */
+:global(:root) {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: #f3f2f1;
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+
+/* Page-level dark mode (for body background, non-FluentProvider elements) */
+:global([data-theme="dark"]) {
+  --ogrid-bg: #1b1b1f;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: #2c2c2c;
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.04);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.2);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.5);
+}
+
+/* Inside FluentProvider: derive --ogrid-* from Fluent tokens so light/dark follows automatically */
+:global(.fui-FluentProvider) {
+  --ogrid-bg: var(--colorNeutralBackground1, #ffffff);
+  --ogrid-fg: var(--colorNeutralForeground1, rgba(0, 0, 0, 0.87));
+  --ogrid-fg-secondary: var(--colorNeutralForeground2, rgba(0, 0, 0, 0.6));
+  --ogrid-fg-muted: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.5));
+  --ogrid-border: var(--colorNeutralStroke2, rgba(0, 0, 0, 0.12));
+  --ogrid-header-bg: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  --ogrid-hover-bg: var(--colorSubtleBackgroundHover, rgba(0, 0, 0, 0.04));
+  --ogrid-selected-row-bg: var(--colorNeutralBackground1Selected, #e6f0fb);
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: var(--colorBrandForeground1, #0078d4);
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
 }
 
-/* Column reorder drop indicator */
-.dropIndicator {
-  position: absolute;
+.tableScrollContent {
+  min-height: 100%;
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+
+.tableWidthAnchor {
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+
+.tableWrapper {
+  border: none;
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+  -webkit-overflow-scrolling: touch;
+  outline: none;
+}
+
+.dataTable {
+  table-layout: auto !important;
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+
+.dataTable :global(.fui-TableHeaderCell),
+.dataTable :global(.fui-TableCell) {
+  min-width: 80px;
+  box-sizing: border-box;
+  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  font-size: 13px;
+  vertical-align: middle;
+}
+
+.dataTable :global(.fui-TableHeaderCell) {
+  padding: 6px 10px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+  white-space: nowrap;
+  position: sticky;
   top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--ogrid-primary, #217346);
-  pointer-events: none;
-  z-index: 100;
-  transition: left 0.05s;
+  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));
+}
+.dataTable :global(.fui-TableHeaderCell) > :global(.fui-TableHeaderCell__button) {
+  position: static !important;
+}
+.dataTable :global(.fui-TableHeaderCell):focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
+  outline-offset: -2px;
+  z-index: 11;
 }
 
-/* Empty state: hide body, keep header and empty message */
-.tableWrapper[data-empty=true] :global(.fui-DataGrid) tbody {
-  display: none;
+.dataTable :global(.fui-TableCell) {
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  height: 1px;
+  border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  position: relative;
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  /* Prevent long unbroken content from forcing intrinsic widths / overlap */
+}
+.dataTable :global(.fui-TableCell) > * {
+  min-width: 0;
+}
+.dataTable :global(.fui-TableCell):focus-visible {
+  outline: none;
 }
 
-/* Empty state: no extra bottom border (header row is last row, remove its border-bottom) */
-.tableWrapper[data-empty=true] :global(.fui-DataGridHeader .fui-DataGridRow) {
-  border-bottom: none !important;
+/* No extra right border on last column */
+.dataTable :global(.fui-TableHeaderCell:last-of-type),
+.dataTable :global(.fui-TableCell:last-of-type) {
+  border-right: none;
 }
 
-.headerCellContent {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+/* No extra bottom border on last row */
+.dataTable :global(.fui-TableBody .fui-TableRow:last-child .fui-TableCell) {
+  border-bottom: none;
 }
 
-.headerMenuTrigger {
-  background: transparent;
-  border: none;
+/* Row hover */
+.dataTable :global(.fui-TableBody .fui-TableRow:hover .fui-TableCell) {
+  background-color: var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)));
+}
+
+.leafHeaderCellSpan {
+  font-weight: 600;
+  padding: 6px 10px;
+  background: var(--ogrid-header-bg, #f3f2f1);
+}
+
+.selectionHeaderCellWrapper {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 4px !important;
+  text-align: center;
+}
+
+.selectionCellWrapper {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 4px !important;
+  text-align: center;
+}
+
+.rowNumberHeaderCellWrapper {
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+  padding: 4px 8px !important;
+  text-align: center;
+  background: var(--ogrid-header-bg, #f5f5f5);
+  font-weight: 600;
+  color: var(--colorNeutralForeground3, #666);
+  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+
+.rowNumberCellWrapper {
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+  padding: 4px 8px !important;
+  text-align: center;
+  background: var(--colorNeutralBackground3, #f5f5f5);
+  font-weight: 600;
+  color: var(--colorNeutralForeground3, #666);
+  border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+}
+
+.dataTable :global(.fui-TableBody) .selectedRow :global(.fui-TableCell) {
+  background-color: var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb));
+}
+
+.selectableGrid .dataTable :global(.fui-TableBody .fui-TableRow:hover .fui-TableCell) {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
   cursor: pointer;
-  padding: 2px 4px;
-  font-size: 16px;
-  line-height: 1;
+}
+
+.selectableGrid .dataTable :global(.fui-TableBody) .selectedRow:hover :global(.fui-TableCell) {
+  background-color: var(--colorNeutralBackground1Hover, #dae8f8);
+}
+
+.selectableGrid .dataTable :global(.fui-TableBody .fui-TableRow) {
+  cursor: pointer;
+}
+
+.cellContent {
+  padding: 4px 8px;
+}
+
+.activeCellContent {
+  outline: 2px solid var(--ogrid-selection-color, #217346) !important;
+  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02)) !important;
+}
+
+.cellInRange {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+
+:global([data-drag-range]) {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+}
+
+:global([data-drag-anchor]) {
+  background-color: var(--ogrid-bg, #ffffff) !important;
+}
+
+.cellCut {
+  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+}
+
+.stickyHeader {
+  z-index: 8;
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+
+.freezeColFirst {
+  background-color: var(--colorNeutralBackground1, #ffffff);
+}
+
+.dataTable :global(.fui-TableHeader) .freezeColFirst {
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+
+.stickyHeader .freezeColFirst,
+.stickyHeader .pinnedColLeft,
+.stickyHeader .pinnedColRight {
+  top: 0;
+  z-index: 10;
+}
+
+.dataTable .pinnedColLeft {
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+
+.dataTable :global(.fui-TableHeader) .pinnedColLeft {
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+
+.dataTable .pinnedColRight {
+  background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
+}
+
+.dataTable :global(.fui-TableHeader) .pinnedColRight {
+  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
+}
+
+.headerMenuTrigger {
   color: var(--colorNeutralForeground3, #666);
-  opacity: 1;
-  transition: background-color 0.15s;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
 }
 .headerMenuTrigger:hover {
   background: var(--colorNeutralBackground1Hover, #f3f2f1);
@@ -673,27 +686,138 @@
 .headerMenuTrigger:active {
   background: var(--colorNeutralBackground1Pressed, #e1dfdd);
 }
+.headerMenuTrigger:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
+}
+
+/* Column resize handle -- Fluent token override */
+.resizeHandle:hover::after {
+  background-color: var(--colorBrandForeground1, var(--ogrid-accent, #0078d4));
+}
+.resizeHandle:active::after {
+  background-color: var(--colorBrandForeground1Pressed, #005a9e);
+}
+
+.statusBar {
+  min-width: 0;
+  color: var(--colorNeutralForeground2, #616161);
+  background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  user-select: none;
+}
+
+.statusBarItem:not(:last-child)::after {
+  display: inline-block;
+  background-color: var(--colorNeutralStroke1, #c4c4c4);
+}
+
+.statusBarLabel {
+  color: var(--colorNeutralForeground3, #707070);
+  font-weight: 400;
+}
+
+.statusBarValue {
+  color: var(--colorNeutralForeground1, #242424);
+}
+
+.contextMenu {
+  background: var(--colorNeutralBackground1, #fff);
+  border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
+  outline: none;
+}
+
+.contextMenuItem {
+  color: var(--colorNeutralForeground1, #242424);
+}
+.contextMenuItem:hover:not(:disabled) {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+}
+
+.contextMenuItemShortcut {
+  color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
+}
+
+.contextMenuDivider {
+  background-color: var(--colorNeutralStroke2, #e0e0e0);
+}
+
+.loadingOverlayContent {
+  background: var(--colorNeutralBackground1, #ffffff);
+  border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
+  border-radius: var(--borderRadiusMedium, 4px);
+  box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
+}
+
+.loadingOverlayText {
+  color: var(--colorNeutralForeground2, #616161);
+}
+
+.loadingDimmed {
+  transition: opacity 0.15s ease;
+}
+
+.emptyStateInGrid {
+  min-width: 0;
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+
+.emptyStateInGridMessageSticky {
+  position: sticky;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
 
-.tableWrapper :global(.fui-DataGridHeaderCell.pinnedColLeft),
-.tableWrapper :global(.fui-DataGridCell.pinnedColLeft) {
-  border-left: 2px solid var(--colorBrandForeground1, #0078d4) !important;
+.emptyStateInGridIcon {
+  font-size: 24px;
+  margin-bottom: 8px;
+  opacity: 0.6;
+}
+
+.emptyStateInGridTitle {
+  color: var(--colorNeutralForeground1, #242424);
+}
+
+.emptyStateInGridMessage {
+  color: var(--colorNeutralForeground2, #616161);
+  max-width: 100%;
+}
+
+.emptyStateInGridLink {
+  color: var(--colorBrandForeground1, #0f6cbd);
+}
+.emptyStateInGridLink:hover {
+  color: var(--colorBrandForeground1Hover, #115ea3);
 }
 
-.tableWrapper :global(.fui-DataGridHeaderCell.pinnedColRight),
-.tableWrapper :global(.fui-DataGridCell.pinnedColRight) {
-  border-right: 2px solid var(--colorBrandForeground1, #0078d4) !important;
+/* Fluent Link styling within grid */
+.dataTable :global(.fui-Link) {
+  color: var(--colorBrandForeground1, #0f6cbd);
+  font-weight: 600;
+  text-decoration: none;
+}
+.dataTable :global(.fui-Link):hover {
+  text-decoration: underline;
+  color: var(--colorBrandForeground1Hover, #115ea3);
+}
+.dataTable :global(.fui-Link):active {
+  color: var(--colorBrandForeground1Pressed, #0c3b5e);
 }
 
-.density-compact :global(.fui-DataGridHeaderCell),
-.density-compact :global(.fui-DataGridCell) {
+.density-compact .dataTable :global(.fui-TableHeaderCell) {
   padding: 4px 8px;
 }
 .density-compact .cellContent {
   padding: 4px 8px;
 }
 
-.density-comfortable :global(.fui-DataGridHeaderCell),
-.density-comfortable :global(.fui-DataGridCell) {
+.density-comfortable .dataTable :global(.fui-TableHeaderCell) {
   padding: 12px 16px;
 }
 .density-comfortable .cellContent {
@@ -701,12 +825,6 @@
 }
 
 /* ─── Accessibility: Focus Visible Styles ─────────────────────── */
-.tableWrapper :global .fui-DataGridHeaderCell:focus-visible,
-.tableWrapper :global .fui-DataGridCell:focus-visible {
-  outline: 2px solid var(--colorBrandStroke1, #0078d4);
-  outline-offset: -2px;
-  z-index: 11;
-}
 .tableWrapper :global .fui-Button:focus-visible,
 .tableWrapper :global .fui-MenuButton:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, #0078d4);
@@ -715,10 +833,4 @@
 .tableWrapper :global .fui-Checkbox:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, #0078d4);
   outline-offset: 2px;
-}
-
-.cellContent:focus-visible {
-  outline: 2px solid var(--colorBrandStroke1, #0078d4);
-  outline-offset: -2px;
-  z-index: 3;
 }