react-glide-table 1.2.0 → 1.4.0

package/README.md

@@ -69,6 +69,7 @@ export function Products({ data }: { data: Product[] }) {
 | ---------------------------------------------------- | --------------------------------------------------------------------------------- |
 | `classNames`                                         | Per-part Tailwind/utility classes (`root`, `scroll`, `row`, `cell`, `toolbar`, …) |
 | `slots.Toolbar`                                      | Top summary / actions region                                                      |
+| `slots.Scroll`                                       | Scroll container (must attach `scrollRef` to the real overflow element)           |
 | `slots.Row`                                          | Full row replacement (cells, selection, edit UI)                                  |
 | `slots.Pending` / `slots.Empty`                      | Loading and empty states                                                          |
 | `className` / column `className` / `headerClassName` | Extra class hooks                                                                 |
@@ -84,6 +85,8 @@ Example: `row: "data-[selected]:bg-blue-600"`.
 
 Row-level UI → `slots.Row`. Cell content → `Column.render`. Header/Cell are not separate slots.
 
+`slots.Scroll` receives `{ scrollRef, className, children }`. Attach `scrollRef` to the element that owns overflow scrolling — virtualization depends on it. Styling-only changes can stay on `classNames.scroll`.
+
 ## Escape hatch (`useGlideTable`)
 
 ```tsx
@@ -234,9 +237,12 @@ Opt in with `enableColumnFreeze`. Mark columns with `frozen` — sticky insets a
 | ---------------------------------- | --------------------------------------- |
 | `enableColumnFreeze`               | Turn on sticky freeze (default `false`) |
 | `Column.frozen` / `meta.frozen`    | `true` / `"left"` or `"right"`          |
-| `data-frozen` / `data-freeze-edge` | State hooks for custom styling          |
+| `data-frozen`                      | `"left"` / `"right"` on frozen cells    |
+| `data-freeze-edge`                 | `"left"` / `"right"` / `"both"` on island boundaries |
+
+Helpers (`/core`): `buildColumnFreezeOffsets`, `getColumnFreezeEdgeAttr`, `getColumnFreezeStyle`, `resolveColumnFreezeSide`.
 
-Helpers (`/core`): `buildColumnFreezeOffsets`, `getColumnFreezeStyle`, `resolveColumnFreezeSide`.
+Contiguous same-side freezes share one island (shadow only on the outer boundary). A gap between frozen columns creates separate islands, so both sides of the gap get an edge shadow.
 
 ## Public API
 
@@ -250,7 +256,7 @@ Helpers (`/core`): `buildColumnFreezeOffsets`, `getColumnFreezeStyle`, `resolveC
 | `DEFAULT_DATA_TABLE_LABELS` / `resolveDataTableLabels`                                | `/core`     | Optional English UI copy helpers                                  |
 | Tree field defaults                                                                   | `/core`     | `id` / `parentId` / `children` / `qty`                            |
 
-Root `react-glide-table` re-exports both surfaces. Related types: `TableProps`, `TableColumnProps`, `DataTableProps`, `DataTableSlots`, `TableCompoundComponent`, `ColumnDef`, `RowsPastePayload`, `PasteMode`, …
+Root `react-glide-table` re-exports both surfaces. Related types: `TableProps`, `TableColumnProps`, `DataTableProps`, `DataTableSlots`, `DataTableScrollSlotProps`, `TableCompoundComponent`, `ColumnDef`, `RowsPastePayload`, `PasteMode`, …
 
 ## Notable constraints
 

package/dist/compound.cjs

@@ -396,6 +396,13 @@ function resolveColumnFreezeSide(frozen) {
   if (frozen === "right") return "right";
   return void 0;
 }
+function getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) return "right";
+  return void 0;
+}
 function buildColumnFreezeOffsets(columns) {
   const result = /* @__PURE__ */ new Map();
   let leftOffset = 0;
@@ -407,6 +414,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "left",
       offset: leftOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     leftOffset += column.size;
@@ -414,7 +423,6 @@ function buildColumnFreezeOffsets(columns) {
   leftIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === leftIds.length - 1;
     entry.stack = leftIds.length - index;
   });
   let rightOffset = 0;
