material-react-table 0.33.6 → 0.34.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 (51) hide show
  1. package/dist/cjs/MaterialReactTable.d.ts +6 -21
  2. package/dist/cjs/buttons/MRT_ColumnPinningButtons.d.ts +4 -5
  3. package/dist/cjs/buttons/MRT_FullScreenToggleButton.d.ts +3 -4
  4. package/dist/cjs/buttons/MRT_GrabHandleButton.d.ts +4 -4
  5. package/dist/cjs/buttons/MRT_ShowHideColumnsButton.d.ts +3 -4
  6. package/dist/cjs/buttons/MRT_ToggleDensePaddingButton.d.ts +3 -4
  7. package/dist/cjs/buttons/MRT_ToggleFiltersButton.d.ts +3 -4
  8. package/dist/cjs/buttons/MRT_ToggleGlobalFilterButton.d.ts +3 -4
  9. package/dist/cjs/index.d.ts +8 -2
  10. package/dist/cjs/index.js +526 -14
  11. package/dist/cjs/index.js.map +1 -1
  12. package/dist/cjs/inputs/MRT_GlobalFilterTextField.d.ts +3 -4
  13. package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts +3 -4
  14. package/dist/cjs/menus/MRT_ShowHideColumnsMenu.d.ts +3 -4
  15. package/dist/cjs/menus/MRT_ShowHideColumnsMenuItems.d.ts +8 -8
  16. package/dist/cjs/table/MRT_TableRoot.d.ts +0 -1
  17. package/dist/cjs/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
  18. package/dist/esm/MaterialReactTable.d.ts +6 -21
  19. package/dist/esm/buttons/MRT_ColumnPinningButtons.d.ts +4 -5
  20. package/dist/esm/buttons/MRT_FullScreenToggleButton.d.ts +3 -4
  21. package/dist/esm/buttons/MRT_GrabHandleButton.d.ts +4 -4
  22. package/dist/esm/buttons/MRT_ShowHideColumnsButton.d.ts +3 -4
  23. package/dist/esm/buttons/MRT_ToggleDensePaddingButton.d.ts +3 -4
  24. package/dist/esm/buttons/MRT_ToggleFiltersButton.d.ts +3 -4
  25. package/dist/esm/buttons/MRT_ToggleGlobalFilterButton.d.ts +3 -4
  26. package/dist/esm/index.d.ts +8 -2
  27. package/dist/esm/inputs/MRT_GlobalFilterTextField.d.ts +3 -4
  28. package/dist/esm/material-react-table.esm.js +519 -15
  29. package/dist/esm/material-react-table.esm.js.map +1 -1
  30. package/dist/esm/menus/MRT_FilterOptionMenu.d.ts +3 -4
  31. package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts +3 -4
  32. package/dist/esm/menus/MRT_ShowHideColumnsMenuItems.d.ts +8 -8
  33. package/dist/esm/table/MRT_TableRoot.d.ts +0 -1
  34. package/dist/esm/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
  35. package/dist/index.d.ts +37 -22
  36. package/package.json +5 -5
  37. package/src/MaterialReactTable.tsx +11 -24
  38. package/src/body/MRT_TableBody.tsx +30 -11
  39. package/src/buttons/MRT_ColumnPinningButtons.tsx +10 -5
  40. package/src/buttons/MRT_FullScreenToggleButton.tsx +10 -4
  41. package/src/buttons/MRT_GrabHandleButton.tsx +5 -5
  42. package/src/buttons/MRT_ShowHideColumnsButton.tsx +10 -4
  43. package/src/buttons/MRT_ToggleDensePaddingButton.tsx +10 -4
  44. package/src/buttons/MRT_ToggleFiltersButton.tsx +10 -4
  45. package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +10 -4
  46. package/src/index.tsx +17 -3
  47. package/src/inputs/MRT_GlobalFilterTextField.tsx +7 -4
  48. package/src/menus/MRT_FilterOptionMenu.tsx +5 -5
  49. package/src/menus/MRT_ShowHideColumnsMenu.tsx +9 -7
  50. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +15 -13
  51. package/src/toolbar/MRT_ToolbarInternalButtons.tsx +2 -7
