material-react-table 0.26.4 → 0.27.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
@@ -182,7 +182,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
|
|
182
182
|
}, iconButtonProps, {
|
183
183
|
sx: _extends({
|
184
184
|
height: density === 'compact' ? '1.75rem' : '2.25rem',
|
185
|
-
width: density === 'compact' ? '1.75rem' : '2.25rem'
|
185
|
+
width: density === 'compact' ? '1.75rem' : '2.25rem',
|
186
|
+
mt: density !== 'compact' ? '-0.25rem' : undefined
|
186
187
|
}, iconButtonProps == null ? void 0 : iconButtonProps.sx)
|
187
188
|
}), React__default.createElement(KeyboardDoubleArrowDownIcon, {
|
188
189
|
style: {
|
@@ -239,7 +240,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
239
240
|
};
|
240
241
|
|
241
242
|
var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
242
|
-
var _columnDef$
|
243
|
+
var _columnDef$columnFilt;
|
243
244
|
|
244
245
|
var anchorEl = _ref.anchorEl,
|
245
246
|
header = _ref.header,
|
@@ -249,7 +250,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
249
250
|
var getState = table.getState,
|
250
251
|
_table$options = table.options,
|
251
252
|
enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
|
252
|
-
|
253
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
253
254
|
localization = _table$options.localization,
|
254
255
|
setCurrentFilterFns = table.setCurrentFilterFns,
|
255
256
|
setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
|
@@ -265,7 +266,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
265
266
|
var _ref3 = column != null ? column : {},
|
266
267
|
columnDef = _ref3.columnDef;
|
267
268
|
|
268
|
-
var allowedColumnFilterOptions = (_columnDef$
|
269
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
269
270
|
var filterOptions = React.useMemo(function () {
|
270
271
|
return [{
|
271
272
|
option: 'fuzzy',
|
@@ -987,7 +988,7 @@ var commonListItemStyles = {
|
|
987
988
|
alignItems: 'center'
|
988
989
|
};
|
989
990
|
var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
990
|
-
var _columnDef$
|
991
|
+
var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
|
991
992
|
|
992
993
|
var anchorEl = _ref.anchorEl,
|
993
994
|
header = _ref.header,
|
@@ -1004,7 +1005,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1004
1005
|
enableHiding = _table$options.enableHiding,
|
1005
1006
|
enablePinning = _table$options.enablePinning,
|
1006
1007
|
enableSorting = _table$options.enableSorting,
|
1007
|
-
|
1008
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
1008
1009
|
_table$options$icons = _table$options.icons,
|
1009
1010
|
ArrowRightIcon = _table$options$icons.ArrowRightIcon,
|
1010
1011
|
ClearAllIcon = _table$options$icons.ClearAllIcon,
|
@@ -1105,7 +1106,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1105
1106
|
};
|
1106
1107
|
|
1107
1108
|
var isSelectFilter = !!columnDef.filterSelectOptions;
|
1108
|
-
var allowedColumnFilterOptions = (_columnDef$
|
1109
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
1109
1110
|
var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
|
1110
1111
|
return React__default.createElement(material.Menu, {
|
1111
1112
|
anchorEl: anchorEl,
|
@@ -1452,172 +1453,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1452
1453
|
}, checkboxProps, {
|
1453
1454
|
sx: function sx(theme) {
|
1454
1455
|
return _extends({
|
1455
|
-
height: density === 'compact' ? '1.
|
1456
|
-
width: density === 'compact' ? '1.
|
1457
|
-
m: '-
|
1456
|
+
height: density === 'compact' ? '1.75rem' : '2.5rem',
|
1457
|
+
width: density === 'compact' ? '1.75rem' : '2.5rem',
|
1458
|
+
m: density !== 'compact' ? '-0.4rem' : undefined
|
1458
1459
|
}, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
|
1459
1460
|
}
|
1460
1461
|
})));
|
1461
1462
|
};
|
1462
1463
|
|
1463
|
-
var _excluded = ["table"];
|
1464
|
-
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
1465
|
-
var table = _ref.table,
|
1466
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
1467
|
-
|
1468
|
-
var getState = table.getState,
|
1469
|
-
_table$options = table.options,
|
1470
|
-
_table$options$icons = _table$options.icons,
|
1471
|
-
FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
|
1472
|
-
FullscreenIcon = _table$options$icons.FullscreenIcon,
|
1473
|
-
localization = _table$options.localization,
|
1474
|
-
setIsFullScreen = table.setIsFullScreen;
|
1475
|
-
|
1476
|
-
var _getState = getState(),
|
1477
|
-
isFullScreen = _getState.isFullScreen;
|
1478
|
-
|
1479
|
-
var handleToggleFullScreen = function handleToggleFullScreen() {
|
1480
|
-
setIsFullScreen(!isFullScreen);
|
1481
|
-
};
|
1482
|
-
|
1483
|
-
return React__default.createElement(material.Tooltip, {
|
1484
|
-
arrow: true,
|
1485
|
-
title: localization.toggleFullScreen
|
1486
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
1487
|
-
"aria-label": localization.showHideFilters,
|
1488
|
-
onClick: handleToggleFullScreen
|
1489
|
-
}, rest), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
|
1490
|
-
};
|
1491
|
-
|
1492
|
-
var _excluded$1 = ["table"];
|
1493
|
-
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
1494
|
-
var table = _ref.table,
|
1495
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
1496
|
-
|
1497
|
-
var _table$options = table.options,
|
1498
|
-
ViewColumnIcon = _table$options.icons.ViewColumnIcon,
|
1499
|
-
localization = _table$options.localization;
|
1500
|
-
|
1501
|
-
var _useState = React.useState(null),
|
1502
|
-
anchorEl = _useState[0],
|
1503
|
-
setAnchorEl = _useState[1];
|
1504
|
-
|
1505
|
-
var handleClick = function handleClick(event) {
|
1506
|
-
setAnchorEl(event.currentTarget);
|
1507
|
-
};
|
1508
|
-
|
1509
|
-
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
1510
|
-
arrow: true,
|
1511
|
-
title: localization.showHideColumns
|
1512
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
1513
|
-
"aria-label": localization.showHideColumns,
|
1514
|
-
onClick: handleClick
|
1515
|
-
}, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
|
1516
|
-
anchorEl: anchorEl,
|
1517
|
-
setAnchorEl: setAnchorEl,
|
1518
|
-
table: table
|
1519
|
-
}));
|
1520
|
-
};
|
1521
|
-
|
1522
|
-
var _excluded$2 = ["table"];
|
1523
|
-
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
1524
|
-
var table = _ref.table,
|
1525
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
1526
|
-
|
1527
|
-
var getState = table.getState,
|
1528
|
-
_table$options = table.options,
|
1529
|
-
_table$options$icons = _table$options.icons,
|
1530
|
-
DensityLargeIcon = _table$options$icons.DensityLargeIcon,
|
1531
|
-
DensityMediumIcon = _table$options$icons.DensityMediumIcon,
|
1532
|
-
DensitySmallIcon = _table$options$icons.DensitySmallIcon,
|
1533
|
-
localization = _table$options.localization,
|
1534
|
-
setDensity = table.setDensity;
|
1535
|
-
|
1536
|
-
var _getState = getState(),
|
1537
|
-
density = _getState.density;
|
1538
|
-
|
1539
|
-
var handleToggleDensePadding = function handleToggleDensePadding() {
|
1540
|
-
var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
|
1541
|
-
setDensity(nextDensity);
|
1542
|
-
};
|
1543
|
-
|
1544
|
-
return React__default.createElement(material.Tooltip, {
|
1545
|
-
arrow: true,
|
1546
|
-
title: localization.toggleDensity
|
1547
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
1548
|
-
"aria-label": localization.toggleDensity,
|
1549
|
-
onClick: handleToggleDensePadding
|
1550
|
-
}, rest), density === 'compact' ? React__default.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React__default.createElement(DensityMediumIcon, null) : React__default.createElement(DensityLargeIcon, null)));
|
1551
|
-
};
|
1552
|
-
|
1553
|
-
var _excluded$3 = ["table"];
|
1554
|
-
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
1555
|
-
var table = _ref.table,
|
1556
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
1557
|
-
|
1558
|
-
var getState = table.getState,
|
1559
|
-
_table$options = table.options,
|
1560
|
-
_table$options$icons = _table$options.icons,
|
1561
|
-
FilterListIcon = _table$options$icons.FilterListIcon,
|
1562
|
-
FilterListOffIcon = _table$options$icons.FilterListOffIcon,
|
1563
|
-
localization = _table$options.localization,
|
1564
|
-
setShowFilters = table.setShowFilters;
|
1565
|
-
|
1566
|
-
var _getState = getState(),
|
1567
|
-
showColumnFilters = _getState.showColumnFilters;
|
1568
|
-
|
1569
|
-
var handleToggleShowFilters = function handleToggleShowFilters() {
|
1570
|
-
setShowFilters(!showColumnFilters);
|
1571
|
-
};
|
1572
|
-
|
1573
|
-
return React__default.createElement(material.Tooltip, {
|
1574
|
-
arrow: true,
|
1575
|
-
title: localization.showHideFilters
|
1576
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
1577
|
-
"aria-label": localization.showHideFilters,
|
1578
|
-
onClick: handleToggleShowFilters
|
1579
|
-
}, rest), showColumnFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
|
1580
|
-
};
|
1581
|
-
|
1582
|
-
var _excluded$4 = ["table"];
|
1583
|
-
var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
1584
|
-
var table = _ref.table,
|
1585
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
1586
|
-
|
1587
|
-
var getState = table.getState,
|
1588
|
-
_table$options = table.options,
|
1589
|
-
_table$options$icons = _table$options.icons,
|
1590
|
-
SearchIcon = _table$options$icons.SearchIcon,
|
1591
|
-
SearchOffIcon = _table$options$icons.SearchOffIcon,
|
1592
|
-
tableId = _table$options.tableId,
|
1593
|
-
localization = _table$options.localization,
|
1594
|
-
muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
|
1595
|
-
setShowGlobalFilter = table.setShowGlobalFilter;
|
1596
|
-
|
1597
|
-
var _getState = getState(),
|
1598
|
-
showGlobalFilter = _getState.showGlobalFilter;
|
1599
|
-
|
1600
|
-
var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
|
1601
|
-
table: table
|
1602
|
-
}) : muiSearchTextFieldProps;
|
1603
|
-
|
1604
|
-
var handleToggleSearch = function handleToggleSearch() {
|
1605
|
-
setShowGlobalFilter(!showGlobalFilter);
|
1606
|
-
setTimeout(function () {
|
1607
|
-
var _document$getElementB, _textFieldProps$id;
|
1608
|
-
|
1609
|
-
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();
|
1610
|
-
}, 200);
|
1611
|
-
};
|
1612
|
-
|
1613
|
-
return React__default.createElement(material.Tooltip, {
|
1614
|
-
arrow: true,
|
1615
|
-
title: localization.showHideSearch
|
1616
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
1617
|
-
onClick: handleToggleSearch
|
1618
|
-
}, rest), showGlobalFilter ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
|
1619
|
-
};
|
1620
|
-
|
1621
1464
|
var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
1622
1465
|
var _localization$clearSe;
|
1623
1466
|
|
@@ -1711,47 +1554,37 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
|
1711
1554
|
}));
|
1712
1555
|
};
|
1713
1556
|
|
1714
|
-
var
|
1715
|
-
var
|
1557
|
+
var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
|
1558
|
+
var isTopToolbar = _ref.isTopToolbar,
|
1559
|
+
table = _ref.table;
|
1560
|
+
var muiLinearProgressProps = table.options.muiLinearProgressProps,
|
1561
|
+
getState = table.getState;
|
1716
1562
|
|
1717
|
-
var
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
1722
|
-
|
1723
|
-
|
1724
|
-
|
1725
|
-
|
1726
|
-
|
1727
|
-
|
1728
|
-
|
1729
|
-
return React__default.createElement(material.Box, {
|
1563
|
+
var _getState = getState(),
|
1564
|
+
isLoading = _getState.isLoading,
|
1565
|
+
showProgressBars = _getState.showProgressBars;
|
1566
|
+
|
1567
|
+
var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
|
1568
|
+
isTopToolbar: isTopToolbar,
|
1569
|
+
table: table
|
1570
|
+
}) : muiLinearProgressProps;
|
1571
|
+
return React__default.createElement(material.Collapse, {
|
1572
|
+
"in": isLoading || showProgressBars,
|
1573
|
+
mountOnEnter: true,
|
1574
|
+
unmountOnExit: true,
|
1730
1575
|
sx: {
|
1731
|
-
|
1732
|
-
|
1733
|
-
|
1576
|
+
bottom: isTopToolbar ? 0 : undefined,
|
1577
|
+
position: 'absolute',
|
1578
|
+
top: !isTopToolbar ? 0 : undefined,
|
1579
|
+
width: '100%'
|
1734
1580
|
}
|
1735
|
-
}, (
|
1736
|
-
|
1737
|
-
|
1738
|
-
|
1739
|
-
|
1740
|
-
|
1741
|
-
|
1742
|
-
})) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_GlobalFilterTextField, {
|
1743
|
-
table: table
|
1744
|
-
}), enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
|
1745
|
-
table: table
|
1746
|
-
}), enableFilters && enableColumnFilters && React__default.createElement(MRT_ToggleFiltersButton, {
|
1747
|
-
table: table
|
1748
|
-
}), (enableHiding || enableColumnOrdering || enablePinning) && React__default.createElement(MRT_ShowHideColumnsButton, {
|
1749
|
-
table: table
|
1750
|
-
}), enableDensityToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
|
1751
|
-
table: table
|
1752
|
-
}), enableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, {
|
1753
|
-
table: table
|
1754
|
-
})));
|
1581
|
+
}, React__default.createElement(material.LinearProgress, Object.assign({
|
1582
|
+
"aria-label": "Loading",
|
1583
|
+
"aria-busy": "true",
|
1584
|
+
sx: {
|
1585
|
+
position: 'relative'
|
1586
|
+
}
|
1587
|
+
}, linearProgressProps)));
|
1755
1588
|
};
|
1756
1589
|
|
1757
1590
|
var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
@@ -1876,42 +1709,211 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
1876
1709
|
}, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React__default.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
|
1877
1710
|
};
|
1878
1711
|
|
1879
|
-
var
|
1880
|
-
|
1881
|
-
|
1882
|
-
|
1883
|
-
|
1712
|
+
var _excluded = ["table"];
|
1713
|
+
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
1714
|
+
var table = _ref.table,
|
1715
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
1716
|
+
|
1717
|
+
var getState = table.getState,
|
1718
|
+
_table$options = table.options,
|
1719
|
+
_table$options$icons = _table$options.icons,
|
1720
|
+
FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
|
1721
|
+
FullscreenIcon = _table$options$icons.FullscreenIcon,
|
1722
|
+
localization = _table$options.localization,
|
1723
|
+
setIsFullScreen = table.setIsFullScreen;
|
1884
1724
|
|
1885
1725
|
var _getState = getState(),
|
1886
|
-
|
1887
|
-
showProgressBars = _getState.showProgressBars;
|
1726
|
+
isFullScreen = _getState.isFullScreen;
|
1888
1727
|
|
1889
|
-
var
|
1890
|
-
|
1728
|
+
var handleToggleFullScreen = function handleToggleFullScreen() {
|
1729
|
+
setIsFullScreen(!isFullScreen);
|
1730
|
+
};
|
1731
|
+
|
1732
|
+
return React__default.createElement(material.Tooltip, {
|
1733
|
+
arrow: true,
|
1734
|
+
title: localization.toggleFullScreen
|
1735
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
1736
|
+
"aria-label": localization.showHideFilters,
|
1737
|
+
onClick: handleToggleFullScreen
|
1738
|
+
}, rest), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
|
1739
|
+
};
|
1740
|
+
|
1741
|
+
var _excluded$1 = ["table"];
|
1742
|
+
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
1743
|
+
var table = _ref.table,
|
1744
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
1745
|
+
|
1746
|
+
var _table$options = table.options,
|
1747
|
+
ViewColumnIcon = _table$options.icons.ViewColumnIcon,
|
1748
|
+
localization = _table$options.localization;
|
1749
|
+
|
1750
|
+
var _useState = React.useState(null),
|
1751
|
+
anchorEl = _useState[0],
|
1752
|
+
setAnchorEl = _useState[1];
|
1753
|
+
|
1754
|
+
var handleClick = function handleClick(event) {
|
1755
|
+
setAnchorEl(event.currentTarget);
|
1756
|
+
};
|
1757
|
+
|
1758
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
1759
|
+
arrow: true,
|
1760
|
+
title: localization.showHideColumns
|
1761
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
1762
|
+
"aria-label": localization.showHideColumns,
|
1763
|
+
onClick: handleClick
|
1764
|
+
}, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
|
1765
|
+
anchorEl: anchorEl,
|
1766
|
+
setAnchorEl: setAnchorEl,
|
1891
1767
|
table: table
|
1892
|
-
})
|
1893
|
-
|
1894
|
-
|
1895
|
-
|
1896
|
-
|
1897
|
-
|
1898
|
-
|
1899
|
-
|
1900
|
-
|
1901
|
-
|
1902
|
-
|
1903
|
-
|
1904
|
-
|
1905
|
-
|
1768
|
+
}));
|
1769
|
+
};
|
1770
|
+
|
1771
|
+
var _excluded$2 = ["table"];
|
1772
|
+
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
1773
|
+
var table = _ref.table,
|
1774
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
1775
|
+
|
1776
|
+
var getState = table.getState,
|
1777
|
+
_table$options = table.options,
|
1778
|
+
_table$options$icons = _table$options.icons,
|
1779
|
+
DensityLargeIcon = _table$options$icons.DensityLargeIcon,
|
1780
|
+
DensityMediumIcon = _table$options$icons.DensityMediumIcon,
|
1781
|
+
DensitySmallIcon = _table$options$icons.DensitySmallIcon,
|
1782
|
+
localization = _table$options.localization,
|
1783
|
+
setDensity = table.setDensity;
|
1784
|
+
|
1785
|
+
var _getState = getState(),
|
1786
|
+
density = _getState.density;
|
1787
|
+
|
1788
|
+
var handleToggleDensePadding = function handleToggleDensePadding() {
|
1789
|
+
var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
|
1790
|
+
setDensity(nextDensity);
|
1791
|
+
};
|
1792
|
+
|
1793
|
+
return React__default.createElement(material.Tooltip, {
|
1794
|
+
arrow: true,
|
1795
|
+
title: localization.toggleDensity
|
1796
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
1797
|
+
"aria-label": localization.toggleDensity,
|
1798
|
+
onClick: handleToggleDensePadding
|
1799
|
+
}, rest), density === 'compact' ? React__default.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React__default.createElement(DensityMediumIcon, null) : React__default.createElement(DensityLargeIcon, null)));
|
1800
|
+
};
|
1801
|
+
|
1802
|
+
var _excluded$3 = ["table"];
|
1803
|
+
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
1804
|
+
var table = _ref.table,
|
1805
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
1806
|
+
|
1807
|
+
var getState = table.getState,
|
1808
|
+
_table$options = table.options,
|
1809
|
+
_table$options$icons = _table$options.icons,
|
1810
|
+
FilterListIcon = _table$options$icons.FilterListIcon,
|
1811
|
+
FilterListOffIcon = _table$options$icons.FilterListOffIcon,
|
1812
|
+
localization = _table$options.localization,
|
1813
|
+
setShowFilters = table.setShowFilters;
|
1814
|
+
|
1815
|
+
var _getState = getState(),
|
1816
|
+
showColumnFilters = _getState.showColumnFilters;
|
1817
|
+
|
1818
|
+
var handleToggleShowFilters = function handleToggleShowFilters() {
|
1819
|
+
setShowFilters(!showColumnFilters);
|
1820
|
+
};
|
1821
|
+
|
1822
|
+
return React__default.createElement(material.Tooltip, {
|
1823
|
+
arrow: true,
|
1824
|
+
title: localization.showHideFilters
|
1825
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
1826
|
+
"aria-label": localization.showHideFilters,
|
1827
|
+
onClick: handleToggleShowFilters
|
1828
|
+
}, rest), showColumnFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
|
1829
|
+
};
|
1830
|
+
|
1831
|
+
var _excluded$4 = ["table"];
|
1832
|
+
var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
1833
|
+
var table = _ref.table,
|
1834
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
1835
|
+
|
1836
|
+
var getState = table.getState,
|
1837
|
+
_table$options = table.options,
|
1838
|
+
_table$options$icons = _table$options.icons,
|
1839
|
+
SearchIcon = _table$options$icons.SearchIcon,
|
1840
|
+
SearchOffIcon = _table$options$icons.SearchOffIcon,
|
1841
|
+
tableId = _table$options.tableId,
|
1842
|
+
localization = _table$options.localization,
|
1843
|
+
muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
|
1844
|
+
setShowGlobalFilter = table.setShowGlobalFilter;
|
1845
|
+
|
1846
|
+
var _getState = getState(),
|
1847
|
+
showGlobalFilter = _getState.showGlobalFilter;
|
1848
|
+
|
1849
|
+
var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
|
1850
|
+
table: table
|
1851
|
+
}) : muiSearchTextFieldProps;
|
1852
|
+
|
1853
|
+
var handleToggleSearch = function handleToggleSearch() {
|
1854
|
+
setShowGlobalFilter(!showGlobalFilter);
|
1855
|
+
setTimeout(function () {
|
1856
|
+
var _document$getElementB, _textFieldProps$id;
|
1857
|
+
|
1858
|
+
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();
|
1859
|
+
}, 200);
|
1860
|
+
};
|
1861
|
+
|
1862
|
+
return React__default.createElement(material.Tooltip, {
|
1863
|
+
arrow: true,
|
1864
|
+
title: localization.showHideSearch
|
1865
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
1866
|
+
onClick: handleToggleSearch
|
1867
|
+
}, rest), showGlobalFilter ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
|
1868
|
+
};
|
1869
|
+
|
1870
|
+
var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
|
1871
|
+
var _renderToolbarInterna;
|
1872
|
+
|
1873
|
+
var table = _ref.table;
|
1874
|
+
var _table$options = table.options,
|
1875
|
+
enableColumnFilters = _table$options.enableColumnFilters,
|
1876
|
+
enableColumnOrdering = _table$options.enableColumnOrdering,
|
1877
|
+
enableDensityToggle = _table$options.enableDensityToggle,
|
1878
|
+
enableFilters = _table$options.enableFilters,
|
1879
|
+
enableFullScreenToggle = _table$options.enableFullScreenToggle,
|
1880
|
+
enableGlobalFilter = _table$options.enableGlobalFilter,
|
1881
|
+
enableHiding = _table$options.enableHiding,
|
1882
|
+
enablePinning = _table$options.enablePinning,
|
1883
|
+
positionGlobalFilter = _table$options.positionGlobalFilter,
|
1884
|
+
renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
|
1885
|
+
return React__default.createElement(material.Box, {
|
1906
1886
|
sx: {
|
1907
|
-
|
1887
|
+
alignItems: 'center',
|
1888
|
+
display: 'flex',
|
1889
|
+
zIndex: 3
|
1908
1890
|
}
|
1909
|
-
},
|
1891
|
+
}, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
|
1892
|
+
MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
|
1893
|
+
MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
|
1894
|
+
MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
|
1895
|
+
MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
|
1896
|
+
MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
|
1897
|
+
table: table
|
1898
|
+
})) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_GlobalFilterTextField, {
|
1899
|
+
table: table
|
1900
|
+
}), enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
|
1901
|
+
table: table
|
1902
|
+
}), enableFilters && enableColumnFilters && React__default.createElement(MRT_ToggleFiltersButton, {
|
1903
|
+
table: table
|
1904
|
+
}), (enableHiding || enableColumnOrdering || enablePinning) && React__default.createElement(MRT_ShowHideColumnsButton, {
|
1905
|
+
table: table
|
1906
|
+
}), enableDensityToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
|
1907
|
+
table: table
|
1908
|
+
}), enableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, {
|
1909
|
+
table: table
|
1910
|
+
})));
|
1910
1911
|
};
|
1911
1912
|
|
1912
1913
|
var commonToolbarStyles = function commonToolbarStyles(_ref) {
|
1913
1914
|
var theme = _ref.theme;
|
1914
1915
|
return {
|
1916
|
+
alignItems: 'flex-start',
|
1915
1917
|
backgroundColor: material.lighten(theme.palette.background["default"], 0.04),
|
1916
1918
|
backgroundImage: 'none',
|
1917
1919
|
display: 'grid',
|
@@ -1946,7 +1948,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
1946
1948
|
var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
|
1947
1949
|
table: table
|
1948
1950
|
}) : muiTableToolbarTopProps;
|
1949
|
-
var stackAlertBanner = isMobile ||
|
1951
|
+
var stackAlertBanner = isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
|
1950
1952
|
return React__default.createElement(material.Toolbar, Object.assign({
|
1951
1953
|
id: "mrt-" + tableId + "-toolbar-top",
|
1952
1954
|
variant: "dense"
|
@@ -2009,7 +2011,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
2009
2011
|
var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
|
2010
2012
|
table: table
|
2011
2013
|
}) : muiTableToolbarBottomProps;
|
2012
|
-
var stackAlertBanner = isMobile ||
|
2014
|
+
var stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
|
2013
2015
|
return React__default.createElement(material.Toolbar, Object.assign({
|
2014
2016
|
id: "mrt-" + tableId + "-toolbar-bottom",
|
2015
2017
|
variant: "dense"
|
@@ -2119,7 +2121,7 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
|
|
2119
2121
|
};
|
2120
2122
|
|
2121
2123
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
2122
|
-
var _currentFilterOption$, _localization$filterB, _columnDef$
|
2124
|
+
var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
|
2123
2125
|
|
2124
2126
|
var header = _ref.header,
|
2125
2127
|
inputIndex = _ref.inputIndex,
|
@@ -2127,7 +2129,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2127
2129
|
var getState = table.getState,
|
2128
2130
|
_table$options = table.options,
|
2129
2131
|
enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
|
2130
|
-
|
2132
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
2131
2133
|
_table$options$icons = _table$options.icons,
|
2132
2134
|
FilterListIcon = _table$options$icons.FilterListIcon,
|
2133
2135
|
CloseIcon = _table$options$icons.CloseIcon,
|
@@ -2224,7 +2226,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2224
2226
|
var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
|
2225
2227
|
localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
|
2226
2228
|
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 : '';
|
2227
|
-
var allowedColumnFilterOptions = (_columnDef$
|
2229
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
2228
2230
|
var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
|
2229
2231
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
|
2230
2232
|
fullWidth: true,
|
@@ -2296,7 +2298,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2296
2298
|
}, textFieldProps, {
|
2297
2299
|
sx: function sx(theme) {
|
2298
2300
|
return _extends({
|
2299
|
-
m: '-0.25rem',
|
2300
2301
|
p: 0,
|
2301
2302
|
minWidth: !filterChipLabel ? '8rem' : 'auto',
|
2302
2303
|
width: 'calc(100% + 0.5rem)',
|
@@ -2629,7 +2630,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2629
2630
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
2630
2631
|
overflow: 'visible',
|
2631
2632
|
opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
|
2632
|
-
p: density === 'compact' ?
|
2633
|
+
p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
2633
2634
|
pb: columnDefType === 'display' ? 0 : undefined,
|
2634
2635
|
position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
|
2635
2636
|
pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
|
@@ -2930,6 +2931,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2930
2931
|
enableClickToCopy = _table$options.enableClickToCopy,
|
2931
2932
|
enableColumnOrdering = _table$options.enableColumnOrdering,
|
2932
2933
|
enableEditing = _table$options.enableEditing,
|
2934
|
+
enablePagination = _table$options.enablePagination,
|
2933
2935
|
enableRowNumbers = _table$options.enableRowNumbers,
|
2934
2936
|
muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
|
2935
2937
|
muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
|
@@ -3004,7 +3006,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
3004
3006
|
var draggingBorders = draggingBorder ? {
|
3005
3007
|
borderLeft: draggingBorder,
|
3006
3008
|
borderRight: draggingBorder,
|
3007
|
-
borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
|
3009
|
+
borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
|
3008
3010
|
} : undefined;
|
3009
3011
|
return React__default.createElement(material.TableCell, Object.assign({
|
3010
3012
|
onDoubleClick: handleDoubleClick,
|
@@ -3732,7 +3734,7 @@ var MaterialReactTable = (function (_ref) {
|
|
3732
3734
|
_ref$enableColumnActi = _ref.enableColumnActions,
|
3733
3735
|
enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
|
3734
3736
|
_ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
|
3735
|
-
enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ?
|
3737
|
+
enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
|
3736
3738
|
_ref$enableColumnFilt2 = _ref.enableColumnFilters,
|
3737
3739
|
enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
|
3738
3740
|
_ref$enableColumnOrde = _ref.enableColumnOrdering,
|
@@ -3750,7 +3752,7 @@ var MaterialReactTable = (function (_ref) {
|
|
3750
3752
|
_ref$enableGlobalFilt = _ref.enableGlobalFilter,
|
3751
3753
|
enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
|
3752
3754
|
_ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
|
3753
|
-
enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ?
|
3755
|
+
enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
|
3754
3756
|
_ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
|
3755
3757
|
enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
|
3756
3758
|
_ref$enableGrouping = _ref.enableGrouping,
|