@@ -427,6 +435,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "right",
       offset: rightOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     rightOffset += column.size;
@@ -434,9 +444,20 @@ function buildColumnFreezeOffsets(columns) {
   rightIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === rightIds.length - 1;
     entry.stack = rightIds.length - index;
   });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
   return result;
 }
 function getColumnFreezeStyle(offset, options) {
@@ -1117,7 +1138,7 @@ function DataTableRow({
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-frozen": freezeOffset?.side,
-            "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+            "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -2275,6 +2296,13 @@ function useGlideTable(options) {
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function DefaultScroll({
+  scrollRef,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+}
 function DefaultPending({
   loadingText,
   className,
@@ -2343,6 +2371,7 @@ function DataTable({
     clearHover
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
+  const ScrollSlot = slots?.Scroll ?? DefaultScroll;
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2385,7 +2414,7 @@ function DataTable({
             classNames
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "table",
           {
             className: cn("data-table", classNames?.table),
@@ -2417,7 +2446,7 @@ function DataTable({
                       {
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
-                        "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+                        "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
                         style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",

package/dist/compound.d.cts

@@ -1,14 +1,15 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { g as DataTableProps, T as TableColumnProps, j as TableProps } from './types-D031_07N.cjs';
-export { a as ColumnFreezeMeta, c as ColumnFreezeSide, d as DataTableClassNames, f as DataTableLabels, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload } from './types-D031_07N.cjs';
+import { h as DataTableProps, T as TableColumnProps, l as TableProps } from './types-CHQnBz91.cjs';
+export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload } from './types-CHQnBz91.cjs';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.
  * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
  * Customize via `className`, `classNames` (Tailwind-friendly part map), column
- * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`.
+ * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`
+ * (`Toolbar`, `Scroll`, `Row`, `Pending`, `Empty`).
  */
 declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, classNames, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
 

package/dist/compound.d.ts

@@ -1,14 +1,15 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { g as DataTableProps, T as TableColumnProps, j as TableProps } from './types-D031_07N.js';
-export { a as ColumnFreezeMeta, c as ColumnFreezeSide, d as DataTableClassNames, f as DataTableLabels, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload } from './types-D031_07N.js';
+import { h as DataTableProps, T as TableColumnProps, l as TableProps } from './types-CHQnBz91.js';
+export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload } from './types-CHQnBz91.js';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.
  * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
  * Customize via `className`, `classNames` (Tailwind-friendly part map), column
- * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`.
+ * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`
+ * (`Toolbar`, `Scroll`, `Row`, `Pending`, `Empty`).
  */
 declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, classNames, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
 

package/dist/compound.js

@@ -368,6 +368,13 @@ function resolveColumnFreezeSide(frozen) {
   if (frozen === "right") return "right";
   return void 0;
 }
+function getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) return "right";
+  return void 0;
+}
 function buildColumnFreezeOffsets(columns) {
   const result = /* @__PURE__ */ new Map();
   let leftOffset = 0;
@@ -379,6 +386,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "left",
       offset: leftOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     leftOffset += column.size;
@@ -386,7 +395,6 @@ function buildColumnFreezeOffsets(columns) {
   leftIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === leftIds.length - 1;
     entry.stack = leftIds.length - index;
   });
   let rightOffset = 0;
@@ -399,6 +407,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "right",
       offset: rightOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     rightOffset += column.size;
@@ -406,9 +416,20 @@ function buildColumnFreezeOffsets(columns) {
   rightIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === rightIds.length - 1;
     entry.stack = rightIds.length - index;
   });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
   return result;
 }
 function getColumnFreezeStyle(offset, options) {
@@ -1089,7 +1110,7 @@ function DataTableRow({
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-frozen": freezeOffset?.side,
-            "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+            "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -2258,6 +2279,13 @@ function useGlideTable(options) {
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function DefaultScroll({
+  scrollRef,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+}
 function DefaultPending({
   loadingText,
   className,
@@ -2326,6 +2354,7 @@ function DataTable({
     clearHover
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
+  const ScrollSlot = slots?.Scroll ?? DefaultScroll;
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2368,7 +2397,7 @@ function DataTable({
             classNames
           }
         ),
-        /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx5(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs4(
           "table",
           {
             className: cn("data-table", classNames?.table),
@@ -2400,7 +2429,7 @@ function DataTable({
                       {
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
-                        "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+                        "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
                         style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",

package/dist/core.cjs

@@ -41,6 +41,7 @@ __export(core_exports, {
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
   getColumnEditType: () => getColumnEditType,
+  getColumnFreezeEdgeAttr: () => getColumnFreezeEdgeAttr,
   getColumnFreezeStyle: () => getColumnFreezeStyle,
   getColumnSizeStyle: () => getColumnSizeStyle,
   getRowIndexInMergedCell: () => getRowIndexInMergedCell,
@@ -1000,6 +1001,13 @@ function resolveColumnFreezeSide(frozen) {
   if (frozen === "right") return "right";
   return void 0;
 }
+function getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) return "right";
+  return void 0;
+}
 function buildColumnFreezeOffsets(columns) {
   const result = /* @__PURE__ */ new Map();
   let leftOffset = 0;
@@ -1011,6 +1019,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "left",
       offset: leftOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     leftOffset += column.size;
@@ -1018,7 +1028,6 @@ function buildColumnFreezeOffsets(columns) {
   leftIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === leftIds.length - 1;
     entry.stack = leftIds.length - index;
   });
   let rightOffset = 0;
@@ -1031,6 +1040,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "right",
       offset: rightOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     rightOffset += column.size;
@@ -1038,9 +1049,20 @@ function buildColumnFreezeOffsets(columns) {
   rightIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === rightIds.length - 1;
     entry.stack = rightIds.length - index;
   });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
   return result;
 }
 function getColumnFreezeStyle(offset, options) {
@@ -1710,6 +1732,7 @@ function getColumnSizeStyle(size, options) {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeEdgeAttr,
   getColumnFreezeStyle,
   getColumnSizeStyle,
   getRowIndexInMergedCell,

package/dist/core.d.cts

@@ -1,5 +1,5 @@
-import { n as CellEditType, d as DataTableClassNames, R as RowSelectionMode, b as ColumnFreezeOffset, g as DataTableProps, f as DataTableLabels, e as DataTableCopyActions, P as PasteMode, i as RowsPastePayload } from './types-D031_07N.cjs';
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.cjs';
+import { q as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-CHQnBz91.cjs';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, m as buildColumnFreezeOffsets, n as getColumnFreezeEdgeAttr, o as getColumnFreezeStyle, r as resolveColumnFreezeSide, p as resolveDataTableLabels } from './types-CHQnBz91.cjs';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { n as CellEditType, d as DataTableClassNames, R as RowSelectionMode, b as ColumnFreezeOffset, g as DataTableProps, f as DataTableLabels, e as DataTableCopyActions, P as PasteMode, i as RowsPastePayload } from './types-D031_07N.js';
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.js';
+import { q as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-CHQnBz91.js';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, m as buildColumnFreezeOffsets, n as getColumnFreezeEdgeAttr, o as getColumnFreezeStyle, r as resolveColumnFreezeSide, p as resolveDataTableLabels } from './types-CHQnBz91.js';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';

package/dist/core.js

@@ -940,6 +940,13 @@ function resolveColumnFreezeSide(frozen) {
   if (frozen === "right") return "right";
   return void 0;
 }
+function getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) return "right";
+  return void 0;
+}
 function buildColumnFreezeOffsets(columns) {
   const result = /* @__PURE__ */ new Map();
   let leftOffset = 0;
@@ -951,6 +958,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "left",
       offset: leftOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     leftOffset += column.size;
@@ -958,7 +967,6 @@ function buildColumnFreezeOffsets(columns) {
   leftIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === leftIds.length - 1;
     entry.stack = leftIds.length - index;
   });
   let rightOffset = 0;
@@ -971,6 +979,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "right",
       offset: rightOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     rightOffset += column.size;
@@ -978,9 +988,20 @@ function buildColumnFreezeOffsets(columns) {
   rightIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === rightIds.length - 1;
     entry.stack = rightIds.length - index;
   });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
   return result;
 }
 function getColumnFreezeStyle(offset, options) {
@@ -1649,6 +1670,7 @@ export {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeEdgeAttr,
   getColumnFreezeStyle,
   getColumnSizeStyle,
   getRowIndexInMergedCell,

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(src_exports, {
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
   getColumnEditType: () => getColumnEditType,
+  getColumnFreezeEdgeAttr: () => getColumnFreezeEdgeAttr,
   getColumnFreezeStyle: () => getColumnFreezeStyle,
   getColumnSizeStyle: () => getColumnSizeStyle,
   getRowIndexInMergedCell: () => getRowIndexInMergedCell,
@@ -1011,6 +1012,13 @@ function resolveColumnFreezeSide(frozen) {
   if (frozen === "right") return "right";
   return void 0;
 }
+function getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) return "right";
+  return void 0;
+}
 function buildColumnFreezeOffsets(columns) {
   const result = /* @__PURE__ */ new Map();
   let leftOffset = 0;
@@ -1022,6 +1030,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "left",
       offset: leftOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     leftOffset += column.size;
@@ -1029,7 +1039,6 @@ function buildColumnFreezeOffsets(columns) {
   leftIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === leftIds.length - 1;
     entry.stack = leftIds.length - index;
   });
   let rightOffset = 0;
@@ -1042,6 +1051,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "right",
       offset: rightOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     rightOffset += column.size;
@@ -1049,9 +1060,20 @@ function buildColumnFreezeOffsets(columns) {
   rightIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === rightIds.length - 1;
     entry.stack = rightIds.length - index;
   });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
   return result;
 }
 function getColumnFreezeStyle(offset, options) {
@@ -2122,7 +2144,7 @@ function DataTableRow({
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-frozen": freezeOffset?.side,
-            "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+            "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -2343,6 +2365,13 @@ function DataTableToolbar({
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function DefaultScroll({
+  scrollRef,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+}
 function DefaultPending({
   loadingText,
   className,
@@ -2411,6 +2440,7 @@ function DataTable({
     clearHover
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
+  const ScrollSlot = slots?.Scroll ?? DefaultScroll;
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2453,7 +2483,7 @@ function DataTable({
             classNames
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "table",
           {
             className: cn("data-table", classNames?.table),
@@ -2485,7 +2515,7 @@ function DataTable({
                       {
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
-                        "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+                        "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
                         style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",
@@ -2972,6 +3002,7 @@ var Table = Object.assign(TableRoot, {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeEdgeAttr,
   getColumnFreezeStyle,
   getColumnSizeStyle,
   getRowIndexInMergedCell,

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, b as ColumnFreezeOffset, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, d as DataTableClassNames, e as DataTableCopyActions, f as DataTableLabels, g as DataTableProps, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload, T as TableColumnProps, j as TableProps, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.cjs';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, T as TableColumnProps, l as TableProps, m as buildColumnFreezeOffsets, n as getColumnFreezeEdgeAttr, o as getColumnFreezeStyle, r as resolveColumnFreezeSide, p as resolveDataTableLabels } from './types-CHQnBz91.cjs';
 export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.cjs';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, b as ColumnFreezeOffset, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, d as DataTableClassNames, e as DataTableCopyActions, f as DataTableLabels, g as DataTableProps, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload, T as TableColumnProps, j as TableProps, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.js';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, T as TableColumnProps, l as TableProps, m as buildColumnFreezeOffsets, n as getColumnFreezeEdgeAttr, o as getColumnFreezeStyle, r as resolveColumnFreezeSide, p as resolveDataTableLabels } from './types-CHQnBz91.js';
 export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.js';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';

package/dist/index.js

@@ -948,6 +948,13 @@ function resolveColumnFreezeSide(frozen) {
   if (frozen === "right") return "right";
   return void 0;
 }
+function getColumnFreezeEdgeAttr(offset) {
+  if (!offset) return void 0;
+  if (offset.edgeLeft && offset.edgeRight) return "both";
+  if (offset.edgeLeft) return "left";
+  if (offset.edgeRight) return "right";
+  return void 0;
+}
 function buildColumnFreezeOffsets(columns) {
   const result = /* @__PURE__ */ new Map();
   let leftOffset = 0;
@@ -959,6 +966,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "left",
       offset: leftOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     leftOffset += column.size;
@@ -966,7 +975,6 @@ function buildColumnFreezeOffsets(columns) {
   leftIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === leftIds.length - 1;
     entry.stack = leftIds.length - index;
   });
   let rightOffset = 0;
@@ -979,6 +987,8 @@ function buildColumnFreezeOffsets(columns) {
       side: "right",
       offset: rightOffset,
       isEdge: false,
+      edgeLeft: false,
+      edgeRight: false,
       stack: 0
     });
     rightOffset += column.size;
@@ -986,9 +996,20 @@ function buildColumnFreezeOffsets(columns) {
   rightIds.forEach((id, index) => {
     const entry = result.get(id);
     if (!entry) return;
-    entry.isEdge = index === rightIds.length - 1;
     entry.stack = rightIds.length - index;
   });
+  columns.forEach((column, index) => {
+    if (!column.side) return;
+    const entry = result.get(column.id);
+    if (!entry) return;
+    const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
+    const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
+    entry.edgeLeft = prevSide !== column.side;
+    entry.edgeRight = nextSide !== column.side;
+    if (index === 0) entry.edgeLeft = false;
+    if (index === columns.length - 1) entry.edgeRight = false;
+    entry.isEdge = entry.edgeLeft || entry.edgeRight;
+  });
   return result;
 }
 function getColumnFreezeStyle(offset, options) {
@@ -2059,7 +2080,7 @@ function DataTableRow({
             "data-editable": editable ? "" : void 0,
             "data-editing": isEditing ? "" : void 0,
             "data-frozen": freezeOffset?.side,
-            "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+            "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -2280,6 +2301,13 @@ function DataTableToolbar({
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function DefaultScroll({
+  scrollRef,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+}
 function DefaultPending({
   loadingText,
   className,
@@ -2348,6 +2376,7 @@ function DataTable({
     clearHover
   } = useGlideTable(glideOptions);
   const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
+  const ScrollSlot = slots?.Scroll ?? DefaultScroll;
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2390,7 +2419,7 @@ function DataTable({
             classNames
           }
         ),
-        /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx5(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs4(
           "table",
           {
             className: cn("data-table", classNames?.table),
@@ -2422,7 +2451,7 @@ function DataTable({
                       {
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
-                        "data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
+                        "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
                         style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
                         className: cn(
                           "data-table-head-cell",
@@ -2908,6 +2937,7 @@ export {
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
+  getColumnFreezeEdgeAttr,
   getColumnFreezeStyle,
   getColumnSizeStyle,
   getRowIndexInMergedCell,

package/dist/{types-D031_07N.d.cts → types-CHQnBz91.d.cts}

@@ -1,5 +1,5 @@
 import { ColumnDef, RowSelectionState, Updater, ColumnSizingState, OnChangeFn, ColumnResizeMode, Row } from '@tanstack/react-table';
-import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
+import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType, Ref } from 'react';
 
 /** Sticky edge for a frozen column. Does not reorder columns. */
 type ColumnFreezeSide = "left" | "right";
@@ -13,24 +13,34 @@ type ColumnFreezeColumnInput = {
     size: number;
     side?: ColumnFreezeSide;
 };
+/** Which outer sides of a freeze island get a divider shadow. */
+type ColumnFreezeEdgeSide = "left" | "right" | "both";
 type ColumnFreezeOffset = {
     side: ColumnFreezeSide;
     /** Cumulative sticky inset (`left` or `right` in px). */
     offset: number;
-    /** Inner edge of the sticky group (shadow / divider). */
+    /** True when this cell is on an island boundary (any side). */
     isEdge: boolean;
+    /** Shadow toward the previous column (scrollable / other island). */
+    edgeLeft: boolean;
+    /** Shadow toward the next column (scrollable / other island). */
+    edgeRight: boolean;
     /** Relative stack order within the freeze side (higher = closer to the viewport edge). */
     stack: number;
 };
 /** Normalize column `frozen` meta into a sticky side. */
 declare function resolveColumnFreezeSide(frozen?: ColumnFreezeMeta): ColumnFreezeSide | undefined;
+/** Serialize freeze-edge flags for `data-freeze-edge`. */
+declare function getColumnFreezeEdgeAttr(offset: Pick<ColumnFreezeOffset, "edgeLeft" | "edgeRight"> | undefined): ColumnFreezeEdgeSide | undefined;
 /**
  * Build sticky insets for frozen columns without changing DOM/column order.
  *
  * - `left`: `left = Σ(widths of left-frozen columns before this one)`
  * - `right`: `right = Σ(widths of right-frozen columns after this one)`
  *
- * Middle columns may be frozen; non-frozen neighbors scroll underneath.
+ * Contiguous same-side freezes form one island — only the outer boundaries
+ * get edge shadows. Gaps between same-side freezes create separate islands,
+ * so both sides of the gap receive a shadow.
  */
 declare function buildColumnFreezeOffsets(columns: ColumnFreezeColumnInput[]): Map<string, ColumnFreezeOffset>;
 /** Sticky position styles for a frozen header or body cell. */
@@ -302,6 +312,17 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
     virtualIndex?: number;
     measureElement?: (node: Element | null) => void;
 };
+/**
+ * Scroll-region slot props for the semantic DataTable shell.
+ *
+ * `scrollRef` must be attached to the element that actually owns overflow
+ * scrolling — row virtualization reads it via `getScrollElement`.
+ */
+type DataTableScrollSlotProps = {
+    children: ReactNode;
+    className?: string;
+    scrollRef: Ref<HTMLDivElement | null>;
+};
 /**
  * Slot replacements for the default DataTable shell (semantic HTML + behavior only).
  * Row-level custom UI → `Row`; cell content → `Table.Column` / column `render`.
@@ -310,6 +331,11 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
 type DataTableSlots<T extends Record<string, unknown>> = {
     /** Top summary / actions region */
     Toolbar?: ComponentType<DataTableToolbarSlotProps>;
+    /**
+     * Table scroll container. Must forward `scrollRef` to the real scroll element
+     * (required for virtualization).
+     */
+    Scroll?: ComponentType<DataTableScrollSlotProps>;
     /** Full row replacement (cells, selection, edit UI) */
     Row?: ComponentType<DataTableRowSlotProps<T>>;
     /** Replace the pending state view */
@@ -364,4 +390,4 @@ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "co
     children: ReactNode;
 };
 
-export { type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type ColumnFreezeMeta as a, type ColumnFreezeOffset as b, type ColumnFreezeSide as c, type DataTableClassNames as d, type DataTableCopyActions as e, type DataTableLabels as f, type DataTableProps as g, type DataTableSlots as h, type RowsPastePayload as i, type TableProps as j, buildColumnFreezeOffsets as k, getColumnFreezeStyle as l, resolveDataTableLabels as m, type CellEditType as n, resolveColumnFreezeSide as r };
+export { type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableScrollSlotProps as i, type DataTableSlots as j, type RowsPastePayload as k, type TableProps as l, buildColumnFreezeOffsets as m, getColumnFreezeEdgeAttr as n, getColumnFreezeStyle as o, resolveDataTableLabels as p, type CellEditType as q, resolveColumnFreezeSide as r };

package/dist/{types-D031_07N.d.ts → types-CHQnBz91.d.ts}

@@ -1,5 +1,5 @@
 import { ColumnDef, RowSelectionState, Updater, ColumnSizingState, OnChangeFn, ColumnResizeMode, Row } from '@tanstack/react-table';
-import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
+import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType, Ref } from 'react';
 
 /** Sticky edge for a frozen column. Does not reorder columns. */
 type ColumnFreezeSide = "left" | "right";
@@ -13,24 +13,34 @@ type ColumnFreezeColumnInput = {
     size: number;
     side?: ColumnFreezeSide;
 };
+/** Which outer sides of a freeze island get a divider shadow. */
+type ColumnFreezeEdgeSide = "left" | "right" | "both";
 type ColumnFreezeOffset = {
     side: ColumnFreezeSide;
     /** Cumulative sticky inset (`left` or `right` in px). */
     offset: number;
-    /** Inner edge of the sticky group (shadow / divider). */
+    /** True when this cell is on an island boundary (any side). */
     isEdge: boolean;
+    /** Shadow toward the previous column (scrollable / other island). */
+    edgeLeft: boolean;
+    /** Shadow toward the next column (scrollable / other island). */
+    edgeRight: boolean;
     /** Relative stack order within the freeze side (higher = closer to the viewport edge). */
     stack: number;
 };
 /** Normalize column `frozen` meta into a sticky side. */
 declare function resolveColumnFreezeSide(frozen?: ColumnFreezeMeta): ColumnFreezeSide | undefined;
+/** Serialize freeze-edge flags for `data-freeze-edge`. */
+declare function getColumnFreezeEdgeAttr(offset: Pick<ColumnFreezeOffset, "edgeLeft" | "edgeRight"> | undefined): ColumnFreezeEdgeSide | undefined;
 /**
  * Build sticky insets for frozen columns without changing DOM/column order.
  *
  * - `left`: `left = Σ(widths of left-frozen columns before this one)`
  * - `right`: `right = Σ(widths of right-frozen columns after this one)`
  *
- * Middle columns may be frozen; non-frozen neighbors scroll underneath.
+ * Contiguous same-side freezes form one island — only the outer boundaries
+ * get edge shadows. Gaps between same-side freezes create separate islands,
+ * so both sides of the gap receive a shadow.
  */
 declare function buildColumnFreezeOffsets(columns: ColumnFreezeColumnInput[]): Map<string, ColumnFreezeOffset>;
 /** Sticky position styles for a frozen header or body cell. */
@@ -302,6 +312,17 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
     virtualIndex?: number;
     measureElement?: (node: Element | null) => void;
 };
+/**
+ * Scroll-region slot props for the semantic DataTable shell.
+ *
+ * `scrollRef` must be attached to the element that actually owns overflow
+ * scrolling — row virtualization reads it via `getScrollElement`.
+ */
+type DataTableScrollSlotProps = {
+    children: ReactNode;
+    className?: string;
+    scrollRef: Ref<HTMLDivElement | null>;
+};
 /**
  * Slot replacements for the default DataTable shell (semantic HTML + behavior only).
  * Row-level custom UI → `Row`; cell content → `Table.Column` / column `render`.
@@ -310,6 +331,11 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
 type DataTableSlots<T extends Record<string, unknown>> = {
     /** Top summary / actions region */
     Toolbar?: ComponentType<DataTableToolbarSlotProps>;
+    /**
+     * Table scroll container. Must forward `scrollRef` to the real scroll element
+     * (required for virtualization).
+     */
+    Scroll?: ComponentType<DataTableScrollSlotProps>;
     /** Full row replacement (cells, selection, edit UI) */
     Row?: ComponentType<DataTableRowSlotProps<T>>;
     /** Replace the pending state view */
@@ -364,4 +390,4 @@ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "co
     children: ReactNode;
 };
 
-export { type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type ColumnFreezeMeta as a, type ColumnFreezeOffset as b, type ColumnFreezeSide as c, type DataTableClassNames as d, type DataTableCopyActions as e, type DataTableLabels as f, type DataTableProps as g, type DataTableSlots as h, type RowsPastePayload as i, type TableProps as j, buildColumnFreezeOffsets as k, getColumnFreezeStyle as l, resolveDataTableLabels as m, type CellEditType as n, resolveColumnFreezeSide as r };
+export { type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableScrollSlotProps as i, type DataTableSlots as j, type RowsPastePayload as k, type TableProps as l, buildColumnFreezeOffsets as m, getColumnFreezeEdgeAttr as n, getColumnFreezeStyle as o, resolveDataTableLabels as p, type CellEditType as q, resolveColumnFreezeSide as r };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"