react-glide-table 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -69,6 +69,7 @@ export function Products({ data }: { data: Product[] }) {
69
69
  | ---------------------------------------------------- | --------------------------------------------------------------------------------- |
70
70
  | `classNames` | Per-part Tailwind/utility classes (`root`, `scroll`, `row`, `cell`, `toolbar`, …) |
71
71
  | `slots.Toolbar` | Top summary / actions region |
72
+ | `slots.Scroll` | Scroll container (must attach `scrollRef` to the real overflow element) |
72
73
  | `slots.Row` | Full row replacement (cells, selection, edit UI) |
73
74
  | `slots.Pending` / `slots.Empty` | Loading and empty states |
74
75
  | `className` / column `className` / `headerClassName` | Extra class hooks |
@@ -84,6 +85,8 @@ Example: `row: "data-[selected]:bg-blue-600"`.
84
85
 
85
86
  Row-level UI → `slots.Row`. Cell content → `Column.render`. Header/Cell are not separate slots.
86
87
 
88
+ `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`.
89
+
87
90
  ## Escape hatch (`useGlideTable`)
88
91
 
89
92
  ```tsx
@@ -253,7 +256,7 @@ Contiguous same-side freezes share one island (shadow only on the outer boundary
253
256
  | `DEFAULT_DATA_TABLE_LABELS` / `resolveDataTableLabels` | `/core` | Optional English UI copy helpers |
254
257
  | Tree field defaults | `/core` | `id` / `parentId` / `children` / `qty` |
255
258
 
256
- Root `react-glide-table` re-exports both surfaces. Related types: `TableProps`, `TableColumnProps`, `DataTableProps`, `DataTableSlots`, `TableCompoundComponent`, `ColumnDef`, `RowsPastePayload`, `PasteMode`, …
259
+ Root `react-glide-table` re-exports both surfaces. Related types: `TableProps`, `TableColumnProps`, `DataTableProps`, `DataTableSlots`, `DataTableScrollSlotProps`, `TableCompoundComponent`, `ColumnDef`, `RowsPastePayload`, `PasteMode`, …
257
260
 
258
261
  ## Notable constraints
259
262
 
package/dist/compound.cjs CHANGED
@@ -2296,6 +2296,13 @@ function useGlideTable(options) {
2296
2296
 
2297
2297
  // src/components/ui/table/components/DataTable/DataTable.tsx
2298
2298
  var import_jsx_runtime5 = require("react/jsx-runtime");
2299
+ function DefaultScroll({
2300
+ scrollRef,
2301
+ children,
2302
+ className
2303
+ }) {
2304
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
2305
+ }
2299
2306
  function DefaultPending({
2300
2307
  loadingText,
2301
2308
  className,
@@ -2364,6 +2371,7 @@ function DataTable({
2364
2371
  clearHover
2365
2372
  } = useGlideTable(glideOptions);
2366
2373
  const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
2374
+ const ScrollSlot = slots?.Scroll ?? DefaultScroll;
2367
2375
  const RowSlot = slots?.Row ?? DataTableRow;
2368
2376
  const PendingSlot = slots?.Pending ?? DefaultPending;
2369
2377
  const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2406,7 +2414,7 @@ function DataTable({
2406
2414
  classNames
2407
2415
  }
2408
2416
  ),
2409
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2417
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2410
2418
  "table",
2411
2419
  {
2412
2420
  className: cn("data-table", classNames?.table),
@@ -1,14 +1,15 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, ReactElement } from 'react';
3
- import { h as DataTableProps, T as TableColumnProps, k as TableProps } from './types-B4uHdkrY.cjs';
4
- export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload } from './types-B4uHdkrY.cjs';
3
+ import { h as DataTableProps, T as TableColumnProps, l as TableProps } from './types-CHQnBz91.cjs';
4
+ 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';
5
5
  export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
6
6
 
7
7
  /**
8
8
  * Unstyled DataTable shell: semantic HTML + interaction behavior.
9
9
  * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
10
10
  * Customize via `className`, `classNames` (Tailwind-friendly part map), column
11
- * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`.
11
+ * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`
12
+ * (`Toolbar`, `Scroll`, `Row`, `Pending`, `Empty`).
12
13
  */
13
14
  declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, classNames, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
14
15
 
@@ -1,14 +1,15 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, ReactElement } from 'react';
3
- import { h as DataTableProps, T as TableColumnProps, k as TableProps } from './types-B4uHdkrY.js';
4
- export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload } from './types-B4uHdkrY.js';
3
+ import { h as DataTableProps, T as TableColumnProps, l as TableProps } from './types-CHQnBz91.js';
4
+ 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';
5
5
  export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
6
6
 
7
7
  /**
8
8
  * Unstyled DataTable shell: semantic HTML + interaction behavior.
9
9
  * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
10
10
  * Customize via `className`, `classNames` (Tailwind-friendly part map), column
11
- * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`.
11
+ * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`
12
+ * (`Toolbar`, `Scroll`, `Row`, `Pending`, `Empty`).
12
13
  */
13
14
  declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, classNames, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
14
15
 
package/dist/compound.js CHANGED
@@ -2279,6 +2279,13 @@ function useGlideTable(options) {
2279
2279
 
2280
2280
  // src/components/ui/table/components/DataTable/DataTable.tsx
2281
2281
  import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
2282
+ function DefaultScroll({
2283
+ scrollRef,
2284
+ children,
2285
+ className
2286
+ }) {
2287
+ return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
2288
+ }
2282
2289
  function DefaultPending({
2283
2290
  loadingText,
2284
2291
  className,
@@ -2347,6 +2354,7 @@ function DataTable({
2347
2354
  clearHover
2348
2355
  } = useGlideTable(glideOptions);
2349
2356
  const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
2357
+ const ScrollSlot = slots?.Scroll ?? DefaultScroll;
2350
2358
  const RowSlot = slots?.Row ?? DataTableRow;
2351
2359
  const PendingSlot = slots?.Pending ?? DefaultPending;
2352
2360
  const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2389,7 +2397,7 @@ function DataTable({
2389
2397
  classNames
2390
2398
  }
2391
2399
  ),
2392
- /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ jsxs4(
2400
+ /* @__PURE__ */ jsx5(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs4(
2393
2401
  "table",
2394
2402
  {
2395
2403
  className: cn("data-table", classNames?.table),
package/dist/core.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { p as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, j as RowsPastePayload } from './types-B4uHdkrY.cjs';
2
- export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, l as buildColumnFreezeOffsets, m as getColumnFreezeEdgeAttr, n as getColumnFreezeStyle, r as resolveColumnFreezeSide, o as resolveDataTableLabels } from './types-B4uHdkrY.cjs';
1
+ 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';
2
+ 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';
3
3
  import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
4
4
  export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
5
5
  import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
package/dist/core.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { p as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, j as RowsPastePayload } from './types-B4uHdkrY.js';
2
- export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, l as buildColumnFreezeOffsets, m as getColumnFreezeEdgeAttr, n as getColumnFreezeStyle, r as resolveColumnFreezeSide, o as resolveDataTableLabels } from './types-B4uHdkrY.js';
1
+ 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';
2
+ 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';
3
3
  import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
4
4
  export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
5
5
  import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
package/dist/index.cjs CHANGED
@@ -2365,6 +2365,13 @@ function DataTableToolbar({
2365
2365
 
2366
2366
  // src/components/ui/table/components/DataTable/DataTable.tsx
2367
2367
  var import_jsx_runtime5 = require("react/jsx-runtime");
2368
+ function DefaultScroll({
2369
+ scrollRef,
2370
+ children,
2371
+ className
2372
+ }) {
2373
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
2374
+ }
2368
2375
  function DefaultPending({
2369
2376
  loadingText,
2370
2377
  className,
@@ -2433,6 +2440,7 @@ function DataTable({
2433
2440
  clearHover
2434
2441
  } = useGlideTable(glideOptions);
2435
2442
  const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
2443
+ const ScrollSlot = slots?.Scroll ?? DefaultScroll;
2436
2444
  const RowSlot = slots?.Row ?? DataTableRow;
2437
2445
  const PendingSlot = slots?.Pending ?? DefaultPending;
2438
2446
  const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2475,7 +2483,7 @@ function DataTable({
2475
2483
  classNames
2476
2484
  }
2477
2485
  ),
2478
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2486
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2479
2487
  "table",
2480
2488
  {
2481
2489
  className: cn("data-table", classNames?.table),
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- 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 DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload, T as TableColumnProps, k as TableProps, l as buildColumnFreezeOffsets, m as getColumnFreezeEdgeAttr, n as getColumnFreezeStyle, r as resolveColumnFreezeSide, o as resolveDataTableLabels } from './types-B4uHdkrY.cjs';
1
+ 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';
2
2
  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';
3
3
  export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
4
4
  export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- 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 DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload, T as TableColumnProps, k as TableProps, l as buildColumnFreezeOffsets, m as getColumnFreezeEdgeAttr, n as getColumnFreezeStyle, r as resolveColumnFreezeSide, o as resolveDataTableLabels } from './types-B4uHdkrY.js';
1
+ 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';
2
2
  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';
3
3
  export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
4
4
  export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
package/dist/index.js CHANGED
@@ -2301,6 +2301,13 @@ function DataTableToolbar({
2301
2301
 
2302
2302
  // src/components/ui/table/components/DataTable/DataTable.tsx
2303
2303
  import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
2304
+ function DefaultScroll({
2305
+ scrollRef,
2306
+ children,
2307
+ className
2308
+ }) {
2309
+ return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
2310
+ }
2304
2311
  function DefaultPending({
2305
2312
  loadingText,
2306
2313
  className,
@@ -2369,6 +2376,7 @@ function DataTable({
2369
2376
  clearHover
2370
2377
  } = useGlideTable(glideOptions);
2371
2378
  const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
2379
+ const ScrollSlot = slots?.Scroll ?? DefaultScroll;
2372
2380
  const RowSlot = slots?.Row ?? DataTableRow;
2373
2381
  const PendingSlot = slots?.Pending ?? DefaultPending;
2374
2382
  const EmptySlot = slots?.Empty ?? DefaultEmpty;
@@ -2411,7 +2419,7 @@ function DataTable({
2411
2419
  classNames
2412
2420
  }
2413
2421
  ),
2414
- /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ jsxs4(
2422
+ /* @__PURE__ */ jsx5(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs4(
2415
2423
  "table",
2416
2424
  {
2417
2425
  className: cn("data-table", classNames?.table),
@@ -1,5 +1,5 @@
1
1
  import { ColumnDef, RowSelectionState, Updater, ColumnSizingState, OnChangeFn, ColumnResizeMode, Row } from '@tanstack/react-table';
2
- import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
2
+ import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType, Ref } from 'react';
3
3
 
4
4
  /** Sticky edge for a frozen column. Does not reorder columns. */
5
5
  type ColumnFreezeSide = "left" | "right";
@@ -312,6 +312,17 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
312
312
  virtualIndex?: number;
313
313
  measureElement?: (node: Element | null) => void;
314
314
  };
315
+ /**
316
+ * Scroll-region slot props for the semantic DataTable shell.
317
+ *
318
+ * `scrollRef` must be attached to the element that actually owns overflow
319
+ * scrolling — row virtualization reads it via `getScrollElement`.
320
+ */
321
+ type DataTableScrollSlotProps = {
322
+ children: ReactNode;
323
+ className?: string;
324
+ scrollRef: Ref<HTMLDivElement | null>;
325
+ };
315
326
  /**
316
327
  * Slot replacements for the default DataTable shell (semantic HTML + behavior only).
317
328
  * Row-level custom UI → `Row`; cell content → `Table.Column` / column `render`.
@@ -320,6 +331,11 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
320
331
  type DataTableSlots<T extends Record<string, unknown>> = {
321
332
  /** Top summary / actions region */
322
333
  Toolbar?: ComponentType<DataTableToolbarSlotProps>;
334
+ /**
335
+ * Table scroll container. Must forward `scrollRef` to the real scroll element
336
+ * (required for virtualization).
337
+ */
338
+ Scroll?: ComponentType<DataTableScrollSlotProps>;
323
339
  /** Full row replacement (cells, selection, edit UI) */
324
340
  Row?: ComponentType<DataTableRowSlotProps<T>>;
325
341
  /** Replace the pending state view */
@@ -374,4 +390,4 @@ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "co
374
390
  children: ReactNode;
375
391
  };
376
392
 
377
- 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 DataTableSlots as i, type RowsPastePayload as j, type TableProps as k, buildColumnFreezeOffsets as l, getColumnFreezeEdgeAttr as m, getColumnFreezeStyle as n, resolveDataTableLabels as o, type CellEditType as p, resolveColumnFreezeSide as r };
393
+ 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 };
@@ -1,5 +1,5 @@
1
1
  import { ColumnDef, RowSelectionState, Updater, ColumnSizingState, OnChangeFn, ColumnResizeMode, Row } from '@tanstack/react-table';
2
- import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
2
+ import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType, Ref } from 'react';
3
3
 
4
4
  /** Sticky edge for a frozen column. Does not reorder columns. */
5
5
  type ColumnFreezeSide = "left" | "right";
@@ -312,6 +312,17 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
312
312
  virtualIndex?: number;
313
313
  measureElement?: (node: Element | null) => void;
314
314
  };
315
+ /**
316
+ * Scroll-region slot props for the semantic DataTable shell.
317
+ *
318
+ * `scrollRef` must be attached to the element that actually owns overflow
319
+ * scrolling — row virtualization reads it via `getScrollElement`.
320
+ */
321
+ type DataTableScrollSlotProps = {
322
+ children: ReactNode;
323
+ className?: string;
324
+ scrollRef: Ref<HTMLDivElement | null>;
325
+ };
315
326
  /**
316
327
  * Slot replacements for the default DataTable shell (semantic HTML + behavior only).
317
328
  * Row-level custom UI → `Row`; cell content → `Table.Column` / column `render`.
@@ -320,6 +331,11 @@ type DataTableRowSlotProps<T extends Record<string, unknown>> = {
320
331
  type DataTableSlots<T extends Record<string, unknown>> = {
321
332
  /** Top summary / actions region */
322
333
  Toolbar?: ComponentType<DataTableToolbarSlotProps>;
334
+ /**
335
+ * Table scroll container. Must forward `scrollRef` to the real scroll element
336
+ * (required for virtualization).
337
+ */
338
+ Scroll?: ComponentType<DataTableScrollSlotProps>;
323
339
  /** Full row replacement (cells, selection, edit UI) */
324
340
  Row?: ComponentType<DataTableRowSlotProps<T>>;
325
341
  /** Replace the pending state view */
@@ -374,4 +390,4 @@ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "co
374
390
  children: ReactNode;
375
391
  };
376
392
 
377
- 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 DataTableSlots as i, type RowsPastePayload as j, type TableProps as k, buildColumnFreezeOffsets as l, getColumnFreezeEdgeAttr as m, getColumnFreezeStyle as n, resolveDataTableLabels as o, type CellEditType as p, resolveColumnFreezeSide as r };
393
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-glide-table",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"