package/dist/cjs/index.js CHANGED
@@ -1,11 +1,12 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
6
  var reactTable = require('@tanstack/react-table');
5
7
  var iconsMaterial = require('@mui/icons-material');
6
8
  var matchSorterUtils = require('@tanstack/match-sorter-utils');
7
9
  var material = require('@mui/material');
8
- var reactVirtual = require('@tanstack/react-virtual');
9
10
 
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
12
 
@@ -428,7 +429,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
428
429
  label)))));
429
430
  };
430
431
 
431
- const MRT_ColumnPinningButtons = ({ column, table }) => {
432
+ const MRT_ColumnPinningButtons = ({ column, table, }) => {
432
433
  const { options: { icons: { PushPinIcon }, localization, }, } = table;
433
434
  const handlePinColumn = (pinDirection) => {
434
435
  column.pin(pinDirection);
@@ -586,7 +587,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
586
587
  column.toggleVisibility();
587
588
  }
588
589
  };
589
- const menuItemRef = React__default["default"].useRef(null);
590
+ const menuItemRef = React.useRef(null);
590
591
  const [isDragging, setIsDragging] = React.useState(false);
591
592
  const handleDragStart = (e) => {
592
593
  setIsDragging(true);
@@ -956,7 +957,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
956
957
  : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
957
958
  };
958
959
 
959
- const MRT_GlobalFilterTextField = ({ table }) => {
960
+ const MRT_GlobalFilterTextField = ({ table, }) => {
960
961
  var _a;
961
962
  const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, tableId, }, } = table;
962
963
  const { globalFilter, showGlobalFilter } = getState();
@@ -1141,11 +1142,6 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
1141
1142
  display: 'flex',
1142
1143
  zIndex: 3,
1143
1144
  } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
1144
- MRT_FullScreenToggleButton,
1145
- MRT_ShowHideColumnsButton,
1146
- MRT_ToggleDensePaddingButton,
1147
- MRT_ToggleFiltersButton,
1148
- MRT_ToggleGlobalFilterButton,
1149
1145
  table,
