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
@@ -1,9 +1,8 @@
1
- import React, { useMemo, useState, useCallback, Fragment, useEffect, useRef, useLayoutEffect } from 'react';
1
+ import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, useLayoutEffect } from 'react';
2
2
  import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
3
3
  import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
4
4
  import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
5
5
  import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
6
- import { useVirtualizer } from '@tanstack/react-virtual';
7
6
 
8
7
  /******************************************************************************
9
8
  Copyright (c) Microsoft Corporation.
@@ -422,7 +421,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
422
421
  label)))));
423
422
  };
424
423
 
425
- const MRT_ColumnPinningButtons = ({ column, table }) => {
424
+ const MRT_ColumnPinningButtons = ({ column, table, }) => {
426
425
  const { options: { icons: { PushPinIcon }, localization, }, } = table;
427
426
  const handlePinColumn = (pinDirection) => {
428
427
  column.pin(pinDirection);
@@ -580,7 +579,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
580
579
  column.toggleVisibility();
581
580
  }
582
581
  };
583
- const menuItemRef = React.useRef(null);
582
+ const menuItemRef = useRef(null);
584
583
  const [isDragging, setIsDragging] = useState(false);
585
584
  const handleDragStart = (e) => {
586
585
  setIsDragging(true);
@@ -950,7 +949,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
950
949
  : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
951
950
  };
952
951
 
953
- const MRT_GlobalFilterTextField = ({ table }) => {
952
+ const MRT_GlobalFilterTextField = ({ table, }) => {
954
953
  var _a;
955
954
  const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, tableId, }, } = table;
956
955
  const { globalFilter, showGlobalFilter } = getState();
@@ -1135,11 +1134,6 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
1135
1134
  display: 'flex',
1136
1135
  zIndex: 3,
1137
1136
  } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
1138
- MRT_FullScreenToggleButton,
1139
- MRT_ShowHideColumnsButton,
1140
- MRT_ToggleDensePaddingButton,
1141
- MRT_ToggleFiltersButton,
1142
- MRT_ToggleGlobalFilterButton,
1143
1137
  table,
1144
1138
  })) !== null && _a !== void 0 ? _a : (React.createElement(React.Fragment, null,
1145
1139
  enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
@@ -1733,6 +1727,498 @@ const MRT_TableHead = ({ table }) => {
1733
1727
  return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
1734
1728
  };
1735
1729
 
1730
+ function _extends() {
1731
+ _extends = Object.assign || function (target) {
1732
+ for (var i = 1; i < arguments.length; i++) {
1733
+ var source = arguments[i];
1734
+
1735
+ for (var key in source) {
1736
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
1737
+ target[key] = source[key];
1738
+ }
1739
+ }
1740
+ }
1741
+
1742
+ return target;
1743
+ };
1744
+
1745
+ return _extends.apply(this, arguments);
1746
+ }
1747
+
1748
+ function _objectWithoutPropertiesLoose(source, excluded) {
1749
+ if (source == null) return {};
1750
+ var target = {};
1751
+ var sourceKeys = Object.keys(source);
1752
+ var key, i;
1753
+
1754
+ for (i = 0; i < sourceKeys.length; i++) {
1755
+ key = sourceKeys[i];
1756
+ if (excluded.indexOf(key) >= 0) continue;
1757
+ target[key] = source[key];
1758
+ }
1759
+
1760
+ return target;
1761
+ }
1762
+
1763
+ var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
1764
+
1765
+ var rectChanged = function rectChanged(a, b) {
1766
+ if (a === void 0) {
1767
+ a = {};
1768
+ }
1769
+
1770
+ if (b === void 0) {
1771
+ b = {};
1772
+ }
1773
+
1774
+ return props.some(function (prop) {
1775
+ return a[prop] !== b[prop];
1776
+ });
1777
+ };
1778
+
1779
+ var observedNodes = /*#__PURE__*/new Map();
1780
+ var rafId;
1781
+
1782
+ var run = function run() {
1783
+ var changedStates = [];
1784
+ observedNodes.forEach(function (state, node) {
1785
+ var newRect = node.getBoundingClientRect();
1786
+
1787
+ if (rectChanged(newRect, state.rect)) {
1788
+ state.rect = newRect;
1789
+ changedStates.push(state);
1790
+ }
1791
+ });
1792
+ changedStates.forEach(function (state) {
1793
+ state.callbacks.forEach(function (cb) {
1794
+ return cb(state.rect);
1795
+ });
1796
+ });
1797
+ rafId = window.requestAnimationFrame(run);
1798
+ };
1799
+
1800
+ function observeRect(node, cb) {
1801
+ return {
1802
+ observe: function observe() {
1803
+ var wasEmpty = observedNodes.size === 0;
1804
+
1805
+ if (observedNodes.has(node)) {
1806
+ observedNodes.get(node).callbacks.push(cb);
1807
+ } else {
1808
+ observedNodes.set(node, {
1809
+ rect: undefined,
1810
+ hasRectChanged: false,
1811
+ callbacks: [cb]
1812
+ });
1813
+ }
1814
+
1815
+ if (wasEmpty) run();
1816
+ },
1817
+ unobserve: function unobserve() {
1818
+ var state = observedNodes.get(node);
1819
+
1820
+ if (state) {
1821
+ // Remove the callback
1822
+ var index = state.callbacks.indexOf(cb);
1823
+ if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
1824
+
1825
+ if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
1826
+
1827
+ if (!observedNodes.size) cancelAnimationFrame(rafId);
1828
+ }
1829
+ }
1830
+ };
1831
+ }
1832
+
1833
+ var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
1834
+
1835
+ function useRect(nodeRef, initialRect) {
1836
+ if (initialRect === void 0) {
1837
+ initialRect = {
1838
+ width: 0,
1839
+ height: 0
1840
+ };
1841
+ }
1842
+
1843
+ var _React$useState = React.useState(nodeRef.current),
1844
+ element = _React$useState[0],
1845
+ setElement = _React$useState[1];
1846
+
1847
+ var _React$useReducer = React.useReducer(rectReducer, initialRect),
1848
+ rect = _React$useReducer[0],
1849
+ dispatch = _React$useReducer[1];
1850
+
1851
+ var initialRectSet = React.useRef(false);
1852
+ useIsomorphicLayoutEffect$1(function () {
1853
+ if (nodeRef.current !== element) {
1854
+ setElement(nodeRef.current);
1855
+ }
1856
+ });
1857
+ useIsomorphicLayoutEffect$1(function () {
1858
+ if (element && !initialRectSet.current) {
1859
+ initialRectSet.current = true;
1860
+
1861
+ var _rect = element.getBoundingClientRect();
1862
+
1863
+ dispatch({
1864
+ rect: _rect
1865
+ });
1866
+ }
1867
+ }, [element]);
1868
+ React.useEffect(function () {
1869
+ if (!element) {
1870
+ return;
1871
+ }
1872
+
1873
+ var observer = observeRect(element, function (rect) {
1874
+ dispatch({
1875
+ rect: rect
1876
+ });
1877
+ });
1878
+ observer.observe();
1879
+ return function () {
1880
+ observer.unobserve();
1881
+ };
1882
+ }, [element]);
1883
+ return rect;
1884
+ }
1885
+
1886
+ function rectReducer(state, action) {
1887
+ var rect = action.rect;
1888
+
1889
+ if (state.height !== rect.height || state.width !== rect.width) {
1890
+ return rect;
1891
+ }
1892
+
1893
+ return state;
1894
+ }
1895
+
1896
+ var defaultEstimateSize = function defaultEstimateSize() {
1897
+ return 50;
1898
+ };
1899
+
1900
+ var defaultKeyExtractor = function defaultKeyExtractor(index) {
1901
+ return index;
1902
+ };
1903
+
1904
+ var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
1905
+ var key = horizontal ? 'offsetWidth' : 'offsetHeight';
1906
+ return el[key];
1907
+ };
1908
+
1909
+ var defaultRangeExtractor = function defaultRangeExtractor(range) {
1910
+ var start = Math.max(range.start - range.overscan, 0);
1911
+ var end = Math.min(range.end + range.overscan, range.size - 1);
1912
+ var arr = [];
1913
+
1914
+ for (var i = start; i <= end; i++) {
1915
+ arr.push(i);
1916
+ }
1917
+
1918
+ return arr;
1919
+ };
1920
+ function useVirtual(_ref) {
1921
+ var _measurements;
1922
+
1923
+ var _ref$size = _ref.size,
1924
+ size = _ref$size === void 0 ? 0 : _ref$size,
1925
+ _ref$estimateSize = _ref.estimateSize,
1926
+ estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
1927
+ _ref$overscan = _ref.overscan,
1928
+ overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
1929
+ _ref$paddingStart = _ref.paddingStart,
1930
+ paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
1931
+ _ref$paddingEnd = _ref.paddingEnd,
1932
+ paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
1933
+ parentRef = _ref.parentRef,
1934
+ horizontal = _ref.horizontal,
1935
+ scrollToFn = _ref.scrollToFn,
1936
+ useObserver = _ref.useObserver,
1937
+ initialRect = _ref.initialRect,
1938
+ onScrollElement = _ref.onScrollElement,
1939
+ scrollOffsetFn = _ref.scrollOffsetFn,
1940
+ _ref$keyExtractor = _ref.keyExtractor,
1941
+ keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
1942
+ _ref$measureSize = _ref.measureSize,
1943
+ measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
1944
+ _ref$rangeExtractor = _ref.rangeExtractor,
1945
+ rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
1946
+ var sizeKey = horizontal ? 'width' : 'height';
1947
+ var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
1948
+ var latestRef = React.useRef({
1949
+ scrollOffset: 0,
1950
+ measurements: []
1951
+ });
1952
+
1953
+ var _React$useState = React.useState(0),
1954
+ scrollOffset = _React$useState[0],
1955
+ setScrollOffset = _React$useState[1];
1956
+
1957
+ latestRef.current.scrollOffset = scrollOffset;
1958
+ var useMeasureParent = useObserver || useRect;
1959
+
1960
+ var _useMeasureParent = useMeasureParent(parentRef, initialRect),
1961
+ outerSize = _useMeasureParent[sizeKey];
1962
+
1963
+ latestRef.current.outerSize = outerSize;
1964
+ var defaultScrollToFn = React.useCallback(function (offset) {
1965
+ if (parentRef.current) {
1966
+ parentRef.current[scrollKey] = offset;
1967
+ }
1968
+ }, [parentRef, scrollKey]);
1969
+ var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
1970
+ scrollToFn = React.useCallback(function (offset) {
1971
+ resolvedScrollToFn(offset, defaultScrollToFn);
1972
+ }, [defaultScrollToFn, resolvedScrollToFn]);
1973
+
1974
+ var _React$useState2 = React.useState({}),
1975
+ measuredCache = _React$useState2[0],
1976
+ setMeasuredCache = _React$useState2[1];
1977
+
1978
+ var measure = React.useCallback(function () {
1979
+ return setMeasuredCache({});
1980
+ }, []);
1981
+ var pendingMeasuredCacheIndexesRef = React.useRef([]);
1982
+ var measurements = React.useMemo(function () {
1983
+ var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
1984
+ pendingMeasuredCacheIndexesRef.current = [];
1985
+ var measurements = latestRef.current.measurements.slice(0, min);
1986
+
1987
+ for (var i = min; i < size; i++) {
1988
+ var key = keyExtractor(i);
1989
+ var measuredSize = measuredCache[key];
1990
+
1991
+ var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
1992
+
1993
+ var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
1994
+
1995
+ var _end = _start + _size;
1996
+
1997
+ measurements[i] = {
1998
+ index: i,
1999
+ start: _start,
2000
+ size: _size,
2001
+ end: _end,
2002
+ key: key
2003
+ };
2004
+ }
2005
+
2006
+ return measurements;
2007
+ }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
2008
+ var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
2009
+ latestRef.current.measurements = measurements;
2010
+ latestRef.current.totalSize = totalSize;
2011
+ var element = onScrollElement ? onScrollElement.current : parentRef.current;
2012
+ var scrollOffsetFnRef = React.useRef(scrollOffsetFn);
2013
+ scrollOffsetFnRef.current = scrollOffsetFn;
2014
+ useIsomorphicLayoutEffect$1(function () {
2015
+ if (!element) {
2016
+ setScrollOffset(0);
2017
+ return;
2018
+ }
2019
+
2020
+ var onScroll = function onScroll(event) {
2021
+ var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
2022
+ setScrollOffset(offset);
2023
+ };
2024
+
2025
+ onScroll();
2026
+ element.addEventListener('scroll', onScroll, {
2027
+ capture: false,
2028
+ passive: true
2029
+ });
2030
+ return function () {
2031
+ element.removeEventListener('scroll', onScroll);
2032
+ };
2033
+ }, [element, scrollKey]);
2034
+
2035
+ var _calculateRange = calculateRange(latestRef.current),
2036
+ start = _calculateRange.start,
2037
+ end = _calculateRange.end;
2038
+
2039
+ var indexes = React.useMemo(function () {
2040
+ return rangeExtractor({
2041
+ start: start,
2042
+ end: end,
2043
+ overscan: overscan,
2044
+ size: measurements.length
2045
+ });
2046
+ }, [start, end, overscan, measurements.length, rangeExtractor]);
2047
+ var measureSizeRef = React.useRef(measureSize);
2048
+ measureSizeRef.current = measureSize;
2049
+ var virtualItems = React.useMemo(function () {
2050
+ var virtualItems = [];
2051
+
2052
+ var _loop = function _loop(k, len) {
2053
+ var i = indexes[k];
2054
+ var measurement = measurements[i];
2055
+
2056
+ var item = _extends(_extends({}, measurement), {}, {
2057
+ measureRef: function measureRef(el) {
2058
+ if (el) {
2059
+ var measuredSize = measureSizeRef.current(el, horizontal);
2060
+
2061
+ if (measuredSize !== item.size) {
2062
+ var _scrollOffset = latestRef.current.scrollOffset;
2063
+
2064
+ if (item.start < _scrollOffset) {
2065
+ defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
2066
+ }
2067
+
2068
+ pendingMeasuredCacheIndexesRef.current.push(i);
2069
+ setMeasuredCache(function (old) {
2070
+ var _extends2;
2071
+
2072
+ return _extends(_extends({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
2073
+ });
2074
+ }
2075
+ }
2076
+ }
2077
+ });
2078
+
2079
+ virtualItems.push(item);
2080
+ };
2081
+
2082
+ for (var k = 0, len = indexes.length; k < len; k++) {
2083
+ _loop(k);
2084
+ }
2085
+
2086
+ return virtualItems;
2087
+ }, [indexes, defaultScrollToFn, horizontal, measurements]);
2088
+ var mountedRef = React.useRef(false);
2089
+ useIsomorphicLayoutEffect$1(function () {
2090
+ if (mountedRef.current) {
2091
+ setMeasuredCache({});
2092
+ }
2093
+
2094
+ mountedRef.current = true;
2095
+ }, [estimateSize]);
2096
+ var scrollToOffset = React.useCallback(function (toOffset, _temp) {
2097
+ var _ref2 = _temp === void 0 ? {} : _temp,
2098
+ _ref2$align = _ref2.align,
2099
+ align = _ref2$align === void 0 ? 'start' : _ref2$align;
2100
+
2101
+ var _latestRef$current = latestRef.current,
2102
+ scrollOffset = _latestRef$current.scrollOffset,
2103
+ outerSize = _latestRef$current.outerSize;
2104
+
2105
+ if (align === 'auto') {
2106
+ if (toOffset <= scrollOffset) {
2107
+ align = 'start';
2108
+ } else if (toOffset >= scrollOffset + outerSize) {
2109
+ align = 'end';
2110
+ } else {
2111
+ align = 'start';
2112
+ }
2113
+ }
2114
+
2115
+ if (align === 'start') {
2116
+ scrollToFn(toOffset);
2117
+ } else if (align === 'end') {
2118
+ scrollToFn(toOffset - outerSize);
2119
+ } else if (align === 'center') {
2120
+ scrollToFn(toOffset - outerSize / 2);
2121
+ }
2122
+ }, [scrollToFn]);
2123
+ var tryScrollToIndex = React.useCallback(function (index, _temp2) {
2124
+ var _ref3 = _temp2 === void 0 ? {} : _temp2,
2125
+ _ref3$align = _ref3.align,
2126
+ align = _ref3$align === void 0 ? 'auto' : _ref3$align,
2127
+ rest = _objectWithoutPropertiesLoose(_ref3, ["align"]);
2128
+
2129
+ var _latestRef$current2 = latestRef.current,
2130
+ measurements = _latestRef$current2.measurements,
2131
+ scrollOffset = _latestRef$current2.scrollOffset,
2132
+ outerSize = _latestRef$current2.outerSize;
2133
+ var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
2134
+
2135
+ if (!measurement) {
2136
+ return;
2137
+ }
2138
+
2139
+ if (align === 'auto') {
2140
+ if (measurement.end >= scrollOffset + outerSize) {
2141
+ align = 'end';
2142
+ } else if (measurement.start <= scrollOffset) {
2143
+ align = 'start';
2144
+ } else {
2145
+ return;
2146
+ }
2147
+ }
2148
+
2149
+ var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
2150
+ scrollToOffset(toOffset, _extends({
2151
+ align: align
2152
+ }, rest));
2153
+ }, [scrollToOffset, size]);
2154
+ var scrollToIndex = React.useCallback(function () {
2155
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
2156
+ args[_key] = arguments[_key];
2157
+ }
2158
+
2159
+ // We do a double request here because of
2160
+ // dynamic sizes which can cause offset shift
2161
+ // and end up in the wrong spot. Unfortunately,
2162
+ // we can't know about those dynamic sizes until
2163
+ // we try and render them. So double down!
2164
+ tryScrollToIndex.apply(void 0, args);
2165
+ requestAnimationFrame(function () {
2166
+ tryScrollToIndex.apply(void 0, args);
2167
+ });
2168
+ }, [tryScrollToIndex]);
2169
+ return {
2170
+ virtualItems: virtualItems,
2171
+ totalSize: totalSize,
2172
+ scrollToOffset: scrollToOffset,
2173
+ scrollToIndex: scrollToIndex,
2174
+ measure: measure
2175
+ };
2176
+ }
2177
+
2178
+ var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
2179
+ while (low <= high) {
2180
+ var middle = (low + high) / 2 | 0;
2181
+ var currentValue = getCurrentValue(middle);
2182
+
2183
+ if (currentValue < value) {
2184
+ low = middle + 1;
2185
+ } else if (currentValue > value) {
2186
+ high = middle - 1;
2187
+ } else {
2188
+ return middle;
2189
+ }
2190
+ }
2191
+
2192
+ if (low > 0) {
2193
+ return low - 1;
2194
+ } else {
2195
+ return 0;
2196
+ }
2197
+ };
2198
+
2199
+ function calculateRange(_ref4) {
2200
+ var measurements = _ref4.measurements,
2201
+ outerSize = _ref4.outerSize,
2202
+ scrollOffset = _ref4.scrollOffset;
2203
+ var size = measurements.length - 1;
2204
+
2205
+ var getOffset = function getOffset(index) {
2206
+ return measurements[index].start;
2207
+ };
2208
+
2209
+ var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
2210
+ var end = start;
2211
+
2212
+ while (end < size && measurements[end].end < scrollOffset + outerSize) {
2213
+ end++;
2214
+ }
2215
+
2216
+ return {
2217
+ start: start,
2218
+ end: end
2219
+ };
2220
+ }
2221
+
1736
2222
  const MRT_EditCellTextField = ({ cell, table }) => {
1737
2223
  var _a;
1738
2224
  const { getState, options: { tableId, enableEditing, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setCurrentEditingCell, setCurrentEditingRow, } = table;
@@ -2013,7 +2499,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
2013
2499
 
2014
2500
  const MRT_TableBody = ({ table, tableContainerRef }) => {
2015
2501
  const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
2016
- const { density, globalFilter, pagination, sorting } = getState();
2502
+ const { globalFilter, pagination, sorting } = getState();
2017
2503
  const tableBodyProps = muiTableBodyProps instanceof Function
2018
2504
  ? muiTableBodyProps({ table })
2019
2505
  : muiTableBodyProps;
@@ -2041,19 +2527,37 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
2041
2527
  globalFilter,
2042
2528
  ]);
2043
2529
  const rowVirtualizer = enableRowVirtualization
2044
- ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => (density === 'compact' ? 20 : 50), getScrollElement: () => tableContainerRef.current, overscan: 10 }, vProps))
2530
+ ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
2045
2531
  : {};
