material-react-table 0.26.4 → 0.27.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.
- package/README.md +7 -8
- package/dist/MaterialReactTable.d.ts +3 -3
- package/dist/material-react-table.cjs.development.js +243 -241
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +244 -242
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/toolbar/MRT_ToolbarTop.d.ts +1 -0
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +5 -5
- package/src/body/MRT_TableBodyCell.tsx +7 -1
- package/src/buttons/MRT_ExpandAllButton.tsx +1 -0
- package/src/head/MRT_TableHeadCell.tsx +2 -4
- package/src/inputs/MRT_FilterTextField.tsx +2 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +3 -3
- package/src/menus/MRT_ColumnActionMenu.tsx +2 -2
- package/src/menus/MRT_FilterOptionMenu.tsx +2 -2
- package/src/toolbar/MRT_ToolbarBottom.tsx +1 -4
- package/src/toolbar/MRT_ToolbarTop.tsx +6 -7
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
|
2
2
|
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';
|
3
3
|
import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
|
4
|
-
import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, AlertTitle,
|
4
|
+
import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
|
5
5
|
import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
|
6
6
|
import { useVirtual } from 'react-virtual';
|
7
7
|
|
@@ -175,7 +175,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
|
|
175
175
|
}, iconButtonProps, {
|
176
176
|
sx: _extends({
|
177
177
|
height: density === 'compact' ? '1.75rem' : '2.25rem',
|
178
|
-
width: density === 'compact' ? '1.75rem' : '2.25rem'
|
178
|
+
width: density === 'compact' ? '1.75rem' : '2.25rem',
|
179
|
+
mt: density !== 'compact' ? '-0.25rem' : undefined
|
179
180
|
}, iconButtonProps == null ? void 0 : iconButtonProps.sx)
|
180
181
|
}), React.createElement(KeyboardDoubleArrowDownIcon, {
|
181
182
|
style: {
|
@@ -232,7 +233,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
232
233
|
};
|
233
234
|
|
234
235
|
var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
235
|
-
var _columnDef$
|
236
|
+
var _columnDef$columnFilt;
|
236
237
|
|
237
238
|
var anchorEl = _ref.anchorEl,
|
238
239
|
header = _ref.header,
|
@@ -242,7 +243,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
242
243
|
var getState = table.getState,
|
243
244
|
_table$options = table.options,
|
244
245
|
enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
|
245
|
-
|
246
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
246
247
|
localization = _table$options.localization,
|
247
248
|
setCurrentFilterFns = table.setCurrentFilterFns,
|
248
249
|
setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
|
@@ -258,7 +259,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
258
259
|
var _ref3 = column != null ? column : {},
|
259
260
|
columnDef = _ref3.columnDef;
|
260
261
|
|
261
|
-
var allowedColumnFilterOptions = (_columnDef$
|
262
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
262
263
|
var filterOptions = useMemo(function () {
|
263
264
|
return [{
|
264
265
|
option: 'fuzzy',
|
@@ -980,7 +981,7 @@ var commonListItemStyles = {
|
|
980
981
|
alignItems: 'center'
|
981
982
|
};
|
982
983
|
var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
983
|
-
var _columnDef$
|
984
|
+
var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
|
984
985
|
|
985
986
|
var anchorEl = _ref.anchorEl,
|
986
987
|
header = _ref.header,
|
@@ -997,7 +998,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
997
998
|
enableHiding = _table$options.enableHiding,
|
998
999
|
enablePinning = _table$options.enablePinning,
|
999
1000
|
enableSorting = _table$options.enableSorting,
|
1000
|
-
|
1001
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
1001
1002
|
_table$options$icons = _table$options.icons,
|
1002
1003
|
ArrowRightIcon = _table$options$icons.ArrowRightIcon,
|
1003
1004
|
ClearAllIcon = _table$options$icons.ClearAllIcon,
|
@@ -1098,7 +1099,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1098
1099
|
};
|
1099
1100
|
|
1100
1101
|
var isSelectFilter = !!columnDef.filterSelectOptions;
|
1101
|
-
var allowedColumnFilterOptions = (_columnDef$
|
1102
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
1102
1103
|
var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
|
1103
1104
|
return React.createElement(Menu, {
|
1104
1105
|
anchorEl: anchorEl,
|
@@ -1445,172 +1446,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1445
1446
|
}, checkboxProps, {
|
1446
1447
|
sx: function sx(theme) {
|
1447
1448
|
return _extends({
|
1448
|
-
height: density === 'compact' ? '1.
|
1449
|
-
width: density === 'compact' ? '1.
|
1450
|
-
m: '-
|
1449
|
+
height: density === 'compact' ? '1.75rem' : '2.5rem',
|
1450
|
+
width: density === 'compact' ? '1.75rem' : '2.5rem',
|
1451
|
+
m: density !== 'compact' ? '-0.4rem' : undefined
|
1451
1452
|
}, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
|
1452
1453
|
}
|
1453
1454
|
})));
|
1454
1455
|
};
|
1455
1456
|
|
1456
|
-
var _excluded = ["table"];
|
1457
|
-
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
1458
|
-
var table = _ref.table,
|
1459
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
1460
|
-
|
1461
|
-
var getState = table.getState,
|
1462
|
-
_table$options = table.options,
|
1463
|
-
_table$options$icons = _table$options.icons,
|
1464
|
-
FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
|
1465
|
-
FullscreenIcon = _table$options$icons.FullscreenIcon,
|
1466
|
-
localization = _table$options.localization,
|
1467
|
-
setIsFullScreen = table.setIsFullScreen;
|
1468
|
-
|
1469
|
-
var _getState = getState(),
|
1470
|
-
isFullScreen = _getState.isFullScreen;
|
1471
|
-
|
1472
|
-
var handleToggleFullScreen = function handleToggleFullScreen() {
|
1473
|
-
setIsFullScreen(!isFullScreen);
|
1474
|
-
};
|
1475
|
-
|
1476
|
-
return React.createElement(Tooltip, {
|
1477
|
-
arrow: true,
|
1478
|
-
title: localization.toggleFullScreen
|
1479
|
-
}, React.createElement(IconButton, Object.assign({
|
1480
|
-
"aria-label": localization.showHideFilters,
|
1481
|
-
onClick: handleToggleFullScreen
|
1482
|
-
}, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
|
1483
|
-
};
|
1484
|
-
|
1485
|
-
var _excluded$1 = ["table"];
|
1486
|
-
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
1487
|
-
var table = _ref.table,
|
1488
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
1489
|
-
|
1490
|
-
var _table$options = table.options,
|
1491
|
-
ViewColumnIcon = _table$options.icons.ViewColumnIcon,
|
1492
|
-
localization = _table$options.localization;
|
1493
|
-
|
1494
|
-
var _useState = useState(null),
|
1495
|
-
anchorEl = _useState[0],
|
1496
|
-
setAnchorEl = _useState[1];
|
1497
|
-
|
1498
|
-
var handleClick = function handleClick(event) {
|
1499
|
-
setAnchorEl(event.currentTarget);
|
1500
|
-
};
|
1501
|
-
|
1502
|
-
return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
|
1503
|
-
arrow: true,
|
1504
|
-
title: localization.showHideColumns
|
1505
|
-
}, React.createElement(IconButton, Object.assign({
|
1506
|
-
"aria-label": localization.showHideColumns,
|
1507
|
-
onClick: handleClick
|
1508
|
-
}, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
|
1509
|
-
anchorEl: anchorEl,
|
1510
|
-
setAnchorEl: setAnchorEl,
|
1511
|
-
table: table
|
1512
|
-
}));
|
1513
|
-
};
|
1514
|
-
|
1515
|
-
var _excluded$2 = ["table"];
|
1516
|
-
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
1517
|
-
var table = _ref.table,
|
1518
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
1519
|
-
|
1520
|
-
var getState = table.getState,
|
1521
|
-
_table$options = table.options,
|
1522
|
-
_table$options$icons = _table$options.icons,
|
1523
|
-
DensityLargeIcon = _table$options$icons.DensityLargeIcon,
|
1524
|
-
DensityMediumIcon = _table$options$icons.DensityMediumIcon,
|
1525
|
-
DensitySmallIcon = _table$options$icons.DensitySmallIcon,
|
1526
|
-
localization = _table$options.localization,
|
1527
|
-
setDensity = table.setDensity;
|
1528
|
-
|
1529
|
-
var _getState = getState(),
|
1530
|
-
density = _getState.density;
|
1531
|
-
|
1532
|
-
var handleToggleDensePadding = function handleToggleDensePadding() {
|
1533
|
-
var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
|
1534
|
-
setDensity(nextDensity);
|
1535
|
-
};
|
1536
|
-
|
1537
|
-
return React.createElement(Tooltip, {
|
1538
|
-
arrow: true,
|
1539
|
-
title: localization.toggleDensity
|
1540
|
-
}, React.createElement(IconButton, Object.assign({
|
1541
|
-
"aria-label": localization.toggleDensity,
|
1542
|
-
onClick: handleToggleDensePadding
|
1543
|
-
}, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
|
1544
|
-
};
|
1545
|
-
|
1546
|
-
var _excluded$3 = ["table"];
|
1547
|
-
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
1548
|
-
var table = _ref.table,
|
1549
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
1550
|
-
|
1551
|
-
var getState = table.getState,
|
1552
|
-
_table$options = table.options,
|
1553
|
-
_table$options$icons = _table$options.icons,
|
1554
|
-
FilterListIcon = _table$options$icons.FilterListIcon,
|
1555
|
-
FilterListOffIcon = _table$options$icons.FilterListOffIcon,
|
1556
|
-
localization = _table$options.localization,
|
1557
|
-
setShowFilters = table.setShowFilters;
|
1558
|
-
|
1559
|
-
var _getState = getState(),
|
1560
|
-
showColumnFilters = _getState.showColumnFilters;
|
1561
|
-
|
1562
|
-
var handleToggleShowFilters = function handleToggleShowFilters() {
|
1563
|
-
setShowFilters(!showColumnFilters);
|
1564
|
-
};
|
1565
|
-
|
1566
|
-
return React.createElement(Tooltip, {
|
1567
|
-
arrow: true,
|
1568
|
-
title: localization.showHideFilters
|
1569
|
-
}, React.createElement(IconButton, Object.assign({
|
1570
|
-
"aria-label": localization.showHideFilters,
|
1571
|
-
onClick: handleToggleShowFilters
|
1572
|
-
}, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
|
1573
|
-
};
|
1574
|
-
|
1575
|
-
var _excluded$4 = ["table"];
|
1576
|
-
var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
1577
|
-
var table = _ref.table,
|
1578
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
1579
|
-
|
1580
|
-
var getState = table.getState,
|
1581
|
-
_table$options = table.options,
|
1582
|
-
_table$options$icons = _table$options.icons,
|
1583
|
-
SearchIcon = _table$options$icons.SearchIcon,
|
1584
|
-
SearchOffIcon = _table$options$icons.SearchOffIcon,
|
1585
|
-
tableId = _table$options.tableId,
|
1586
|
-
localization = _table$options.localization,
|
1587
|
-
muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
|
1588
|
-
setShowGlobalFilter = table.setShowGlobalFilter;
|
1589
|
-
|
1590
|
-
var _getState = getState(),
|
1591
|
-
showGlobalFilter = _getState.showGlobalFilter;
|
1592
|
-
|
1593
|
-
var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
|
1594
|
-
table: table
|
1595
|
-
}) : muiSearchTextFieldProps;
|
1596
|
-
|
1597
|
-
var handleToggleSearch = function handleToggleSearch() {
|
1598
|
-
setShowGlobalFilter(!showGlobalFilter);
|
1599
|
-
setTimeout(function () {
|
1600
|
-
var _document$getElementB, _textFieldProps$id;
|
1601
|
-
|
1602
|
-
return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
|
1603
|
-
}, 200);
|
1604
|
-
};
|
1605
|
-
|
1606
|
-
return React.createElement(Tooltip, {
|
1607
|
-
arrow: true,
|
1608
|
-
title: localization.showHideSearch
|
1609
|
-
}, React.createElement(IconButton, Object.assign({
|
1610
|
-
onClick: handleToggleSearch
|
1611
|
-
}, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
|
1612
|
-
};
|
1613
|
-
|
1614
1457
|
var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
1615
1458
|
var _localization$clearSe;
|
1616
1459
|
|
@@ -1704,47 +1547,37 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
|
1704
1547
|
}));
|
1705
1548
|
};
|
1706
1549
|
|
1707
|
-
var
|
1708
|
-
var
|
1550
|
+
var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
|
1551
|
+
var isTopToolbar = _ref.isTopToolbar,
|
1552
|
+
table = _ref.table;
|
1553
|
+
var muiLinearProgressProps = table.options.muiLinearProgressProps,
|
1554
|
+
getState = table.getState;
|
1709
1555
|
|
1710
|
-
var
|
1711
|
-
|
1712
|
-
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
1722
|
-
return React.createElement(Box, {
|
1556
|
+
var _getState = getState(),
|
1557
|
+
isLoading = _getState.isLoading,
|
1558
|
+
showProgressBars = _getState.showProgressBars;
|
1559
|
+
|
1560
|
+
var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
|
1561
|
+
isTopToolbar: isTopToolbar,
|
1562
|
+
table: table
|
1563
|
+
}) : muiLinearProgressProps;
|
1564
|
+
return React.createElement(Collapse, {
|
1565
|
+
"in": isLoading || showProgressBars,
|
1566
|
+
mountOnEnter: true,
|
1567
|
+
unmountOnExit: true,
|
1723
1568
|
sx: {
|
1724
|
-
|
1725
|
-
|
1726
|
-
|
1569
|
+
bottom: isTopToolbar ? 0 : undefined,
|
1570
|
+
position: 'absolute',
|
1571
|
+
top: !isTopToolbar ? 0 : undefined,
|
1572
|
+
width: '100%'
|
1727
1573
|
}
|
1728
|
-
}, (
|
1729
|
-
|
1730
|
-
|
1731
|
-
|
1732
|
-
|
1733
|
-
|
1734
|
-
|
1735
|
-
})) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
|
1736
|
-
table: table
|
1737
|
-
}), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
|
1738
|
-
table: table
|
1739
|
-
}), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
|
1740
|
-
table: table
|
1741
|
-
}), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
|
1742
|
-
table: table
|
1743
|
-
}), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
|
1744
|
-
table: table
|
1745
|
-
}), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
|
1746
|
-
table: table
|
1747
|
-
})));
|
1574
|
+
}, React.createElement(LinearProgress, Object.assign({
|
1575
|
+
"aria-label": "Loading",
|
1576
|
+
"aria-busy": "true",
|
1577
|
+
sx: {
|
1578
|
+
position: 'relative'
|
1579
|
+
}
|
1580
|
+
}, linearProgressProps)));
|
1748
1581
|
};
|
1749
1582
|
|
1750
1583
|
var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
@@ -1869,42 +1702,211 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
1869
1702
|
}, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
|
1870
1703
|
};
|
1871
1704
|
|
1872
|
-
var
|
1873
|
-
|
1874
|
-
|
1875
|
-
|
1876
|
-
|
1705
|
+
var _excluded = ["table"];
|
1706
|
+
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
1707
|
+
var table = _ref.table,
|
1708
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
1709
|
+
|
1710
|
+
var getState = table.getState,
|
1711
|
+
_table$options = table.options,
|
1712
|
+
_table$options$icons = _table$options.icons,
|
1713
|
+
FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
|
1714
|
+
FullscreenIcon = _table$options$icons.FullscreenIcon,
|
1715
|
+
localization = _table$options.localization,
|
1716
|
+
setIsFullScreen = table.setIsFullScreen;
|
1877
1717
|
|
1878
1718
|
var _getState = getState(),
|
1879
|
-
|
1880
|
-
showProgressBars = _getState.showProgressBars;
|
1719
|
+
isFullScreen = _getState.isFullScreen;
|
1881
1720
|
|
1882
|
-
var
|
1883
|
-
|
1721
|
+
var handleToggleFullScreen = function handleToggleFullScreen() {
|
1722
|
+
setIsFullScreen(!isFullScreen);
|
1723
|
+
};
|
1724
|
+
|
1725
|
+
return React.createElement(Tooltip, {
|
1726
|
+
arrow: true,
|
1727
|
+
title: localization.toggleFullScreen
|
1728
|
+
}, React.createElement(IconButton, Object.assign({
|
1729
|
+
"aria-label": localization.showHideFilters,
|
1730
|
+
onClick: handleToggleFullScreen
|
1731
|
+
}, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
|
1732
|
+
};
|
1733
|
+
|
1734
|
+
var _excluded$1 = ["table"];
|
1735
|
+
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
1736
|
+
var table = _ref.table,
|
1737
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
1738
|
+
|
1739
|
+
var _table$options = table.options,
|
1740
|
+
ViewColumnIcon = _table$options.icons.ViewColumnIcon,
|
1741
|
+
localization = _table$options.localization;
|
1742
|
+
|
1743
|
+
var _useState = useState(null),
|
1744
|
+
anchorEl = _useState[0],
|
1745
|
+
setAnchorEl = _useState[1];
|
1746
|
+
|
1747
|
+
var handleClick = function handleClick(event) {
|
1748
|
+
setAnchorEl(event.currentTarget);
|
1749
|
+
};
|
1750
|
+
|
1751
|
+
return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
|
1752
|
+
arrow: true,
|
1753
|
+
title: localization.showHideColumns
|
1754
|
+
}, React.createElement(IconButton, Object.assign({
|
1755
|
+
"aria-label": localization.showHideColumns,
|
1756
|
+
onClick: handleClick
|
1757
|
+
}, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
|
1758
|
+
anchorEl: anchorEl,
|
1759
|
+
setAnchorEl: setAnchorEl,
|
1884
1760
|
table: table
|
1885
|
-
})
|
1886
|
-
|
1887
|
-
|
1888
|
-
|
1889
|
-
|
1890
|
-
|
1891
|
-
|
1892
|
-
|
1893
|
-
|
1894
|
-
|
1895
|
-
|
1896
|
-
|
1897
|
-
|
1898
|
-
|
1761
|
+
}));
|
1762
|
+
};
|
1763
|
+
|
1764
|
+
var _excluded$2 = ["table"];
|
1765
|
+
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
1766
|
+
var table = _ref.table,
|
1767
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
1768
|
+
|
1769
|
+
var getState = table.getState,
|
1770
|
+
_table$options = table.options,
|
1771
|
+
_table$options$icons = _table$options.icons,
|
1772
|
+
DensityLargeIcon = _table$options$icons.DensityLargeIcon,
|
1773
|
+
DensityMediumIcon = _table$options$icons.DensityMediumIcon,
|
1774
|
+
DensitySmallIcon = _table$options$icons.DensitySmallIcon,
|
1775
|
+
localization = _table$options.localization,
|
1776
|
+
setDensity = table.setDensity;
|
1777
|
+
|
1778
|
+
var _getState = getState(),
|
1779
|
+
density = _getState.density;
|
1780
|
+
|
1781
|
+
var handleToggleDensePadding = function handleToggleDensePadding() {
|
1782
|
+
var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
|
1783
|
+
setDensity(nextDensity);
|
1784
|
+
};
|
1785
|
+
|
1786
|
+
return React.createElement(Tooltip, {
|
1787
|
+
arrow: true,
|
1788
|
+
title: localization.toggleDensity
|
1789
|
+
}, React.createElement(IconButton, Object.assign({
|
1790
|
+
"aria-label": localization.toggleDensity,
|
1791
|
+
onClick: handleToggleDensePadding
|
1792
|
+
}, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
|
1793
|
+
};
|
1794
|
+
|
1795
|
+
var _excluded$3 = ["table"];
|
1796
|
+
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
1797
|
+
var table = _ref.table,
|
1798
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
1799
|
+
|
1800
|
+
var getState = table.getState,
|
1801
|
+
_table$options = table.options,
|
1802
|
+
_table$options$icons = _table$options.icons,
|
1803
|
+
FilterListIcon = _table$options$icons.FilterListIcon,
|
1804
|
+
FilterListOffIcon = _table$options$icons.FilterListOffIcon,
|
1805
|
+
localization = _table$options.localization,
|
1806
|
+
setShowFilters = table.setShowFilters;
|
1807
|
+
|
1808
|
+
var _getState = getState(),
|
1809
|
+
showColumnFilters = _getState.showColumnFilters;
|
1810
|
+
|
1811
|
+
var handleToggleShowFilters = function handleToggleShowFilters() {
|
1812
|
+
setShowFilters(!showColumnFilters);
|
1813
|
+
};
|
1814
|
+
|
1815
|
+
return React.createElement(Tooltip, {
|
1816
|
+
arrow: true,
|
1817
|
+
title: localization.showHideFilters
|
1818
|
+
}, React.createElement(IconButton, Object.assign({
|
1819
|
+
"aria-label": localization.showHideFilters,
|
1820
|
+
onClick: handleToggleShowFilters
|
1821
|
+
}, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
|
1822
|
+
};
|
1823
|
+
|
1824
|
+
var _excluded$4 = ["table"];
|
1825
|
+
var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
1826
|
+
var table = _ref.table,
|
1827
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
1828
|
+
|
1829
|
+
var getState = table.getState,
|
1830
|
+
_table$options = table.options,
|
1831
|
+
_table$options$icons = _table$options.icons,
|
1832
|
+
SearchIcon = _table$options$icons.SearchIcon,
|
1833
|
+
SearchOffIcon = _table$options$icons.SearchOffIcon,
|
1834
|
+
tableId = _table$options.tableId,
|
1835
|
+
localization = _table$options.localization,
|
1836
|
+
muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
|
1837
|
+
setShowGlobalFilter = table.setShowGlobalFilter;
|
1838
|
+
|
1839
|
+
var _getState = getState(),
|
1840
|
+
showGlobalFilter = _getState.showGlobalFilter;
|
1841
|
+
|
1842
|
+
var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
|
1843
|
+
table: table
|
1844
|
+
}) : muiSearchTextFieldProps;
|
1845
|
+
|
1846
|
+
var handleToggleSearch = function handleToggleSearch() {
|
1847
|
+
setShowGlobalFilter(!showGlobalFilter);
|
1848
|
+
setTimeout(function () {
|
1849
|
+
var _document$getElementB, _textFieldProps$id;
|
1850
|
+
|
1851
|
+
return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
|
1852
|
+
}, 200);
|
1853
|
+
};
|
1854
|
+
|
1855
|
+
return React.createElement(Tooltip, {
|
1856
|
+
arrow: true,
|
1857
|
+
title: localization.showHideSearch
|
1858
|
+
}, React.createElement(IconButton, Object.assign({
|
1859
|
+
onClick: handleToggleSearch
|
1860
|
+
}, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
|
1861
|
+
};
|
1862
|
+
|
1863
|
+
var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
|
1864
|
+
var _renderToolbarInterna;
|
1865
|
+
|
1866
|
+
var table = _ref.table;
|
1867
|
+
var _table$options = table.options,
|
1868
|
+
enableColumnFilters = _table$options.enableColumnFilters,
|
1869
|
+
enableColumnOrdering = _table$options.enableColumnOrdering,
|
1870
|
+
enableDensityToggle = _table$options.enableDensityToggle,
|
1871
|
+
enableFilters = _table$options.enableFilters,
|
1872
|
+
enableFullScreenToggle = _table$options.enableFullScreenToggle,
|
1873
|
+
enableGlobalFilter = _table$options.enableGlobalFilter,
|
1874
|
+
enableHiding = _table$options.enableHiding,
|
1875
|
+
enablePinning = _table$options.enablePinning,
|
1876
|
+
positionGlobalFilter = _table$options.positionGlobalFilter,
|
1877
|
+
renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
|
1878
|
+
return React.createElement(Box, {
|
1899
1879
|
sx: {
|
1900
|
-
|
1880
|
+
alignItems: 'center',
|
1881
|
+
display: 'flex',
|
1882
|
+
zIndex: 3
|
1901
1883
|
}
|
1902
|
-
},
|
1884
|
+
}, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
|
1885
|
+
MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
|
1886
|
+
MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
|
1887
|
+
MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
|
1888
|
+
MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
|
1889
|
+
MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
|
1890
|
+
table: table
|
1891
|
+
})) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
|
1892
|
+
table: table
|
1893
|
+
}), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
|
1894
|
+
table: table
|
1895
|
+
}), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
|
1896
|
+
table: table
|
1897
|
+
}), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
|
1898
|
+
table: table
|
1899
|
+
}), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
|
1900
|
+
table: table
|
1901
|
+
}), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
|
1902
|
+
table: table
|
1903
|
+
})));
|
1903
1904
|
};
|
1904
1905
|
|
1905
1906
|
var commonToolbarStyles = function commonToolbarStyles(_ref) {
|
1906
1907
|
var theme = _ref.theme;
|
1907
1908
|
return {
|
1909
|
+
alignItems: 'flex-start',
|
1908
1910
|
backgroundColor: lighten(theme.palette.background["default"], 0.04),
|
1909
1911
|
backgroundImage: 'none',
|
1910
1912
|
display: 'grid',
|
@@ -1939,7 +1941,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
1939
1941
|
var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
|
1940
1942
|
table: table
|
1941
1943
|
}) : muiTableToolbarTopProps;
|
1942
|
-
var stackAlertBanner = isMobile ||
|
1944
|
+
var stackAlertBanner = isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
|
1943
1945
|
return React.createElement(Toolbar, Object.assign({
|
1944
1946
|
id: "mrt-" + tableId + "-toolbar-top",
|
1945
1947
|
variant: "dense"
|
@@ -2002,7 +2004,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
2002
2004
|
var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
|
2003
2005
|
table: table
|
2004
2006
|
}) : muiTableToolbarBottomProps;
|
2005
|
-
var stackAlertBanner = isMobile ||
|
2007
|
+
var stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
|
2006
2008
|
return React.createElement(Toolbar, Object.assign({
|
2007
2009
|
id: "mrt-" + tableId + "-toolbar-bottom",
|
2008
2010
|
variant: "dense"
|
@@ -2112,7 +2114,7 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
|
|
2112
2114
|
};
|
2113
2115
|
|
2114
2116
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
2115
|
-
var _currentFilterOption$, _localization$filterB, _columnDef$
|
2117
|
+
var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
|
2116
2118
|
|
2117
2119
|
var header = _ref.header,
|
2118
2120
|
inputIndex = _ref.inputIndex,
|
@@ -2120,7 +2122,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2120
2122
|
var getState = table.getState,
|
2121
2123
|
_table$options = table.options,
|
2122
2124
|
enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
|
2123
|
-
|
2125
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
2124
2126
|
_table$options$icons = _table$options.icons,
|
2125
2127
|
FilterListIcon = _table$options$icons.FilterListIcon,
|
2126
2128
|
CloseIcon = _table$options$icons.CloseIcon,
|
@@ -2217,7 +2219,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2217
2219
|
var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
|
2218
2220
|
localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
|
2219
2221
|
var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
|
2220
|
-
var allowedColumnFilterOptions = (_columnDef$
|
2222
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
2221
2223
|
var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
|
2222
2224
|
return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
|
2223
2225
|
fullWidth: true,
|
@@ -2289,7 +2291,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2289
2291
|
}, textFieldProps, {
|
2290
2292
|
sx: function sx(theme) {
|
2291
2293
|
return _extends({
|
2292
|
-
m: '-0.25rem',
|
2293
2294
|
p: 0,
|
2294
2295
|
minWidth: !filterChipLabel ? '8rem' : 'auto',
|
2295
2296
|
width: 'calc(100% + 0.5rem)',
|
@@ -2622,7 +2623,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2622
2623
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
2623
2624
|
overflow: 'visible',
|
2624
2625
|
opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
|
2625
|
-
p: density === 'compact' ?
|
2626
|
+
p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
2626
2627
|
pb: columnDefType === 'display' ? 0 : undefined,
|
2627
2628
|
position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
|
2628
2629
|
pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
|
@@ -2923,6 +2924,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2923
2924
|
enableClickToCopy = _table$options.enableClickToCopy,
|
2924
2925
|
enableColumnOrdering = _table$options.enableColumnOrdering,
|
2925
2926
|
enableEditing = _table$options.enableEditing,
|
2927
|
+
enablePagination = _table$options.enablePagination,
|
2926
2928
|
enableRowNumbers = _table$options.enableRowNumbers,
|
2927
2929
|
muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
|
2928
2930
|
muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
|
@@ -2997,7 +2999,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2997
2999
|
var draggingBorders = draggingBorder ? {
|
2998
3000
|
borderLeft: draggingBorder,
|
2999
3001
|
borderRight: draggingBorder,
|
3000
|
-
borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
|
3002
|
+
borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
|
3001
3003
|
} : undefined;
|
3002
3004
|
return React.createElement(TableCell, Object.assign({
|
3003
3005
|
onDoubleClick: handleDoubleClick,
|
@@ -3725,7 +3727,7 @@ var MaterialReactTable = (function (_ref) {
|
|
3725
3727
|
_ref$enableColumnActi = _ref.enableColumnActions,
|
3726
3728
|
enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
|
3727
3729
|
_ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
|
3728
|
-
enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ?
|
3730
|
+
enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
|
3729
3731
|
_ref$enableColumnFilt2 = _ref.enableColumnFilters,
|
3730
3732
|
enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
|
3731
3733
|
_ref$enableColumnOrde = _ref.enableColumnOrdering,
|
@@ -3743,7 +3745,7 @@ var MaterialReactTable = (function (_ref) {
|
|
3743
3745
|
_ref$enableGlobalFilt = _ref.enableGlobalFilter,
|
3744
3746
|
enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
|
3745
3747
|
_ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
|
3746
|
-
enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ?
|
3748
|
+
enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
|
3747
3749
|
_ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
|
3748
3750
|
enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
|
3749
3751
|
_ref$enableGrouping = _ref.enableGrouping,
|