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
@@ -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,
|