2532
+ // const rowVirtualizer: Virtualizer = enableRowVirtualization
2533
+ // ? useVirtualizer({
2534
+ // count: rows.length,
2535
+ // estimateSize: () => (density === 'compact' ? 25 : 50),
2536
+ // getScrollElement: () => tableContainerRef.current as HTMLDivElement,
2537
+ // overscan: 15,
2538
+ // ...vProps,
2539
+ // })
2540
+ // : ({} as any);
2046
2541
  const virtualRows = enableRowVirtualization
2047
- ? rowVirtualizer.getVirtualItems()
2542
+ ? rowVirtualizer.virtualItems
2048
2543
  : [];
2544
+ // const virtualRows = enableRowVirtualization
2545
+ // ? rowVirtualizer.getVirtualItems()
2546
+ // : [];
2049
2547
  let paddingTop = 0;
2050
2548
  let paddingBottom = 0;
2051
2549
  if (enableRowVirtualization) {
2052
2550
  paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
2053
2551
  paddingBottom = !!virtualRows.length
2054
- ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
2552
+ ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
2055
2553
  : 0;
2056
2554
  }
2555
+ // if (enableRowVirtualization) {
2556
+ // paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
2557
+ // paddingBottom = !!virtualRows.length
2558
+ // ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
2559
+ // : 0;
2560
+ // }
2057
2561
  return (React.createElement(TableBody, Object.assign({}, tableBodyProps),
2058
2562
  enableRowVirtualization && paddingTop > 0 && (React.createElement("tr", null,
2059
2563
  React.createElement("td", { style: { height: `${paddingTop}px` } }))),
@@ -2298,5 +2802,5 @@ var MaterialReactTable = (_a) => {
2298
2802
  return (React.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)));
2299
2803
  };
2300
2804
 
2301
- export { MaterialReactTable as default };
2805
+ export { MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
2302
2806
  //# sourceMappingURL=material-react-table.esm.js.map