1150
1146
  })) !== null && _a !== void 0 ? _a : (React__default["default"].createElement(React__default["default"].Fragment, null,
1151
1147
  enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
@@ -1739,6 +1735,498 @@ const MRT_TableHead = ({ table }) => {
1739
1735
  return (React__default["default"].createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
1740
1736
  };
1741
1737
 
1738
+ function _extends() {
1739
+ _extends = Object.assign || function (target) {
1740
+ for (var i = 1; i < arguments.length; i++) {
1741
+ var source = arguments[i];
1742
+
1743
+ for (var key in source) {
1744
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
1745
+ target[key] = source[key];
1746
+ }
1747
+ }
1748
+ }
1749
+
1750
+ return target;
1751
+ };
1752
+
1753
+ return _extends.apply(this, arguments);
1754
+ }
1755
+
1756
+ function _objectWithoutPropertiesLoose(source, excluded) {
1757
+ if (source == null) return {};
1758
+ var target = {};
1759
+ var sourceKeys = Object.keys(source);
1760
+ var key, i;
1761
+
1762
+ for (i = 0; i < sourceKeys.length; i++) {
1763
+ key = sourceKeys[i];
1764
+ if (excluded.indexOf(key) >= 0) continue;
1765
+ target[key] = source[key];
1766
+ }
1767
+
1768
+ return target;
1769
+ }
1770
+
1771
+ var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
1772
+
1773
+ var rectChanged = function rectChanged(a, b) {
1774
+ if (a === void 0) {
1775
+ a = {};
1776
+ }
1777
+
1778
+ if (b === void 0) {
1779
+ b = {};
1780
+ }
1781
+
1782
+ return props.some(function (prop) {
1783
+ return a[prop] !== b[prop];
1784
+ });
1785
+ };
1786
+
1787
+ var observedNodes = /*#__PURE__*/new Map();
1788
+ var rafId;
1789
+
1790
+ var run = function run() {
1791
+ var changedStates = [];
1792
+ observedNodes.forEach(function (state, node) {
1793
+ var newRect = node.getBoundingClientRect();
1794
+
1795
+ if (rectChanged(newRect, state.rect)) {
1796
+ state.rect = newRect;
1797
+ changedStates.push(state);
1798
+ }
1799
+ });
1800
+ changedStates.forEach(function (state) {
1801
+ state.callbacks.forEach(function (cb) {
1802
+ return cb(state.rect);
1803
+ });
1804
+ });
1805
+ rafId = window.requestAnimationFrame(run);
1806
+ };
1807
+
1808
+ function observeRect(node, cb) {
1809
+ return {
1810
+ observe: function observe() {
1811
+ var wasEmpty = observedNodes.size === 0;
1812
+
1813
+ if (observedNodes.has(node)) {
1814
+ observedNodes.get(node).callbacks.push(cb);
1815
+ } else {
1816
+ observedNodes.set(node, {
1817
+ rect: undefined,
1818
+ hasRectChanged: false,
1819
+ callbacks: [cb]
1820
+ });
1821
+ }
1822
+
1823
+ if (wasEmpty) run();
1824
+ },
1825
+ unobserve: function unobserve() {
1826
+ var state = observedNodes.get(node);
1827
+
1828
+ if (state) {
1829
+ // Remove the callback
1830
+ var index = state.callbacks.indexOf(cb);
1831
+ if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
1832
+
1833
+ if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
1834
+
1835
+ if (!observedNodes.size) cancelAnimationFrame(rafId);
1836
+ }
1837
+ }
1838
+ };
1839
+ }
1840
+
1841
+ var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default["default"].useLayoutEffect : React__default["default"].useEffect;
1842
+
1843
+ function useRect(nodeRef, initialRect) {
1844
+ if (initialRect === void 0) {
1845
+ initialRect = {
1846
+ width: 0,
1847
+ height: 0
1848
+ };
1849
+ }
1850
+
1851
+ var _React$useState = React__default["default"].useState(nodeRef.current),
1852
+ element = _React$useState[0],
1853
+ setElement = _React$useState[1];
1854
+
1855
+ var _React$useReducer = React__default["default"].useReducer(rectReducer, initialRect),
1856
+ rect = _React$useReducer[0],
1857
+ dispatch = _React$useReducer[1];
1858
+
1859
+ var initialRectSet = React__default["default"].useRef(false);
1860
+ useIsomorphicLayoutEffect$1(function () {
1861
+ if (nodeRef.current !== element) {
1862
+ setElement(nodeRef.current);
1863
+ }
1864
+ });
1865
+ useIsomorphicLayoutEffect$1(function () {
1866
+ if (element && !initialRectSet.current) {
1867
+ initialRectSet.current = true;
1868
+
1869
+ var _rect = element.getBoundingClientRect();
1870
+
1871
+ dispatch({
1872
+ rect: _rect
1873
+ });
1874
+ }
1875
+ }, [element]);
1876
+ React__default["default"].useEffect(function () {
1877
+ if (!element) {
1878
+ return;
1879
+ }
1880
+
1881
+ var observer = observeRect(element, function (rect) {
1882
+ dispatch({
1883
+ rect: rect
1884
+ });
1885
+ });
1886
+ observer.observe();
1887
+ return function () {
1888
+ observer.unobserve();
1889
+ };
1890
+ }, [element]);
1891
+ return rect;
1892
+ }
1893
+
1894
+ function rectReducer(state, action) {
1895
+ var rect = action.rect;
1896
+
1897
+ if (state.height !== rect.height || state.width !== rect.width) {
1898
+ return rect;
1899
+ }
1900
+
1901
+ return state;
1902
+ }
1903
+
1904
+ var defaultEstimateSize = function defaultEstimateSize() {
1905
+ return 50;
1906
+ };
1907
+
1908
+ var defaultKeyExtractor = function defaultKeyExtractor(index) {
1909
+ return index;
1910
+ };
1911
+
1912
+ var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
1913
+ var key = horizontal ? 'offsetWidth' : 'offsetHeight';
1914
+ return el[key];
1915
+ };
1916
+
1917
+ var defaultRangeExtractor = function defaultRangeExtractor(range) {
1918
+ var start = Math.max(range.start - range.overscan, 0);
1919
+ var end = Math.min(range.end + range.overscan, range.size - 1);
1920
+ var arr = [];
1921
+
1922
+ for (var i = start; i <= end; i++) {
1923
+ arr.push(i);
1924
+ }
1925
+
1926
+ return arr;
1927
+ };
1928
+ function useVirtual(_ref) {
1929
+ var _measurements;
1930
+
1931
+ var _ref$size = _ref.size,
1932
+ size = _ref$size === void 0 ? 0 : _ref$size,
1933
+ _ref$estimateSize = _ref.estimateSize,
1934
+ estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
1935
+ _ref$overscan = _ref.overscan,
1936
+ overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
1937
+ _ref$paddingStart = _ref.paddingStart,
1938
+ paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
1939
+ _ref$paddingEnd = _ref.paddingEnd,
1940
+ paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
1941
+ parentRef = _ref.parentRef,
1942
+ horizontal = _ref.horizontal,
1943
+ scrollToFn = _ref.scrollToFn,
1944
+ useObserver = _ref.useObserver,
1945
+ initialRect = _ref.initialRect,
1946
+ onScrollElement = _ref.onScrollElement,
1947
+ scrollOffsetFn = _ref.scrollOffsetFn,
1948
+ _ref$keyExtractor = _ref.keyExtractor,
1949
+ keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
1950
+ _ref$measureSize = _ref.measureSize,
1951
+ measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
1952
+ _ref$rangeExtractor = _ref.rangeExtractor,
1953
+ rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
1954
+ var sizeKey = horizontal ? 'width' : 'height';
1955
+ var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
1956
+ var latestRef = React__default["default"].useRef({
1957
+ scrollOffset: 0,
1958
+ measurements: []
1959
+ });
1960
+
1961
+ var _React$useState = React__default["default"].useState(0),
1962
+ scrollOffset = _React$useState[0],
1963
+ setScrollOffset = _React$useState[1];
1964
+
1965
+ latestRef.current.scrollOffset = scrollOffset;
1966
+ var useMeasureParent = useObserver || useRect;
1967
+
1968
+ var _useMeasureParent = useMeasureParent(parentRef, initialRect),
1969
+ outerSize = _useMeasureParent[sizeKey];
1970
+
1971
+ latestRef.current.outerSize = outerSize;
1972
+ var defaultScrollToFn = React__default["default"].useCallback(function (offset) {
1973
+ if (parentRef.current) {
1974
+ parentRef.current[scrollKey] = offset;
1975
+ }
1976
+ }, [parentRef, scrollKey]);
1977
+ var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
1978
+ scrollToFn = React__default["default"].useCallback(function (offset) {
1979
+ resolvedScrollToFn(offset, defaultScrollToFn);
1980
+ }, [defaultScrollToFn, resolvedScrollToFn]);
1981
+
1982
+ var _React$useState2 = React__default["default"].useState({}),
1983
+ measuredCache = _React$useState2[0],
1984
+ setMeasuredCache = _React$useState2[1];
1985
+
1986
+ var measure = React__default["default"].useCallback(function () {
1987
+ return setMeasuredCache({});
1988
+ }, []);
1989
+ var pendingMeasuredCacheIndexesRef = React__default["default"].useRef([]);
1990
+ var measurements = React__default["default"].useMemo(function () {
1991
+ var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
1992
+ pendingMeasuredCacheIndexesRef.current = [];
1993
+ var measurements = latestRef.current.measurements.slice(0, min);
1994
+
1995
+ for (var i = min; i < size; i++) {
1996
+ var key = keyExtractor(i);
1997
+ var measuredSize = measuredCache[key];
1998
+
1999
+ var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
2000
+
2001
+ var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
2002
+
2003
+ var _end = _start + _size;
2004
+
2005
+ measurements[i] = {
2006
+ index: i,
2007
+ start: _start,
2008
+ size: _size,
2009
+ end: _end,
2010
+ key: key
2011
+ };
2012
+ }
2013
+
2014
+ return measurements;
2015
+ }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
2016
+ var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
2017
+ latestRef.current.measurements = measurements;
2018
+ latestRef.current.totalSize = totalSize;
2019
+ var element = onScrollElement ? onScrollElement.current : parentRef.current;
2020
+ var scrollOffsetFnRef = React__default["default"].useRef(scrollOffsetFn);
2021
+ scrollOffsetFnRef.current = scrollOffsetFn;
2022
+ useIsomorphicLayoutEffect$1(function () {
2023
+ if (!element) {
2024
+ setScrollOffset(0);
2025
+ return;
2026
+ }
2027
+
2028
+ var onScroll = function onScroll(event) {
2029
+ var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
2030
+ setScrollOffset(offset);
2031
+ };
2032
+
2033
+ onScroll();
2034
+ element.addEventListener('scroll', onScroll, {
2035
+ capture: false,
2036
+ passive: true
2037
+ });
2038
+ return function () {
2039
+ element.removeEventListener('scroll', onScroll);
2040
+ };
2041
+ }, [element, scrollKey]);
2042
+
2043
+ var _calculateRange = calculateRange(latestRef.current),
2044
+ start = _calculateRange.start,
2045
+ end = _calculateRange.end;
2046
+
2047
+ var indexes = React__default["default"].useMemo(function () {
2048
+ return rangeExtractor({
2049
+ start: start,
2050
+ end: end,
2051
+ overscan: overscan,
2052
+ size: measurements.length
2053
+ });
2054
+ }, [start, end, overscan, measurements.length, rangeExtractor]);
2055
+ var measureSizeRef = React__default["default"].useRef(measureSize);
2056
+ measureSizeRef.current = measureSize;
2057
+ var virtualItems = React__default["default"].useMemo(function () {
2058
+ var virtualItems = [];
2059
+
2060
+ var _loop = function _loop(k, len) {
2061
+ var i = indexes[k];
2062
+ var measurement = measurements[i];
2063
+
2064
+ var item = _extends(_extends({}, measurement), {}, {
2065
+ measureRef: function measureRef(el) {
2066
+ if (el) {
2067
+ var measuredSize = measureSizeRef.current(el, horizontal);
2068
+
2069
+ if (measuredSize !== item.size) {
2070
+ var _scrollOffset = latestRef.current.scrollOffset;
2071
+
2072
+ if (item.start < _scrollOffset) {
2073
+ defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
2074
+ }
2075
+
2076
+ pendingMeasuredCacheIndexesRef.current.push(i);
2077
+ setMeasuredCache(function (old) {
2078
+ var _extends2;
2079
+
2080
+ return _extends(_extends({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
2081
+ });
2082
+ }
2083
+ }
2084
+ }
2085
+ });
2086
+
2087
+ virtualItems.push(item);
2088
+ };
2089
+
2090
+ for (var k = 0, len = indexes.length; k < len; k++) {
2091
+ _loop(k);
2092
+ }
2093
+
2094
+ return virtualItems;
2095
+ }, [indexes, defaultScrollToFn, horizontal, measurements]);
2096
+ var mountedRef = React__default["default"].useRef(false);
2097
+ useIsomorphicLayoutEffect$1(function () {
2098
+ if (mountedRef.current) {
2099
+ setMeasuredCache({});
2100
+ }
2101
+
2102
+ mountedRef.current = true;
2103
+ }, [estimateSize]);
2104
+ var scrollToOffset = React__default["default"].useCallback(function (toOffset, _temp) {
2105
+ var _ref2 = _temp === void 0 ? {} : _temp,
2106
+ _ref2$align = _ref2.align,
2107
+ align = _ref2$align === void 0 ? 'start' : _ref2$align;
2108
+
2109
+ var _latestRef$current = latestRef.current,
2110
+ scrollOffset = _latestRef$current.scrollOffset,
2111
+ outerSize = _latestRef$current.outerSize;
2112
+
2113
+ if (align === 'auto') {
2114
+ if (toOffset <= scrollOffset) {
2115
+ align = 'start';
2116
+ } else if (toOffset >= scrollOffset + outerSize) {
2117
+ align = 'end';
2118
+ } else {
2119
+ align = 'start';
2120
+ }
2121
+ }
2122
+
2123
+ if (align === 'start') {
2124
+ scrollToFn(toOffset);
2125
+ } else if (align === 'end') {
2126
+ scrollToFn(toOffset - outerSize);
2127
+ } else if (align === 'center') {
2128
+ scrollToFn(toOffset - outerSize / 2);
2129
+ }
2130
+ }, [scrollToFn]);
2131
+ var tryScrollToIndex = React__default["default"].useCallback(function (index, _temp2) {
2132
+ var _ref3 = _temp2 === void 0 ? {} : _temp2,
2133
+ _ref3$align = _ref3.align,
2134
+ align = _ref3$align === void 0 ? 'auto' : _ref3$align,
2135
+ rest = _objectWithoutPropertiesLoose(_ref3, ["align"]);
2136
+
2137
+ var _latestRef$current2 = latestRef.current,
2138
+ measurements = _latestRef$current2.measurements,
2139
+ scrollOffset = _latestRef$current2.scrollOffset,
2140
+ outerSize = _latestRef$current2.outerSize;
2141
+ var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
2142
+
2143
+ if (!measurement) {
2144
+ return;
2145
+ }
2146
+
2147
+ if (align === 'auto') {
2148
+ if (measurement.end >= scrollOffset + outerSize) {
2149
+ align = 'end';
2150
+ } else if (measurement.start <= scrollOffset) {
2151
+ align = 'start';
2152
+ } else {
2153
+ return;
2154
+ }
2155
+ }
2156
+
2157
+ var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
2158
+ scrollToOffset(toOffset, _extends({
2159
+ align: align
2160
+ }, rest));
2161
+ }, [scrollToOffset, size]);
2162
+ var scrollToIndex = React__default["default"].useCallback(function () {
2163
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
2164
+ args[_key] = arguments[_key];
2165
+ }
2166
+
2167
+ // We do a double request here because of
2168
+ // dynamic sizes which can cause offset shift
2169
+ // and end up in the wrong spot. Unfortunately,
2170
+ // we can't know about those dynamic sizes until
2171
+ // we try and render them. So double down!
2172
+ tryScrollToIndex.apply(void 0, args);
2173
+ requestAnimationFrame(function () {
2174
+ tryScrollToIndex.apply(void 0, args);
2175
+ });
2176
+ }, [tryScrollToIndex]);
2177
+ return {
2178
+ virtualItems: virtualItems,
2179
+ totalSize: totalSize,
2180
+ scrollToOffset: scrollToOffset,
2181
+ scrollToIndex: scrollToIndex,
2182
+ measure: measure
2183
+ };
2184
+ }
2185
+
2186
+ var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
2187
+ while (low <= high) {
2188
+ var middle = (low + high) / 2 | 0;
2189
+ var currentValue = getCurrentValue(middle);
2190
+
2191
+ if (currentValue < value) {
2192
+ low = middle + 1;
2193
+ } else if (currentValue > value) {
2194
+ high = middle - 1;
2195
+ } else {
2196
+ return middle;
2197
+ }
2198
+ }
2199
+
2200
+ if (low > 0) {
2201
+ return low - 1;
2202
+ } else {
2203
+ return 0;
2204
+ }
2205
+ };
2206
+
2207
+ function calculateRange(_ref4) {
2208
+ var measurements = _ref4.measurements,
2209
+ outerSize = _ref4.outerSize,
2210
+ scrollOffset = _ref4.scrollOffset;
2211
+ var size = measurements.length - 1;
2212
+
2213
+ var getOffset = function getOffset(index) {
2214
+ return measurements[index].start;
2215
+ };
2216
+
2217
+ var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
2218
+ var end = start;
2219
+
2220
+ while (end < size && measurements[end].end < scrollOffset + outerSize) {
2221
+ end++;
2222
+ }
2223
+
2224
+ return {
2225
+ start: start,
2226
+ end: end
2227
+ };
2228
+ }
2229
+
1742
2230
  const MRT_EditCellTextField = ({ cell, table }) => {
1743
2231
  var _a;
1744
2232
  const { getState, options: { tableId, enableEditing, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setCurrentEditingCell, setCurrentEditingRow, } = table;
@@ -2019,7 +2507,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
2019
2507
 
2020
2508
  const MRT_TableBody = ({ table, tableContainerRef }) => {
2021
2509
  const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
2022
- const { density, globalFilter, pagination, sorting } = getState();
2510
+ const { globalFilter, pagination, sorting } = getState();
2023
2511
  const tableBodyProps = muiTableBodyProps instanceof Function
2024
2512
  ? muiTableBodyProps({ table })
2025
2513
  : muiTableBodyProps;
@@ -2047,19 +2535,37 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
2047
2535
  globalFilter,
2048
2536
  ]);
2049
2537
  const rowVirtualizer = enableRowVirtualization
2050
- ? reactVirtual.useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => (density === 'compact' ? 20 : 50), getScrollElement: () => tableContainerRef.current, overscan: 10 }, vProps))
2538
+ ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
2051
2539
  : {};
2540
+ // const rowVirtualizer: Virtualizer = enableRowVirtualization
2541
+ // ? useVirtualizer({
2542
+ // count: rows.length,
2543
+ // estimateSize: () => (density === 'compact' ? 25 : 50),
2544
+ // getScrollElement: () => tableContainerRef.current as HTMLDivElement,
2545
+ // overscan: 15,
2546
+ // ...vProps,
2547
+ // })
2548
+ // : ({} as any);
2052
2549
  const virtualRows = enableRowVirtualization
2053
- ? rowVirtualizer.getVirtualItems()
2550
+ ? rowVirtualizer.virtualItems
2054
2551
  : [];
2552
+ // const virtualRows = enableRowVirtualization
2553
+ // ? rowVirtualizer.getVirtualItems()
2554
+ // : [];
2055
2555
  let paddingTop = 0;
2056
2556
  let paddingBottom = 0;
2057
2557
  if (enableRowVirtualization) {
2058
2558
  paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
2059
2559
  paddingBottom = !!virtualRows.length
2060
- ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
2560
+ ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
2061
2561
  : 0;
2062
2562
  }
2563
+ // if (enableRowVirtualization) {
2564
+ // paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
2565
+ // paddingBottom = !!virtualRows.length
2566
+ // ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
2567
+ // : 0;
2568
+ // }
2063
2569
  return (React__default["default"].createElement(material.TableBody, Object.assign({}, tableBodyProps),
2064
2570
  enableRowVirtualization && paddingTop > 0 && (React__default["default"].createElement("tr", null,
2065
2571
  React__default["default"].createElement("td", { style: { height: `${paddingTop}px` } }))),
@@ -2304,5 +2810,11 @@ var MaterialReactTable = (_a) => {
2304
2810
  return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterChangeMode: enableColumnFilterChangeMode, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterChangeMode: enableGlobalFilterChangeMode, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
2305
2811
  };
2306
2812
 
2307
- module.exports = MaterialReactTable;
2813
+ exports.MRT_FullScreenToggleButton = MRT_FullScreenToggleButton;
2814
+ exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
2815
+ exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
2816
+ exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
2817
+ exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
2818
+ exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
2819
+ exports["default"] = MaterialReactTable;
2308
2820
  //# sourceMappingURL=index.js.map