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 +4 -1
- package/dist/compound.cjs +9 -1
- package/dist/compound.d.cts +4 -3
- package/dist/compound.d.ts +4 -3
- package/dist/compound.js +9 -1
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/index.cjs +9 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -1
- package/dist/{types-B4uHdkrY.d.cts → types-CHQnBz91.d.cts} +18 -2
- package/dist/{types-B4uHdkrY.d.ts → types-CHQnBz91.d.ts} +18 -2
- package/package.json +1 -1
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)(
|
|
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),
|
package/dist/compound.d.cts
CHANGED
|
@@ -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,
|
|
4
|
-
export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableSlots, P as PasteMode, R as RowSelectionMode,
|
|
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
|
|
package/dist/compound.d.ts
CHANGED
|
@@ -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,
|
|
4
|
-
export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableSlots, P as PasteMode, R as RowSelectionMode,
|
|
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(
|
|
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 {
|
|
2
|
-
export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS,
|
|
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 {
|
|
2
|
-
export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS,
|
|
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)(
|
|
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,
|
|
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,
|
|
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(
|
|
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
|
|
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
|
|
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 };
|