@synerise/ds-table 0.47.16 → 0.48.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.
Files changed (32) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/InfiniteScroll/BackToTopButton.d.ts +3 -1
  3. package/dist/InfiniteScroll/BackToTopButton.styles.d.ts +6 -2
  4. package/dist/InfiniteScroll/BackToTopButton.styles.js +4 -2
  5. package/dist/InfiniteScroll/InfiniteLoaderItem.d.ts +1 -4
  6. package/dist/InfiniteScroll/InfiniteLoaderItem.js +1 -1
  7. package/dist/InfiniteScroll/InfiniteLoaderItem.styles.d.ts +1 -0
  8. package/dist/InfiniteScroll/InfiniteLoaderItem.styles.js +6 -0
  9. package/dist/InfiniteScroll/InfiniteLoaderItem.types.d.ts +17 -0
  10. package/dist/InfiniteScroll/InfiniteLoaderItem.types.js +1 -0
  11. package/dist/InfiniteScroll/OuterListElement.d.ts +3 -0
  12. package/dist/InfiniteScroll/OuterListElement.js +78 -0
  13. package/dist/InfiniteScroll/constants.d.ts +0 -13
  14. package/dist/InfiniteScroll/utils.d.ts +1 -1
  15. package/dist/Table.js +4 -1
  16. package/dist/Table.styles.js +1 -1
  17. package/dist/Table.types.d.ts +12 -10
  18. package/dist/TableHeader/TableHeader.js +3 -2
  19. package/dist/TableHeader/TableHeader.types.d.ts +12 -11
  20. package/dist/VirtualTable/VirtualTable.d.ts +23 -8
  21. package/dist/VirtualTable/VirtualTable.js +145 -98
  22. package/dist/VirtualTable/VirtualTable.styles.d.ts +17 -1
  23. package/dist/VirtualTable/VirtualTable.styles.js +37 -6
  24. package/dist/VirtualTable/VirtualTable.types.d.ts +13 -3
  25. package/dist/VirtualTable/VirtualTableRow.d.ts +1 -1
  26. package/dist/VirtualTable/VirtualTableRow.js +1 -1
  27. package/dist/VirtualTable/constants.d.ts +2 -0
  28. package/dist/VirtualTable/constants.js +2 -0
  29. package/dist/index.d.ts +2 -0
  30. package/dist/index.js +2 -1
  31. package/dist/style/index.css +1 -1
  32. package/package.json +24 -24
@@ -10,62 +10,28 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
10
10
 
11
11
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
12
12
 
