material-react-table 0.33.5 → 0.34.1
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/dist/cjs/MaterialReactTable.d.ts +9 -22
- package/dist/cjs/buttons/MRT_ColumnPinningButtons.d.ts +4 -5
- package/dist/cjs/buttons/MRT_FullScreenToggleButton.d.ts +3 -4
- package/dist/cjs/buttons/MRT_GrabHandleButton.d.ts +4 -4
- package/dist/cjs/buttons/MRT_ShowHideColumnsButton.d.ts +3 -4
- package/dist/cjs/buttons/MRT_ToggleDensePaddingButton.d.ts +3 -4
- package/dist/cjs/buttons/MRT_ToggleFiltersButton.d.ts +3 -4
- package/dist/cjs/buttons/MRT_ToggleGlobalFilterButton.d.ts +3 -4
- package/dist/cjs/index.d.ts +8 -2
- package/dist/cjs/index.js +529 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/inputs/MRT_GlobalFilterTextField.d.ts +3 -4
- package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts +3 -4
- package/dist/cjs/menus/MRT_ShowHideColumnsMenu.d.ts +3 -4
- package/dist/cjs/menus/MRT_ShowHideColumnsMenuItems.d.ts +8 -8
- package/dist/cjs/table/MRT_TableRoot.d.ts +0 -1
- package/dist/cjs/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
- package/dist/esm/MaterialReactTable.d.ts +9 -22
- package/dist/esm/buttons/MRT_ColumnPinningButtons.d.ts +4 -5
- package/dist/esm/buttons/MRT_FullScreenToggleButton.d.ts +3 -4
- package/dist/esm/buttons/MRT_GrabHandleButton.d.ts +4 -4
- package/dist/esm/buttons/MRT_ShowHideColumnsButton.d.ts +3 -4
- package/dist/esm/buttons/MRT_ToggleDensePaddingButton.d.ts +3 -4
- package/dist/esm/buttons/MRT_ToggleFiltersButton.d.ts +3 -4
- package/dist/esm/buttons/MRT_ToggleGlobalFilterButton.d.ts +3 -4
- package/dist/esm/index.d.ts +8 -2
- package/dist/esm/inputs/MRT_GlobalFilterTextField.d.ts +3 -4
- package/dist/esm/material-react-table.esm.js +522 -18
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/menus/MRT_FilterOptionMenu.d.ts +3 -4
- package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts +3 -4
- package/dist/esm/menus/MRT_ShowHideColumnsMenuItems.d.ts +8 -8
- package/dist/esm/table/MRT_TableRoot.d.ts +0 -1
- package/dist/esm/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
- package/dist/index.d.ts +40 -23
- package/package.json +5 -5
- package/src/MaterialReactTable.tsx +15 -24
- package/src/body/MRT_TableBody.tsx +30 -11
- package/src/body/MRT_TableBodyCell.tsx +1 -1
- package/src/body/MRT_TableBodyRow.tsx +1 -1
- package/src/buttons/MRT_ColumnPinningButtons.tsx +10 -5
- package/src/buttons/MRT_FullScreenToggleButton.tsx +10 -4
- package/src/buttons/MRT_GrabHandleButton.tsx +5 -5
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +10 -4
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +10 -4
- package/src/buttons/MRT_ToggleFiltersButton.tsx +10 -4
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +10 -4
- package/src/head/MRT_TableHeadCell.tsx +1 -1
- package/src/index.tsx +17 -3
- package/src/inputs/MRT_GlobalFilterTextField.tsx +7 -4
- package/src/menus/MRT_FilterOptionMenu.tsx +5 -5
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +9 -7
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +15 -13
- 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 =
|
|
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 })),
|
|
@@ -1623,7 +1619,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1623
1619
|
}
|
|
1624
1620
|
};
|
|
1625
1621
|
const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
|
|
1626
|
-
? `1px dashed ${theme.palette.
|
|
1622
|
+
? `1px dashed ${theme.palette.text.secondary}`
|
|
1627
1623
|
: (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
|
|
1628
1624
|
? `2px dashed ${theme.palette.primary.main}`
|
|
1629
1625
|
: undefined;
|
|
@@ -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;
|
|
@@ -1887,7 +2375,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
|
|
|
1887
2375
|
}
|
|
1888
2376
|
};
|
|
1889
2377
|
const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
|
|
1890
|
-
? `1px dashed ${theme.palette.
|
|
2378
|
+
? `1px dashed ${theme.palette.text.secondary}`
|
|
1891
2379
|
: (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
|
|
1892
2380
|
? `2px dashed ${theme.palette.primary.main}`
|
|
1893
2381
|
: undefined;
|
|
@@ -1992,7 +2480,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
|
|
|
1992
2480
|
};
|
|
1993
2481
|
const rowRef = React.useRef(null);
|
|
1994
2482
|
const draggingBorder = (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id
|
|
1995
|
-
? `1px dashed ${theme.palette.
|
|
2483
|
+
? `1px dashed ${theme.palette.text.secondary}`
|
|
1996
2484
|
: (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
|
|
1997
2485
|
? `2px dashed ${theme.palette.primary.main}`
|
|
1998
2486
|
: undefined;
|
|
@@ -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 {
|
|
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
|
-
?
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|