@pinnacle0/web-ui 0.3.68 → 0.3.70
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/admin/AdminPage/Filter.d.ts +3 -1
- package/admin/AdminPage/Filter.js +3 -3
- package/admin/AdminPage/Filter.js.map +1 -1
- package/core/VirtualList.d.ts +25 -0
- package/core/VirtualList.js +49 -0
- package/core/VirtualList.js.map +1 -0
- package/core/VirtualTable/TableHeader.d.ts +4 -5
- package/core/VirtualTable/TableHeader.js +6 -32
- package/core/VirtualTable/TableHeader.js.map +1 -1
- package/core/VirtualTable/TableRow.d.ts +5 -8
- package/core/VirtualTable/TableRow.js +18 -28
- package/core/VirtualTable/TableRow.js.map +1 -1
- package/core/VirtualTable/hooks/useColumns.d.ts +30 -0
- package/core/VirtualTable/hooks/useColumns.js +91 -0
- package/core/VirtualTable/hooks/useColumns.js.map +1 -0
- package/core/VirtualTable/hooks/useScroll.d.ts +17 -0
- package/core/VirtualTable/hooks/useScroll.js +56 -0
- package/core/VirtualTable/hooks/useScroll.js.map +1 -0
- package/core/VirtualTable/index.d.ts +5 -7
- package/core/VirtualTable/index.js +39 -71
- package/core/VirtualTable/index.js.map +1 -1
- package/core/VirtualTable/index.less +18 -18
- package/core/VirtualTable/type.d.ts +0 -13
- package/{core/VirtualTable/hooks → hooks}/useDebounce.d.ts +0 -0
- package/{core/VirtualTable/hooks → hooks}/useDebounce.js +0 -0
- package/hooks/useDebounce.js.map +1 -0
- package/package.json +3 -1
- package/core/VirtualTable/hooks/useColumnWidths.d.ts +0 -11
- package/core/VirtualTable/hooks/useColumnWidths.js +0 -38
- package/core/VirtualTable/hooks/useColumnWidths.js.map +0 -1
- package/core/VirtualTable/hooks/useDebounce.js.map +0 -1
- package/core/VirtualTable/hooks/useLayout.d.ts +0 -17
- package/core/VirtualTable/hooks/useLayout.js +0 -44
- package/core/VirtualTable/hooks/useLayout.js.map +0 -1
- package/core/VirtualTable/hooks/useRowExpand.d.ts +0 -7
- package/core/VirtualTable/hooks/useRowExpand.js +0 -20
- package/core/VirtualTable/hooks/useRowExpand.js.map +0 -1
- package/core/VirtualTable/hooks/useScrollBarSize.d.ts +0 -5
- package/core/VirtualTable/hooks/useScrollBarSize.js +0 -36
- package/core/VirtualTable/hooks/useScrollBarSize.js.map +0 -1
- package/core/VirtualTable/hooks/useScrollToEdge.d.ts +0 -8
- package/core/VirtualTable/hooks/useScrollToEdge.js +0 -48
- package/core/VirtualTable/hooks/useScrollToEdge.js.map +0 -1
- package/core/VirtualTable/hooks/useStickyPosition.d.ts +0 -2
- package/core/VirtualTable/hooks/useStickyPosition.js +0 -24
- package/core/VirtualTable/hooks/useStickyPosition.js.map +0 -1
- package/core/VirtualTable/hooks/useTransformColumn.d.ts +0 -11
- package/core/VirtualTable/hooks/useTransformColumn.js +0 -9
- package/core/VirtualTable/hooks/useTransformColumn.js.map +0 -1
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { SafeReactChildren } from "../../internal/type";
|
|
3
|
+
import type { FormErrorDisplayMode } from "../../core/Form/context";
|
|
3
4
|
export interface Props {
|
|
4
5
|
onFinish: () => void;
|
|
5
6
|
onReset?: () => void;
|
|
6
7
|
children: SafeReactChildren;
|
|
8
|
+
errorDisplayMode?: FormErrorDisplayMode;
|
|
7
9
|
extraElements?: SafeReactChildren;
|
|
8
10
|
expandedArea?: React.ReactElement;
|
|
9
11
|
loading?: boolean;
|
|
@@ -14,7 +16,7 @@ interface State {
|
|
|
14
16
|
}
|
|
15
17
|
export declare class Filter extends React.PureComponent<Props, State> {
|
|
16
18
|
static displayName: string;
|
|
17
|
-
private readonly
|
|
19
|
+
private readonly defaultErrorDisplayMode;
|
|
18
20
|
private readonly storageKey;
|
|
19
21
|
constructor(props: Props);
|
|
20
22
|
toggleExpansion: () => void;
|
|
@@ -27,7 +27,7 @@ var Filter = /** @class */ (function (_super) {
|
|
|
27
27
|
__extends(Filter, _super);
|
|
28
28
|
function Filter(props) {
|
|
29
29
|
var _this = _super.call(this, props) || this;
|
|
30
|
-
_this.
|
|
30
|
+
_this.defaultErrorDisplayMode = { type: "popover", placement: "top" };
|
|
31
31
|
_this.toggleExpansion = function () {
|
|
32
32
|
var expanded = !_this.state.expanded;
|
|
33
33
|
_this.setState({ expanded: expanded });
|
|
@@ -38,10 +38,10 @@ var Filter = /** @class */ (function (_super) {
|
|
|
38
38
|
return _this;
|
|
39
39
|
}
|
|
40
40
|
Filter.prototype.render = function () {
|
|
41
|
-
var _a = this.props, onFinish = _a.onFinish, onReset = _a.onReset, extraElements = _a.extraElements, reminder = _a.reminder, loading = _a.loading, children = _a.children, expandedArea = _a.expandedArea;
|
|
41
|
+
var _a = this.props, onFinish = _a.onFinish, onReset = _a.onReset, extraElements = _a.extraElements, reminder = _a.reminder, loading = _a.loading, children = _a.children, expandedArea = _a.expandedArea, errorDisplayMode = _a.errorDisplayMode;
|
|
42
42
|
var expanded = this.state.expanded;
|
|
43
43
|
var t = i18n();
|
|
44
|
-
return (React.createElement(Form, { className: "g-admin-page-filter", onFinish: onFinish, layout: "inline", errorDisplayMode: this.
|
|
44
|
+
return (React.createElement(Form, { className: "g-admin-page-filter", onFinish: onFinish, layout: "inline", errorDisplayMode: errorDisplayMode || this.defaultErrorDisplayMode, buttonRenderer: null },
|
|
45
45
|
children,
|
|
46
46
|
React.createElement(Space, null,
|
|
47
47
|
reminder && React.createElement(WithExplanation, { explanation: reminder }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/admin/AdminPage/Filter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAC1D,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,IAAI,EAAC,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAC,IAAI,EAAC,MAAM,2BAA2B,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/admin/AdminPage/Filter.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { VirtualizerOptions } from "@tanstack/react-virtual";
|
|
2
|
+
import type { ComponentType } from "react";
|
|
3
|
+
import type { StringKey } from "../internal/type";
|
|
4
|
+
declare type Direction = "horizontal" | "vertical";
|
|
5
|
+
export interface ItemProps<T extends object> {
|
|
6
|
+
index: number;
|
|
7
|
+
data: T;
|
|
8
|
+
measure: (element: HTMLElement | null) => void;
|
|
9
|
+
}
|
|
10
|
+
export interface Props<T extends object> {
|
|
11
|
+
initialRect?: {
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
};
|
|
15
|
+
data: T[];
|
|
16
|
+
renderData: ComponentType<ItemProps<T>>;
|
|
17
|
+
rowKey?: StringKey<T> | "index";
|
|
18
|
+
direction?: Direction;
|
|
19
|
+
fixedSize?: (index: number) => number;
|
|
20
|
+
overscan?: number;
|
|
21
|
+
observeElementRect?: VirtualizerOptions<HTMLElement | null, HTMLElement>["observeElementRect"];
|
|
22
|
+
observeElementOffset?: VirtualizerOptions<HTMLElement | null, HTMLElement>["observeElementOffset"];
|
|
23
|
+
}
|
|
24
|
+
export declare function VirtualList<T extends object>({ data, rowKey, direction, renderData, overscan, initialRect, observeElementOffset, fixedSize, observeElementRect, }: Props<T>): JSX.Element;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
import { useVirtualizer, observeElementOffset as defaultObserveElementOffset, observeElementRect as defaultObserveElementRect } from "@tanstack/react-virtual";
|
|
14
|
+
var DEFAULT_ITEM_SIZE = 100;
|
|
15
|
+
export function VirtualList(_a) {
|
|
16
|
+
var data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? "index" : _b, _c = _a.direction, direction = _c === void 0 ? "vertical" : _c, renderData = _a.renderData, _d = _a.overscan, overscan = _d === void 0 ? 5 : _d, _e = _a.initialRect, initialRect = _e === void 0 ? { width: 0, height: 0 } : _e, observeElementOffset = _a.observeElementOffset, fixedSize = _a.fixedSize, observeElementRect = _a.observeElementRect;
|
|
17
|
+
var Item = renderData;
|
|
18
|
+
var parentRef = React.useRef(null);
|
|
19
|
+
var horizontal = direction === "horizontal";
|
|
20
|
+
var sizeStyle = horizontal ? { height: "100%" } : { width: "100%" };
|
|
21
|
+
var virtualizer = useVirtualizer({
|
|
22
|
+
initialRect: initialRect,
|
|
23
|
+
horizontal: horizontal,
|
|
24
|
+
count: data.length,
|
|
25
|
+
getScrollElement: function () { return parentRef.current; },
|
|
26
|
+
estimateSize: fixedSize !== null && fixedSize !== void 0 ? fixedSize : (function () { return DEFAULT_ITEM_SIZE; }),
|
|
27
|
+
observeElementOffset: observeElementOffset !== null && observeElementOffset !== void 0 ? observeElementOffset : defaultObserveElementOffset,
|
|
28
|
+
observeElementRect: observeElementRect !== null && observeElementRect !== void 0 ? observeElementRect : defaultObserveElementRect,
|
|
29
|
+
overscan: overscan,
|
|
30
|
+
});
|
|
31
|
+
var virtualizerRef = React.useRef(virtualizer);
|
|
32
|
+
virtualizerRef.current = virtualizer;
|
|
33
|
+
// TODO/Alvis: This is temporary fix of issue: https://github.com/TanStack/virtual/issues/363, please remove the code after update
|
|
34
|
+
React.useLayoutEffect(function () {
|
|
35
|
+
var v = virtualizerRef.current;
|
|
36
|
+
v._didMount()();
|
|
37
|
+
v._willUpdate();
|
|
38
|
+
}, [data.length]);
|
|
39
|
+
var getItemKey = function (index) { return (rowKey === "index" ? index : data[index][rowKey]); };
|
|
40
|
+
return (React.createElement("div", { className: "g-virtual-list", ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto" } },
|
|
41
|
+
React.createElement("div", { className: "g-virtual-list-inner", style: {
|
|
42
|
+
height: horizontal ? "100%" : virtualizer.getTotalSize(),
|
|
43
|
+
width: horizontal ? virtualizer.getTotalSize() : "100%",
|
|
44
|
+
position: "relative",
|
|
45
|
+
} }, virtualizer.getVirtualItems().map(function (virtualRow) { return (React.createElement("div", { className: "g-virtual-list-item", key: getItemKey(virtualRow.index), style: __assign({ position: "absolute", top: 0, left: 0, transform: horizontal ? "translateX(".concat(virtualRow.start, "px)") : "translateY(".concat(virtualRow.start, "px)") }, sizeStyle) },
|
|
46
|
+
React.createElement("div", { className: "g-virtual-list-item-wrapper", ref: virtualRow.measureElement, style: __assign({}, sizeStyle) },
|
|
47
|
+
React.createElement(Item, { data: data[virtualRow.index], index: virtualRow.index, measure: virtualRow.measureElement })))); }))));
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../src/core/VirtualList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type {
|
|
2
|
+
import type { VirtualTableColumn, StickyPosition } from "./type";
|
|
3
3
|
interface Props<RowType extends object> {
|
|
4
|
-
|
|
4
|
+
headerRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
5
5
|
headerHeight: number;
|
|
6
6
|
columns: VirtualTableColumn<RowType>[];
|
|
7
|
-
|
|
8
|
-
getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
|
|
7
|
+
stickyPositionMap: Record<number, StickyPosition>;
|
|
9
8
|
}
|
|
10
|
-
export declare const TableHeader: (<RowType extends object>({
|
|
9
|
+
export declare const TableHeader: (<RowType extends object>({ headerRef, headerHeight, columns, stickyPositionMap }: Props<RowType>) => JSX.Element) & {
|
|
11
10
|
displayName: string;
|
|
12
11
|
};
|
|
13
12
|
export {};
|
|
@@ -1,42 +1,16 @@
|
|
|
1
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
-
if (ar || !(i in from)) {
|
|
20
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
-
ar[i] = from[i];
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
-
};
|
|
26
1
|
import React from "react";
|
|
27
2
|
import { classNames } from "../../util/ClassNames";
|
|
28
3
|
export var TableHeader = Object.assign(function (_a) {
|
|
29
|
-
var
|
|
30
|
-
return (React.createElement("div", { className: "table-headers", ref:
|
|
31
|
-
var _b;
|
|
4
|
+
var headerRef = _a.headerRef, headerHeight = _a.headerHeight, columns = _a.columns, stickyPositionMap = _a.stickyPositionMap;
|
|
5
|
+
return (React.createElement("div", { className: "table-headers", ref: headerRef, style: { height: headerHeight, width: scrollX || "100%" } }, columns.map(function (_a, columnIndex) {
|
|
32
6
|
var title = _a.title, width = _a.width, align = _a.align, fixed = _a.fixed, display = _a.display;
|
|
33
|
-
var
|
|
34
|
-
return (React.createElement("div", { className: classNames
|
|
7
|
+
var stickyPosition = stickyPositionMap[columnIndex];
|
|
8
|
+
return (React.createElement("div", { className: classNames("table-header", { fixed: fixed, left: fixed === "left", right: fixed === "right", last: stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.isLast }), key: columnIndex, style: {
|
|
35
9
|
display: display !== "hidden" ? "flex" : "none",
|
|
36
10
|
flex: "1 0 ".concat(width, "px"),
|
|
37
11
|
textAlign: align,
|
|
38
|
-
left: fixed === "left" ?
|
|
39
|
-
right: fixed === "right" ?
|
|
12
|
+
left: fixed === "left" ? stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value : undefined,
|
|
13
|
+
right: fixed === "right" ? stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value : undefined,
|
|
40
14
|
} }, title));
|
|
41
15
|
})));
|
|
42
16
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAUjD,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CACpC,UAAkC,EAAqE;QAApE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAA,EAAE,iBAAiB,uBAAA;IAClF,OAAO,CACH,6BAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,IAAI,MAAM,EAAC,IACjG,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqC,EAAE,WAAW;YAAjD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;QAC9C,IAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;QACtD,OAAO,CACH,6BACI,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,EAAC,KAAK,OAAA,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAC,CAAC,EAC9H,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;gBACH,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC/C,IAAI,EAAE,cAAO,KAAK,OAAI;gBACtB,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAC,CAAC,CAAC,SAAS;gBAC1D,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAC,CAAC,CAAC,SAAS;aAC/D,IAEA,KAAK,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,EACD;IACI,WAAW,EAAE,aAAa;CAC7B,CACJ,CAAC"}
|
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { VirtualItem } from "react-virtual";
|
|
3
|
-
import type {
|
|
2
|
+
import type { VirtualItem } from "@tanstack/react-virtual";
|
|
3
|
+
import type { VirtualTableColumn, StickyPosition } from "./type";
|
|
4
4
|
interface Props<RowType extends object> {
|
|
5
5
|
data: RowType;
|
|
6
6
|
columns: VirtualTableColumn<RowType>[];
|
|
7
|
-
virtualItem: VirtualItem
|
|
7
|
+
virtualItem: VirtualItem<HTMLDivElement>;
|
|
8
8
|
columnWidths: number[];
|
|
9
9
|
rowHeight: number;
|
|
10
|
-
lastShownColumnIndex: number;
|
|
11
10
|
scrollBarSize: number;
|
|
12
|
-
|
|
13
|
-
getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
|
|
11
|
+
stickyPositionMap: Record<number, StickyPosition>;
|
|
14
12
|
rowClassName?: string;
|
|
15
13
|
onRowClick?: (record: RowType, rowIndex: number) => void;
|
|
16
|
-
rowExpand?: VirtualTableRowExpand<RowType>;
|
|
17
14
|
}
|
|
18
|
-
export declare const TableRow: (<RowType extends object>({ virtualItem,
|
|
15
|
+
export declare const TableRow: (<RowType extends object>({ virtualItem, data, columns, columnWidths, rowHeight, scrollBarSize, stickyPositionMap, rowClassName, onRowClick }: Props<RowType>) => JSX.Element) & {
|
|
19
16
|
displayName: string;
|
|
20
17
|
};
|
|
21
18
|
export {};
|
|
@@ -26,34 +26,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
26
26
|
import React from "react";
|
|
27
27
|
import { classNames } from "../../util/ClassNames";
|
|
28
28
|
export var TableRow = Object.assign(function (_a) {
|
|
29
|
-
var virtualItem = _a.virtualItem,
|
|
30
|
-
var rowRef = React.useRef(null);
|
|
31
|
-
var _b = __read(React.useState((rowExpand === null || rowExpand === void 0 ? void 0 : rowExpand.isDefaultExpanded) || false), 2), isExpanded = _b[0], setIsExpanded = _b[1];
|
|
29
|
+
var virtualItem = _a.virtualItem, data = _a.data, columns = _a.columns, columnWidths = _a.columnWidths, rowHeight = _a.rowHeight, scrollBarSize = _a.scrollBarSize, stickyPositionMap = _a.stickyPositionMap, rowClassName = _a.rowClassName, onRowClick = _a.onRowClick;
|
|
32
30
|
var rowIndex = virtualItem.index;
|
|
33
|
-
var
|
|
34
|
-
React.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
height: rowHeight,
|
|
51
|
-
width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
|
|
52
|
-
textAlign: column.align,
|
|
53
|
-
left: column.fixed === "left" ? stickyPositionValue : undefined,
|
|
54
|
-
right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
|
|
55
|
-
} }, renderData)));
|
|
56
|
-
}),
|
|
57
|
-
rowExpand && React.createElement("div", { className: classNames("expand-row", { expanded: isExpanded }) }, rowExpand.renderExpandRow(data, rowIndex))));
|
|
31
|
+
var lastShownColumnIndex = React.useMemo(function () { return columns.length - 1 - __spreadArray([], __read(columns), false).reverse().findIndex(function (_) { return _.display !== "hidden"; }); }, [columns]);
|
|
32
|
+
return (React.createElement("div", { key: rowIndex, className: classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even"), style: { transform: "translateY(".concat(virtualItem.start, "px)") }, onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, rowIndex); } }, columns.map(function (column, columnIndex) {
|
|
33
|
+
var colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
|
|
34
|
+
// handle colspan > 1
|
|
35
|
+
var cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce(function (acc, curr) { return acc + curr; }, 0) : columnWidths[columnIndex] || column.width;
|
|
36
|
+
var renderData = column.display !== "hidden" && column.renderData(data, rowIndex);
|
|
37
|
+
// minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
|
|
38
|
+
var isLastShownColumn = lastShownColumnIndex === columnIndex;
|
|
39
|
+
var stickyPosition = stickyPositionMap[columnIndex];
|
|
40
|
+
return (renderData && (React.createElement("div", { className: classNames("table-cell", { fixed: column.fixed, left: column.fixed === "left", right: column.fixed === "right", last: stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.isLast }), key: columnIndex, style: {
|
|
41
|
+
height: rowHeight,
|
|
42
|
+
width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
|
|
43
|
+
textAlign: column.align,
|
|
44
|
+
left: column.fixed === "left" ? stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value : undefined,
|
|
45
|
+
right: column.fixed === "right" ? (stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value) - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
|
|
46
|
+
} }, renderData)));
|
|
47
|
+
})));
|
|
58
48
|
}, { displayName: "TableRow" });
|
|
59
49
|
//# sourceMappingURL=TableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { VirtualTableColumn, StickyPosition } from "../type";
|
|
3
|
+
interface Props<RowType extends object> {
|
|
4
|
+
columns: VirtualTableColumn<RowType>[];
|
|
5
|
+
headerRef: React.RefObject<HTMLDivElement>;
|
|
6
|
+
scrollContentRef: React.RefObject<HTMLDivElement>;
|
|
7
|
+
isScrollable: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare function useColumns<RowType extends object>({ columns, headerRef, scrollContentRef, isScrollable }: Props<RowType>): {
|
|
10
|
+
isReady: boolean;
|
|
11
|
+
columnWidths: React.MutableRefObject<number[]>;
|
|
12
|
+
getColumnWidths: () => void;
|
|
13
|
+
stickyPositionMap: Record<number, StickyPosition>;
|
|
14
|
+
scrollBarSize: number;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
*
|
|
18
|
+
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
19
|
+
* the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
|
|
20
|
+
* useLayoutEffect will be trigged in the transition process and get the final correct column widths
|
|
21
|
+
*
|
|
22
|
+
*/
|
|
23
|
+
export declare const useColumnWidths: (headerRef: React.RefObject<HTMLDivElement>) => {
|
|
24
|
+
columnWidths: React.MutableRefObject<number[]>;
|
|
25
|
+
isColumnWidthsReady: boolean;
|
|
26
|
+
getColumnWidths: () => void;
|
|
27
|
+
};
|
|
28
|
+
export declare const useStickyPosition: <RowType extends object>(columns: VirtualTableColumn<RowType>[], columnWidths: number[]) => Record<number, StickyPosition>;
|
|
29
|
+
export declare const useScrollBar: (scrollContentRef: React.RefObject<HTMLDivElement>, isReady: boolean, isScrollable: boolean) => number;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
import React from "react";
|
|
18
|
+
import { ArrayUtil } from "../../../internal/ArrayUtil";
|
|
19
|
+
export function useColumns(_a) {
|
|
20
|
+
var columns = _a.columns, headerRef = _a.headerRef, scrollContentRef = _a.scrollContentRef, isScrollable = _a.isScrollable;
|
|
21
|
+
var _b = useColumnWidths(headerRef), columnWidths = _b.columnWidths, isColumnWidthsReady = _b.isColumnWidthsReady, getColumnWidths = _b.getColumnWidths;
|
|
22
|
+
var stickyPositionMap = useStickyPosition(columns, isColumnWidthsReady ? columnWidths.current : []);
|
|
23
|
+
var scrollBarSize = useScrollBar(scrollContentRef, isColumnWidthsReady, isScrollable);
|
|
24
|
+
return {
|
|
25
|
+
isReady: isColumnWidthsReady,
|
|
26
|
+
columnWidths: columnWidths,
|
|
27
|
+
getColumnWidths: getColumnWidths,
|
|
28
|
+
stickyPositionMap: stickyPositionMap,
|
|
29
|
+
scrollBarSize: scrollBarSize,
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
*
|
|
34
|
+
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
35
|
+
* the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
|
|
36
|
+
* useLayoutEffect will be trigged in the transition process and get the final correct column widths
|
|
37
|
+
*
|
|
38
|
+
*/
|
|
39
|
+
export var useColumnWidths = function (headerRef) {
|
|
40
|
+
var _a = __read(React.useState(false), 2), isColumnWidthsReady = _a[0], setIsColumnWidthsReady = _a[1];
|
|
41
|
+
var columnWidths = React.useRef([]);
|
|
42
|
+
var getColumnWidths = React.useCallback(function () {
|
|
43
|
+
if (headerRef.current) {
|
|
44
|
+
setIsColumnWidthsReady(false);
|
|
45
|
+
var headers = headerRef.current.querySelectorAll(".table-header");
|
|
46
|
+
columnWidths.current = Array.prototype.slice.call(headers).map(function (header) {
|
|
47
|
+
var width = header.getBoundingClientRect().width;
|
|
48
|
+
return width;
|
|
49
|
+
});
|
|
50
|
+
setIsColumnWidthsReady(true);
|
|
51
|
+
}
|
|
52
|
+
}, [headerRef]);
|
|
53
|
+
return { columnWidths: columnWidths, isColumnWidthsReady: isColumnWidthsReady, getColumnWidths: getColumnWidths };
|
|
54
|
+
};
|
|
55
|
+
export var useStickyPosition = function (columns, columnWidths) {
|
|
56
|
+
return React.useMemo(function () {
|
|
57
|
+
var stickyPositionMap = {};
|
|
58
|
+
var left = [];
|
|
59
|
+
var right = [];
|
|
60
|
+
var leftFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); });
|
|
61
|
+
// the right sticky value stack in reverse direction
|
|
62
|
+
var rightFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); }).reverse();
|
|
63
|
+
leftFixedCols.forEach(function (column, idx) {
|
|
64
|
+
var stackedPositionValue = left.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
65
|
+
left.push(column.width);
|
|
66
|
+
stickyPositionMap[column.columnIndex] = { value: stackedPositionValue, isLast: idx === leftFixedCols.length - 1 };
|
|
67
|
+
});
|
|
68
|
+
rightFixedCols.forEach(function (column, idx) {
|
|
69
|
+
var stackedPositionValue = right.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
70
|
+
right.unshift(column.width);
|
|
71
|
+
stickyPositionMap[column.columnIndex] = { value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1 };
|
|
72
|
+
});
|
|
73
|
+
return stickyPositionMap;
|
|
74
|
+
}, [columnWidths, columns]);
|
|
75
|
+
};
|
|
76
|
+
export var useScrollBar = function (scrollContentRef, isReady, isScrollable) {
|
|
77
|
+
var _a = __read(React.useState(0), 2), scrollBarSize = _a[0], setScrollBarSize = _a[1];
|
|
78
|
+
var calculateScrollBarSize = React.useCallback(function () {
|
|
79
|
+
if (scrollContentRef.current) {
|
|
80
|
+
var _a = scrollContentRef.current, clientWidth = _a.clientWidth, offsetWidth = _a.offsetWidth;
|
|
81
|
+
setScrollBarSize(offsetWidth - clientWidth);
|
|
82
|
+
}
|
|
83
|
+
}, [scrollContentRef, setScrollBarSize]);
|
|
84
|
+
React.useEffect(function () {
|
|
85
|
+
if (isReady) {
|
|
86
|
+
calculateScrollBarSize();
|
|
87
|
+
}
|
|
88
|
+
}, [isScrollable, isReady, calculateScrollBarSize]);
|
|
89
|
+
return scrollBarSize;
|
|
90
|
+
};
|
|
91
|
+
//# sourceMappingURL=useColumns.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useColumns.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useColumns.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
scrollContentRef: React.RefObject<HTMLDivElement>;
|
|
4
|
+
headerRef: React.RefObject<HTMLDivElement>;
|
|
5
|
+
isReady: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const useScroll: ({ scrollContentRef, headerRef, isReady }: Props) => {
|
|
8
|
+
onScroll: () => void;
|
|
9
|
+
isScrollToLeft: boolean;
|
|
10
|
+
isScrollToRight: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const useScrollToEdge: (scrollContentRef: React.RefObject<HTMLDivElement>, isReady: boolean) => {
|
|
13
|
+
isScrollToLeft: boolean;
|
|
14
|
+
isScrollToRight: boolean;
|
|
15
|
+
checkIsScrollToEdge: () => void;
|
|
16
|
+
};
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
import React from "react";
|
|
18
|
+
export var useScroll = function (_a) {
|
|
19
|
+
var scrollContentRef = _a.scrollContentRef, headerRef = _a.headerRef, isReady = _a.isReady;
|
|
20
|
+
var _b = useScrollToEdge(scrollContentRef, isReady), isScrollToLeft = _b.isScrollToLeft, isScrollToRight = _b.isScrollToRight, checkIsScrollToEdge = _b.checkIsScrollToEdge;
|
|
21
|
+
var onScroll = React.useCallback(function () {
|
|
22
|
+
requestAnimationFrame(function () {
|
|
23
|
+
if (scrollContentRef.current && headerRef.current && scrollContentRef.current.scrollLeft !== headerRef.current.scrollLeft) {
|
|
24
|
+
headerRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
|
|
25
|
+
checkIsScrollToEdge();
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}, [scrollContentRef, headerRef, checkIsScrollToEdge]);
|
|
29
|
+
return {
|
|
30
|
+
onScroll: onScroll,
|
|
31
|
+
isScrollToLeft: isScrollToLeft,
|
|
32
|
+
isScrollToRight: isScrollToRight,
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export var useScrollToEdge = function (scrollContentRef, isReady) {
|
|
36
|
+
var _a = __read(React.useState(false), 2), isScrollToLeft = _a[0], setIsScrollToLeft = _a[1];
|
|
37
|
+
var _b = __read(React.useState(false), 2), isScrollToRight = _b[0], setIsScrollToRight = _b[1];
|
|
38
|
+
var checkIsScrollToEdge = React.useCallback(function () {
|
|
39
|
+
if (scrollContentRef.current) {
|
|
40
|
+
var _a = scrollContentRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth;
|
|
41
|
+
setIsScrollToLeft(scrollLeft <= 1);
|
|
42
|
+
setIsScrollToRight(scrollLeft >= scrollWidth - offsetWidth);
|
|
43
|
+
}
|
|
44
|
+
}, [scrollContentRef]);
|
|
45
|
+
React.useEffect(function () {
|
|
46
|
+
if (isReady) {
|
|
47
|
+
checkIsScrollToEdge();
|
|
48
|
+
}
|
|
49
|
+
}, [isReady, checkIsScrollToEdge]);
|
|
50
|
+
return {
|
|
51
|
+
isScrollToLeft: isScrollToLeft,
|
|
52
|
+
isScrollToRight: isScrollToRight,
|
|
53
|
+
checkIsScrollToEdge: checkIsScrollToEdge,
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=useScroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScroll.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useScroll.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAA6C;QAA5C,gBAAgB,sBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA;IACrD,IAAA,KAAyD,eAAe,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAlG,cAAc,oBAAA,EAAE,eAAe,qBAAA,EAAE,mBAAmB,yBAA8C,CAAC;IAC1G,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,qBAAqB,CAAC;YAClB,IAAI,gBAAgB,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE;gBACvH,SAAS,CAAC,OAAO,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;gBACnE,mBAAmB,EAAE,CAAC;aACzB;QACL,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEvD,OAAO;QACH,QAAQ,UAAA;QACR,cAAc,gBAAA;QACd,eAAe,iBAAA;KAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,gBAAiD,EAAE,OAAgB;IACzF,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1D,cAAc,QAAA,EAAE,iBAAiB,QAAyB,CAAC;IAC5D,IAAA,KAAA,OAAwC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA5D,eAAe,QAAA,EAAE,kBAAkB,QAAyB,CAAC;IAEpE,IAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC1C,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAAyC,gBAAgB,CAAC,OAAO,EAAhE,UAAU,gBAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAA4B,CAAC;YACxE,iBAAiB,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC;YACnC,kBAAkB,CAAC,UAAU,IAAI,WAAW,GAAG,WAAW,CAAC,CAAC;SAC/D;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,OAAO,EAAE;YACT,mBAAmB,EAAE,CAAC;SACzB;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEnC,OAAO;QACH,cAAc,gBAAA;QACd,eAAe,iBAAA;QACf,mBAAmB,qBAAA;KACtB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,30 +1,28 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { SafeReactChild, StringKey } from "../../internal/type";
|
|
3
|
-
import type { VirtualTableColumn,
|
|
3
|
+
import type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
|
|
4
4
|
import "./index.less";
|
|
5
5
|
export interface VirtualTableProps<RowType extends object> {
|
|
6
6
|
dataSource: RowType[];
|
|
7
7
|
columns: VirtualTableColumn<RowType>[];
|
|
8
|
-
scrollY: number;
|
|
9
8
|
rowHeight: number;
|
|
10
9
|
className?: string;
|
|
11
10
|
rowClassName?: string;
|
|
12
11
|
/**
|
|
13
|
-
* if scrollX is not provided, width: 100% will be used
|
|
14
|
-
* if width: 100% is used, please wrap the table with a container
|
|
12
|
+
* if scrollX and scrollY is not provided, height: 100% and width: 100% will be used and please wrap the table with a container
|
|
15
13
|
*/
|
|
14
|
+
scrollY?: number;
|
|
16
15
|
scrollX?: number;
|
|
17
16
|
loading?: boolean;
|
|
18
17
|
emptyPlaceholder?: SafeReactChild;
|
|
19
|
-
rowSelection?: VirtualTableRowSelection<RowType>;
|
|
20
18
|
onRowClick?: (record: RowType, rowIndex: number) => void;
|
|
21
19
|
/**
|
|
22
20
|
* Default: index
|
|
23
21
|
*/
|
|
24
22
|
rowKey?: StringKey<RowType> | "index";
|
|
25
23
|
headerHeight?: number;
|
|
26
|
-
|
|
24
|
+
rowSelection?: VirtualTableRowSelection<RowType>;
|
|
27
25
|
}
|
|
28
|
-
export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight,
|
|
26
|
+
export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, dataSource, className, rowClassName, loading, emptyPlaceholder, onRowClick, scrollY, scrollX, rowSelection, headerHeight, rowKey, }: VirtualTableProps<RowType>) => JSX.Element) & {
|
|
29
27
|
displayName: string;
|
|
30
28
|
};
|