13
- import * as React from 'react';
13
+ import React, { useCallback, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
14
14
  import { FixedSizeList as List } from 'react-window';
15
15
  import ResizeObserver from 'rc-resize-observer';
16
16
  import classNames from 'classnames';
17
17
  import { compact } from 'lodash';
18
18
  import { useIntl } from 'react-intl';
19
- import Scrollbar from '@synerise/ds-scrollbar';
20
19
  import { infiniteLoaderItemHeight } from '../InfiniteScroll/constants';
21
20
  import BackToTopButton from '../InfiniteScroll/BackToTopButton';
21
+ import OuterListElement from '../InfiniteScroll/OuterListElement';
22
22
  import DSTable from '../Table';
23
23
  import VirtualTableRow from './VirtualTableRow';
24
- import { RelativeContainer } from './VirtualTable.styles';
24
+ import * as S from './VirtualTable.styles';
25
25
  import { useTableLocale, calculatePixels } from '../utils';
26
26
  import { useRowKey } from '../hooks/useRowKey';
27
27
  import { useRowStar } from '../hooks/useRowStar';
28
28
  import { RowSelectionColumn } from '../RowSelection';
29
- export var EXPANDED_ROW_PROPERTY = 'expandedChild';
29
+ import { EXPANDED_ROW_PROPERTY, HEADER_ROW_HEIGHT } from './constants';
30
30
  var relativeInlineStyle = {
31
31
  position: 'relative'
32
32
  };
33
33
 
34
- var CustomScrollbar = function CustomScrollbar(containerRef) {
35
- return React.forwardRef(function (_ref, ref) {
36
- var onScroll = _ref.onScroll,
37
- children = _ref.children,
38
- style = _ref.style;
39
-
40
- var _React$useState = React.useState(null),
41
- header = _React$useState[0],
42
- setHeader = _React$useState[1];
43
-
44
- React.useEffect(function () {
45
- if (containerRef != null && containerRef.current) {
46
- var headerElement = containerRef.current.querySelector('.ant-table-header');
47
- headerElement && setHeader(headerElement);
48
- }
49
- }, []);
50
- var onScrollHandler = React.useCallback(function (e) {
51
- if (header) {
52
- header.scrollTo({
53
- left: e.currentTarget.scrollLeft
54
- });
55
- }
56
-
57
- onScroll && onScroll(e);
58
- }, [onScroll, header]);
59
- return /*#__PURE__*/React.createElement(Scrollbar, {
60
- ref: ref,
61
- onScroll: onScrollHandler,
62
- absolute: true,
63
- maxHeight: style == null ? void 0 : style.height
64
- }, children);
65
- });
66
- };
67
-
68
- function VirtualTable(props) {
34
+ var VirtualTable = function VirtualTable(props, ref) {
69
35
  var _props$columns = props.columns,
70
36
  columns = _props$columns === void 0 ? [] : _props$columns,
71
37
  scroll = props.scroll,
@@ -84,22 +50,41 @@ function VirtualTable(props) {
84
50
  dataSourceFull = props.dataSourceFull,
85
51
  expandable = props.expandable,
86
52
  locale = props.locale,
53
+ loading = props.loading,
54
+ sticky = props.sticky,
87
55
  onListRefChange = props.onListRefChange;
88
56
  var intl = useIntl();
89
57
  var tableLocale = useTableLocale(intl, locale);
90
- var listRef = React.useRef(null);
91
- var containerRef = React.useRef(null);
58
+ var listRef = useRef(null);
59
+ var outerListRef = useRef(null);
60
+ var containerRef = useRef(null);
61
+ var horizontalScrollRef = useRef(null);
62
+ var customBodyOnScrollRef = useRef();
63
+ useImperativeHandle(ref, function () {
64
+ return {
65
+ virtualListRef: listRef,
66
+ outerListRef: outerListRef,
67
+ horizontalScrollRef: horizontalScrollRef,
68
+ scrollTo: scrollTo,
69
+ scrollToTop: scrollToTop
70
+ };
71
+ });
92
72
 
93
- var _React$useState2 = React.useState(initialWidth),
94
- tableWidth = _React$useState2[0],
95
- setTableWidth = _React$useState2[1];
73
+ var _useState = useState(initialWidth),
74
+ tableWidth = _useState[0],
75
+ setTableWidth = _useState[1];
76
+
77
+ var _useState2 = useState(initialWidth),
78
+ scrollWidth = _useState2[0],
79
+ setScrollWidth = _useState2[1];
96
80
 
97
81
  var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
98
- getRowStarColumn = _useRowStar.getRowStarColumn;
82
+ getRowStarColumn = _useRowStar.getRowStarColumn; // deprecated, verify if not used and remove
83
+
99
84
 
100
- React.useEffect(function () {
101
- onListRefChange && onListRefChange(listRef);
102
- }, [listRef, onListRefChange]);
85
+ useEffect(function () {
86
+ listRef.current && onListRefChange && onListRefChange(listRef);
87
+ });
103
88
 
104
89
  var _useRowKey = useRowKey(rowKey),
105
90
  getRowKey = _useRowKey.getRowKey;
@@ -125,8 +110,8 @@ function VirtualTable(props) {
125
110
 
126
111
  function getSelectedRecords() {
127
112
  if (selection) {
128
- var _ref2 = selection,
129
- selectedRowKeys = _ref2.selectedRowKeys;
113
+ var _ref = selection,
114
+ selectedRowKeys = _ref.selectedRowKeys;
130
115
  var selectedRows = [];
131
116
  allData.forEach(function (row) {
132
117
  var key = getRowKey(row);
@@ -151,12 +136,12 @@ function VirtualTable(props) {
151
136
  return [];
152
137
  }
153
138
 
154
- var renderRowSelection = React.useCallback(function (key, record) {
155
- var _ref3 = selection,
156
- selectedRowKeys = _ref3.selectedRowKeys,
157
- limit = _ref3.limit,
158
- independentSelectionExpandedRows = _ref3.independentSelectionExpandedRows,
159
- onChange = _ref3.onChange;
139
+ var renderRowSelection = useCallback(function (key, record) {
140
+ var _ref2 = selection,
141
+ selectedRowKeys = _ref2.selectedRowKeys,
142
+ limit = _ref2.limit,
143
+ independentSelectionExpandedRows = _ref2.independentSelectionExpandedRows,
144
+ onChange = _ref2.onChange;
160
145
  return /*#__PURE__*/React.createElement(RowSelectionColumn, {
161
146
  rowKey: rowKey,
162
147
  record: record,
@@ -169,7 +154,7 @@ function VirtualTable(props) {
169
154
  });
170
155
  }, [locale, rowKey, selectedRecords, selection]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
171
156
 
172
- var virtualColumns = React.useMemo(function () {
157
+ var virtualColumns = useMemo(function () {
173
158
  return compact([!!selection && {
174
159
  width: 64,
175
160
  key: 'key',
@@ -177,14 +162,14 @@ function VirtualTable(props) {
177
162
  render: renderRowSelection
178
163
  }, !!rowStar && rowStarColumn].concat(columns));
179
164
  }, [selection, renderRowSelection, rowStar, rowStarColumn, columns]);
180
- var mergedColumns = React.useMemo(function () {
181
- var widthColumnCount = virtualColumns.filter(function (_ref4) {
182
- var width = _ref4.width;
165
+ var mergedColumns = useMemo(function () {
166
+ var widthColumnCount = virtualColumns.filter(function (_ref3) {
167
+ var width = _ref3.width;
183
168
  return !width;
184
169
  }).length;
185
170
  var rowWidth = tableWidth || initialWidth;
186
- var definedWidth = virtualColumns.reduce(function (total, _ref5) {
187
- var width = _ref5.width;
171
+ var definedWidth = virtualColumns.reduce(function (total, _ref4) {
172
+ var width = _ref4.width;
188
173
  var widthInPx = calculatePixels(width) || 0;
189
174
  return total + widthInPx;
190
175
  }, 0);
@@ -195,35 +180,37 @@ function VirtualTable(props) {
195
180
  });
196
181
  }
197
182
 
183
+ var calculatedWidth = Math.floor((rowWidth - definedWidth) / widthColumnCount);
198
184
  return _objectSpread({}, column, {
199
- width: Math.floor((rowWidth - definedWidth) / widthColumnCount)
185
+ width: calculatedWidth > 0 ? calculatedWidth : 1
200
186
  });
201
187
  });
202
188
  }, [virtualColumns, tableWidth, initialWidth]);
203
- var listInnerElementType = React.forwardRef(function (_ref6, ref) {
204
- var style = _ref6.style,
205
- rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
189
+ var listInnerElementType = forwardRef(function (_ref5, innerElementRef) {
190
+ var style = _ref5.style,
191
+ rest = _objectWithoutPropertiesLoose(_ref5, _excluded);
206
192
 
207
- return /*#__PURE__*/React.createElement("div", _extends({
208
- ref: ref,
193
+ return /*#__PURE__*/React.createElement(S.InnerListElement, _extends({
194
+ ref: innerElementRef,
209
195
  style: _objectSpread({}, style, {
210
196
  height: Number(style == null ? void 0 : style.height) + infiniteLoaderItemHeight + "px"
211
197
  })
212
198
  }, rest));
213
199
  });
214
-
215
- var handleBackToTopClick = function handleBackToTopClick() {
200
+ var scrollTo = useCallback(function (top) {
216
201
  if (!listRef.current) {
217
202
  return;
218
203
  }
219
204
 
220
- listRef.current.scrollTo(0);
221
- };
222
-
223
- var outerElement = React.useMemo(function () {
224
- return CustomScrollbar(containerRef);
225
- }, [containerRef]);
226
- var createItemData = React.useCallback(function (data, defaultTableProps) {
205
+ listRef.current.scrollTo(top);
206
+ }, []);
207
+ var scrollToTop = useCallback(function () {
208
+ scrollTo(0);
209
+ }, [scrollTo]);
210
+ var outerElement = useMemo(function () {
211
+ return OuterListElement(containerRef, Boolean(sticky));
212
+ }, [sticky]);
213
+ var createItemData = useCallback(function (data, defaultTableProps) {
227
214
  return {
228
215
  mergedColumns: mergedColumns,
229
216
  selection: selection,
@@ -235,18 +222,33 @@ function VirtualTable(props) {
235
222
  defaultTableProps: defaultTableProps
236
223
  };
237
224
  }, [cellHeight, infiniteScroll, mergedColumns, onRowClick, rowStar, selection]);
238
- var renderBody = React.useCallback(function (rawData, meta, defaultTableProps) {
225
+ var handleStickyScrollbarScroll = useCallback(function (event) {
226
+ if (customBodyOnScrollRef.current) {
227
+ customBodyOnScrollRef.current({
228
+ scrollLeft: event.currentTarget.scrollLeft
229
+ });
230
+ }
231
+ }, []);
232
+ var renderBody = useCallback(function (rawData, meta, defaultTableProps) {
239
233
  var _expandable$expandedR;
240
234
 
235
+ customBodyOnScrollRef.current = meta.onScroll;
236
+
241
237
  var renderVirtualList = function renderVirtualList(data) {
242
238
  var listHeight = data.length * cellHeight - scroll.y + infiniteLoaderItemHeight;
239
+ var listMaxScroll = sticky && sticky.scrollThreshold && infiniteScroll != null && infiniteScroll.maxScroll ? (infiniteScroll == null ? void 0 : infiniteScroll.maxScroll) - sticky.scrollThreshold : listHeight;
240
+
241
+ var handleListScroll = function handleListScroll(_ref6) {
242
+ var scrollOffset = _ref6.scrollOffset,
243
+ scrollDirection = _ref6.scrollDirection;
244
+
245
+ if (loading || listMaxScroll <= 0) {
246
+ return;
247
+ }
243
248
 
244
- var handleListScroll = function handleListScroll(_ref7) {
245
- var scrollOffset = _ref7.scrollOffset,
246
- scrollDirection = _ref7.scrollDirection;
247
249
  var roundedOffset = Math.ceil(scrollOffset);
248
250
 
249
- if (scrollDirection === 'forward' && roundedOffset >= listHeight && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
251
+ if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
250
252
  infiniteScroll.onScrollEndReach();
251
253
  }
252
254
 
@@ -256,12 +258,38 @@ function VirtualTable(props) {
256
258
  };
257
259
 
258
260
  var itemData = createItemData(data, defaultTableProps);
259
- return /*#__PURE__*/React.createElement(List, {
261
+ var scrollableHeight = sticky ? scroll.y - HEADER_ROW_HEIGHT : scroll.y;
262
+
263
+ var handleBodyScroll = function handleBodyScroll(event) {
264
+ var scrollLeft = event.currentTarget.scrollLeft;
265
+ var info = {
266
+ scrollLeft: scrollLeft,
267
+ currentTarget: event.currentTarget
268
+ };
269
+ meta.onScroll(info);
270
+
271
+ if (horizontalScrollRef.current && horizontalScrollRef.current.scrollLeft !== scrollLeft) {
272
+ horizontalScrollRef.current.scrollTo({
273
+ left: scrollLeft
274
+ });
275
+ }
276
+ };
277
+
278
+ return /*#__PURE__*/React.createElement(S.VirtualListWrapper, {
279
+ listWidth: tableWidth,
280
+ "data-testid": "virtual-list-wrapper",
281
+ isSticky: Boolean(sticky),
282
+ listHeight: listHeight + HEADER_ROW_HEIGHT,
283
+ onScroll: handleBodyScroll // @ts-ignore
284
+ ,
285
+ ref: meta.ref
286
+ }, /*#__PURE__*/React.createElement(List, {
260
287
  ref: listRef,
261
288
  key: "virtual-list",
262
289
  onScroll: handleListScroll,
263
290
  className: "virtual-grid",
264
- height: scroll.y,
291
+ height: scrollableHeight,
292
+ layout: "vertical",
265
293
  itemCount: data.length,
266
294
  itemSize: cellHeight,
267
295
  width: "100%",
@@ -272,9 +300,10 @@ function VirtualTable(props) {
272
300
  return String(key instanceof String ? key.toLowerCase() : key);
273
301
  },
274
302
  outerElementType: outerElement,
275
- overscanCount: 1,
303
+ overscanCount: 5,
304
+ outerRef: outerListRef,
276
305
  innerElementType: infiniteScroll && listInnerElementType
277
- }, VirtualTableRow);
306
+ }, VirtualTableRow));
278
307
  };
279
308
 
280
309
  if (expandable != null && (_expandable$expandedR = expandable.expandedRowKeys) != null && _expandable$expandedR.length) {
@@ -297,33 +326,51 @@ function VirtualTable(props) {
297
326
  }
298
327
 
299
328
  return renderVirtualList(rawData);
300
- }, [cellHeight, createItemData, expandable, getRowKey, infiniteScroll, listInnerElementType, outerElement, scroll.y]);
329
+ }, [cellHeight, createItemData, expandable == null ? void 0 : expandable.expandedRowKeys, getRowKey, infiniteScroll, listInnerElementType, loading, outerElement, scroll.y, sticky, tableWidth]);
301
330
  var columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar); // eslint-disable-next-line
302
331
 
303
332
  var scrollValue = !dataSource || (dataSource == null ? void 0 : dataSource.length) === 0 ? undefined : props == null ? void 0 : props.scroll;
304
- return /*#__PURE__*/React.createElement(RelativeContainer, {
333
+ var finalColumns = mergedColumns.slice(columnsSliceStartIndex);
334
+ useEffect(function () {
335
+ if (containerRef != null && containerRef.current) {
336
+ var headerElement = containerRef.current.querySelector('.ant-table-header');
337
+ headerElement && setScrollWidth(headerElement.scrollWidth);
338
+ }
339
+ }, [finalColumns]);
340
+ var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
341
+ return /*#__PURE__*/React.createElement(S.VirtualTableWrapper, {
342
+ isSticky: Boolean(sticky),
343
+ style: sticky ? {} : relativeInlineStyle,
305
344
  key: "relative-container",
306
- ref: containerRef,
307
- style: relativeInlineStyle
345
+ ref: containerRef
308
346
  }, /*#__PURE__*/React.createElement(ResizeObserver, {
309
- onResize: function onResize(_ref8) {
310
- var offsetWidth = _ref8.offsetWidth;
347
+ onResize: function onResize(_ref7) {
348
+ var offsetWidth = _ref7.offsetWidth;
311
349
  setTableWidth(offsetWidth);
312
350
  }
313
351
  }, /*#__PURE__*/React.createElement(DSTable, _extends({}, props, {
352
+ sticky: dataSource.length ? sticky : undefined,
353
+ loading: loading,
314
354
  scroll: scrollValue,
315
- className: classNames(className, 'virtual-table', !!infiniteScroll && 'virtual-table-infinite-scroll') // Remove columns which cause header columns indent
355
+ className: classNames(className, 'virtual-table', !!infiniteScroll && 'virtual-table-infinite-scroll', Boolean(sticky) && 'with-sticky-header') // Remove columns which cause header columns indent
316
356
  // @ts-ignore
317
357
  ,
318
- columns: mergedColumns.slice(columnsSliceStartIndex),
358
+ columns: finalColumns,
319
359
  pagination: false,
320
360
  components: {
321
361
  body: renderBody
322
362
  },
323
363
  locale: tableLocale
324
364
  }))), !!(infiniteScroll != null && infiniteScroll.showBackToTopButton) && /*#__PURE__*/React.createElement(BackToTopButton, {
325
- onClick: handleBackToTopClick
326
- }, tableLocale.infiniteScrollBackToTop));
327
- }
365
+ onClick: scrollToTop
366
+ }, tableLocale.infiniteScrollBackToTop), sticky && dataSource.length ? /*#__PURE__*/React.createElement(S.StickyScrollbar, {
367
+ offset: offsetScroll || 0,
368
+ ref: horizontalScrollRef,
369
+ onScroll: handleStickyScrollbarScroll,
370
+ absolute: true
371
+ }, /*#__PURE__*/React.createElement(S.StickyScrollbarContent, {
372
+ scrollWidth: scrollWidth
373
+ })) : null);
374
+ };
328
375
 
329
- export default VirtualTable;
376
+ export default forwardRef(VirtualTable);
@@ -1,9 +1,25 @@
1
+ /// <reference types="react" />
1
2
  type ColWrapperProps = {
2
3
  width?: number | null;
3
4
  minWidth?: number | null;
4
5
  maxWidth?: number | null;
5
6
  };
6
7
  export declare const RowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const InnerListElement: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const VirtualListSpace: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const VirtualListWrapper: import("styled-components").StyledComponent<"div", any, {
11
+ isSticky: boolean;
12
+ listHeight: number;
13
+ listWidth: number;
14
+ }, never>;
15
+ export declare const StickyScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(import("@synerise/ds-scrollbar").ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, {
16
+ offset: number;
17
+ }, never>;
18
+ export declare const StickyScrollbarContent: import("styled-components").StyledComponent<"div", any, {
19
+ scrollWidth: number;
20
+ }, never>;
7
21
  export declare const ColWrapper: import("styled-components").StyledComponent<"div", any, ColWrapperProps, never>;
8
- export declare const RelativeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
22
+ export declare const VirtualTableWrapper: import("styled-components").StyledComponent<"div", any, {
23
+ isSticky: boolean;
24
+ }, never>;
9
25
  export {};
@@ -1,4 +1,5 @@
1
- import styled from 'styled-components';
1
+ import styled, { css } from 'styled-components';
2
+ import Scrollbar from '@synerise/ds-scrollbar';
2
3
 
3
4
  var numberToPixels = function numberToPixels(num) {
4
5
  return num + "px";
@@ -24,15 +25,45 @@ export var RowWrapper = styled.div.withConfig({
24
25
  displayName: "VirtualTablestyles__RowWrapper",
25
26
  componentId: "aehkhc-0"
26
27
  })(["display:inline-table;"]);
28
+ export var InnerListElement = styled.div.withConfig({
29
+ displayName: "VirtualTablestyles__InnerListElement",
30
+ componentId: "aehkhc-1"
31
+ })(["background:", ";"], function (props) {
32
+ return props.theme.palette.white;
33
+ });
34
+ export var VirtualListSpace = styled.div.withConfig({
35
+ displayName: "VirtualTablestyles__VirtualListSpace",
36
+ componentId: "aehkhc-2"
37
+ })([""]);
38
+ export var VirtualListWrapper = styled.div.withConfig({
39
+ displayName: "VirtualTablestyles__VirtualListWrapper",
40
+ componentId: "aehkhc-3"
41
+ })(["", " overscroll-behavior-x:contain;"], function (props) {
42
+ return props.isSticky && css(["width:", "px;overflow:overlay hidden;scrollbar-color:transparent;scrollbar-width:none;::-webkit-scrollbar-thumb{background-color:transparent;}::-webkit-scrollbar{display:none;}:after{content:'';width:10px;height:", "px;display:block;}"], props.listWidth, props.listHeight);
43
+ });
44
+ export var StickyScrollbar = styled(Scrollbar).withConfig({
45
+ displayName: "VirtualTablestyles__StickyScrollbar",
46
+ componentId: "aehkhc-4"
47
+ })(["position:sticky;bottom:0;z-index:2;transform:translate(5px,", "px);"], function (props) {
48
+ return props.offset;
49
+ });
50
+ export var StickyScrollbarContent = styled.div.withConfig({
51
+ displayName: "VirtualTablestyles__StickyScrollbarContent",
52
+ componentId: "aehkhc-5"
53
+ })(["width:", "px;height:10px;"], function (props) {
54
+ return props.scrollWidth;
55
+ });
27
56
  export var ColWrapper = styled.div.withConfig({
28
57
  displayName: "VirtualTablestyles__ColWrapper",
29
- componentId: "aehkhc-1"
58
+ componentId: "aehkhc-6"
30
59
  })(["display:table-cell;vertical-align:middle;width:inherit;min-width:", ";max-width:", ";padding:0 24px;&.virtual-table-cell.ant-table-selection-column{padding:0 8px 0 24px;width:auto;}&.virtual-table-cell.ds-table-star-column{padding:0 8px 0 24px;width:auto;& > button{display:flex;}}&.virtual-table-cell.ant-table-selection-column + .virtual-table-cell.ds-table-star-column{padding-left:0;}"], function (props) {
31
60
  return getColumnMinWidth(props);
32
61
  }, function (props) {
33
62
  return getColumnMaxWidth(props);
34
63
  });
35
- export var RelativeContainer = styled.div.withConfig({
36
- displayName: "VirtualTablestyles__RelativeContainer",
37
- componentId: "aehkhc-2"
38
- })(["position:relative;"]);
64
+ export var VirtualTableWrapper = styled.div.withConfig({
65
+ displayName: "VirtualTablestyles__VirtualTableWrapper",
66
+ componentId: "aehkhc-7"
67
+ })(["", ""], function (props) {
68
+ return props.isSticky ? '' : 'position: relative;';
69
+ });
@@ -1,8 +1,8 @@
1
1
  import { RefObject } from 'react';
2
2
  import { FixedSizeList as List } from 'react-window';
3
- import { InfiniteScrollProps } from '../InfiniteScroll/constants';
3
+ import { InfiniteScrollProps } from '../InfiniteScroll/InfiniteLoaderItem.types';
4
4
  import { DSTableProps } from '../Table.types';
5
- export interface Props<T> extends DSTableProps<T> {
5
+ export type Props<T> = DSTableProps<T> & {
6
6
  cellHeight: number;
7
7
  infiniteScroll?: InfiniteScrollProps;
8
8
  initialWidth: number;
@@ -10,6 +10,16 @@ export interface Props<T> extends DSTableProps<T> {
10
10
  x?: number;
11
11
  y: number;
12
12
  };
13
+ sticky?: DSTableProps<T>['sticky'] & {
14
+ scrollThreshold?: number;
15
+ };
13
16
  onListRefChange?: (ref: RefObject<List>) => void;
14
17
  onRowClick?: (row: T) => void;
15
- }
18
+ };
19
+ export type VirtualTableRef = {
20
+ virtualListRef: RefObject<List>;
21
+ outerListRef: RefObject<HTMLDivElement>;
22
+ horizontalScrollRef: RefObject<HTMLDivElement>;
23
+ scrollToTop: () => void;
24
+ scrollTo: (top: number) => void;
25
+ };
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { InfiniteScrollProps } from '../InfiniteScroll/constants';
2
+ import { InfiniteScrollProps } from '../InfiniteScroll/InfiniteLoaderItem.types';
3
3
  import { RowSelection, DSTableProps } from '../Table.types';
4
4
  import { RowStar } from '../hooks/useRowStar';
5
5
  export interface VirtualTableRowProps<T> {
@@ -8,7 +8,7 @@ import * as React from 'react';
8
8
  import classNames from 'classnames';
9
9
  import { areEqual } from 'react-window';
10
10
  import InfiniteLoaderItem from '../InfiniteScroll/InfiniteLoaderItem';
11
- import { EXPANDED_ROW_PROPERTY } from './VirtualTable';
11
+ import { EXPANDED_ROW_PROPERTY } from './constants';
12
12
  import * as S from './VirtualTable.styles';
13
13
  import { getValueFromPath, calculatePixels } from '../utils';
14
14
 
@@ -0,0 +1,2 @@
1
+ export declare const HEADER_ROW_HEIGHT = 64;
2
+ export declare const EXPANDED_ROW_PROPERTY = "expandedChild";
@@ -0,0 +1,2 @@
1
+ export var HEADER_ROW_HEIGHT = 64;
2
+ export var EXPANDED_ROW_PROPERTY = 'expandedChild';
package/dist/index.d.ts CHANGED
@@ -5,3 +5,5 @@ import ItemsMenu from './ItemsMenu/ItemsMenu';
5
5
  import TreeTable from './TreeTable/TreeTable';
6
6
  export { default } from './Table';
7
7
  export { GroupedTable, VirtualTable, TableCell, ItemsMenu, TreeTable };
8
+ export type { Props as VirtualTableProps, VirtualTableRef } from './VirtualTable/VirtualTable.types';
9
+ export { default as BackToTopButton } from './InfiniteScroll/BackToTopButton';
package/dist/index.js CHANGED
@@ -4,4 +4,5 @@ import * as TableCell from './Cell';
4
4
  import ItemsMenu from './ItemsMenu/ItemsMenu';
5
5
  import TreeTable from './TreeTable/TreeTable';
6
6
  export { default } from './Table';
7
- export { GroupedTable, VirtualTable, TableCell, ItemsMenu, TreeTable };
7
+ export { GroupedTable, VirtualTable, TableCell, ItemsMenu, TreeTable };
8
+ export { default as BackToTopButton } from './InfiniteScroll/BackToTopButton';