material-react-table 0.26.4 → 0.26.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/material-react-table.cjs.development.js +222 -221
- 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 +223 -222
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/toolbar/MRT_ToolbarTop.d.ts +1 -0
- package/package.json +1 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +5 -4
@@ -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
|
|
@@ -1453,164 +1453,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1453
1453
|
})));
|
1454
1454
|
};
|
1455
1455
|
|
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
1456
|
var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
1615
1457
|
var _localization$clearSe;
|
1616
1458
|
|
@@ -1704,47 +1546,37 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
|
1704
1546
|
}));
|
1705
1547
|
};
|
1706
1548
|
|
1707
|
-
var
|
1708
|
-
var
|
1549
|
+
var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
|
1550
|
+
var isTopToolbar = _ref.isTopToolbar,
|
1551
|
+
table = _ref.table;
|
1552
|
+
var muiLinearProgressProps = table.options.muiLinearProgressProps,
|
1553
|
+
getState = table.getState;
|
1709
1554
|
|
1710
|
-
var
|
1711
|
-
|
1712
|
-
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
1722
|
-
return React.createElement(Box, {
|
1555
|
+
var _getState = getState(),
|
1556
|
+
isLoading = _getState.isLoading,
|
1557
|
+
showProgressBars = _getState.showProgressBars;
|
1558
|
+
|
1559
|
+
var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
|
1560
|
+
isTopToolbar: isTopToolbar,
|
1561
|
+
table: table
|
1562
|
+
}) : muiLinearProgressProps;
|
1563
|
+
return React.createElement(Collapse, {
|
1564
|
+
"in": isLoading || showProgressBars,
|
1565
|
+
mountOnEnter: true,
|
1566
|
+
unmountOnExit: true,
|
1723
1567
|
sx: {
|
1724
|
-
|
1725
|
-
|
1726
|
-
|
1568
|
+
bottom: isTopToolbar ? 0 : undefined,
|
1569
|
+
position: 'absolute',
|
1570
|
+
top: !isTopToolbar ? 0 : undefined,
|
1571
|
+
width: '100%'
|
1727
1572
|
}
|
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
|
-
})));
|
1573
|
+
}, React.createElement(LinearProgress, Object.assign({
|
1574
|
+
"aria-label": "Loading",
|
1575
|
+
"aria-busy": "true",
|
1576
|
+
sx: {
|
1577
|
+
position: 'relative'
|
1578
|
+
}
|
1579
|
+
}, linearProgressProps)));
|
1748
1580
|
};
|
1749
1581
|
|
1750
1582
|
var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
@@ -1869,42 +1701,211 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
1869
1701
|
}, 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
1702
|
};
|
1871
1703
|
|
1872
|
-
var
|
1873
|
-
|
1874
|
-
|
1875
|
-
|
1876
|
-
|
1704
|
+
var _excluded = ["table"];
|
1705
|
+
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
1706
|
+
var table = _ref.table,
|
1707
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
1708
|
+
|
1709
|
+
var getState = table.getState,
|
1710
|
+
_table$options = table.options,
|
1711
|
+
_table$options$icons = _table$options.icons,
|
1712
|
+
FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
|
1713
|
+
FullscreenIcon = _table$options$icons.FullscreenIcon,
|
1714
|
+
localization = _table$options.localization,
|
1715
|
+
setIsFullScreen = table.setIsFullScreen;
|
1877
1716
|
|
1878
1717
|
var _getState = getState(),
|
1879
|
-
|
1880
|
-
showProgressBars = _getState.showProgressBars;
|
1718
|
+
isFullScreen = _getState.isFullScreen;
|
1881
1719
|
|
1882
|
-
var
|
1883
|
-
|
1720
|
+
var handleToggleFullScreen = function handleToggleFullScreen() {
|
1721
|
+
setIsFullScreen(!isFullScreen);
|
1722
|
+
};
|
1723
|
+
|
1724
|
+
return React.createElement(Tooltip, {
|
1725
|
+
arrow: true,
|
1726
|
+
title: localization.toggleFullScreen
|
1727
|
+
}, React.createElement(IconButton, Object.assign({
|
1728
|
+
"aria-label": localization.showHideFilters,
|
1729
|
+
onClick: handleToggleFullScreen
|
1730
|
+
}, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
|
1731
|
+
};
|
1732
|
+
|
1733
|
+
var _excluded$1 = ["table"];
|
1734
|
+
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
1735
|
+
var table = _ref.table,
|
1736
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
1737
|
+
|
1738
|
+
var _table$options = table.options,
|
1739
|
+
ViewColumnIcon = _table$options.icons.ViewColumnIcon,
|
1740
|
+
localization = _table$options.localization;
|
1741
|
+
|
1742
|
+
var _useState = useState(null),
|
1743
|
+
anchorEl = _useState[0],
|
1744
|
+
setAnchorEl = _useState[1];
|
1745
|
+
|
1746
|
+
var handleClick = function handleClick(event) {
|
1747
|
+
setAnchorEl(event.currentTarget);
|
1748
|
+
};
|
1749
|
+
|
1750
|
+
return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
|
1751
|
+
arrow: true,
|
1752
|
+
title: localization.showHideColumns
|
1753
|
+
}, React.createElement(IconButton, Object.assign({
|
1754
|
+
"aria-label": localization.showHideColumns,
|
1755
|
+
onClick: handleClick
|
1756
|
+
}, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
|
1757
|
+
anchorEl: anchorEl,
|
1758
|
+
setAnchorEl: setAnchorEl,
|
1884
1759
|
table: table
|
1885
|
-
})
|
1886
|
-
|
1887
|
-
|
1888
|
-
|
1889
|
-
|
1890
|
-
|
1891
|
-
|
1892
|
-
|
1893
|
-
|
1894
|
-
|
1895
|
-
|
1896
|
-
|
1897
|
-
|
1898
|
-
|
1760
|
+
}));
|
1761
|
+
};
|
1762
|
+
|
1763
|
+
var _excluded$2 = ["table"];
|
1764
|
+
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
1765
|
+
var table = _ref.table,
|
1766
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
1767
|
+
|
1768
|
+
var getState = table.getState,
|
1769
|
+
_table$options = table.options,
|
1770
|
+
_table$options$icons = _table$options.icons,
|
1771
|
+
DensityLargeIcon = _table$options$icons.DensityLargeIcon,
|
1772
|
+
DensityMediumIcon = _table$options$icons.DensityMediumIcon,
|
1773
|
+
DensitySmallIcon = _table$options$icons.DensitySmallIcon,
|
1774
|
+
localization = _table$options.localization,
|
1775
|
+
setDensity = table.setDensity;
|
1776
|
+
|
1777
|
+
var _getState = getState(),
|
1778
|
+
density = _getState.density;
|
1779
|
+
|
1780
|
+
var handleToggleDensePadding = function handleToggleDensePadding() {
|
1781
|
+
var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
|
1782
|
+
setDensity(nextDensity);
|
1783
|
+
};
|
1784
|
+
|
1785
|
+
return React.createElement(Tooltip, {
|
1786
|
+
arrow: true,
|
1787
|
+
title: localization.toggleDensity
|
1788
|
+
}, React.createElement(IconButton, Object.assign({
|
1789
|
+
"aria-label": localization.toggleDensity,
|
1790
|
+
onClick: handleToggleDensePadding
|
1791
|
+
}, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
|
1792
|
+
};
|
1793
|
+
|
1794
|
+
var _excluded$3 = ["table"];
|
1795
|
+
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
1796
|
+
var table = _ref.table,
|
1797
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
1798
|
+
|
1799
|
+
var getState = table.getState,
|
1800
|
+
_table$options = table.options,
|
1801
|
+
_table$options$icons = _table$options.icons,
|
1802
|
+
FilterListIcon = _table$options$icons.FilterListIcon,
|
1803
|
+
FilterListOffIcon = _table$options$icons.FilterListOffIcon,
|
1804
|
+
localization = _table$options.localization,
|
1805
|
+
setShowFilters = table.setShowFilters;
|
1806
|
+
|
1807
|
+
var _getState = getState(),
|
1808
|
+
showColumnFilters = _getState.showColumnFilters;
|
1809
|
+
|
1810
|
+
var handleToggleShowFilters = function handleToggleShowFilters() {
|
1811
|
+
setShowFilters(!showColumnFilters);
|
1812
|
+
};
|
1813
|
+
|
1814
|
+
return React.createElement(Tooltip, {
|
1815
|
+
arrow: true,
|
1816
|
+
title: localization.showHideFilters
|
1817
|
+
}, React.createElement(IconButton, Object.assign({
|
1818
|
+
"aria-label": localization.showHideFilters,
|
1819
|
+
onClick: handleToggleShowFilters
|
1820
|
+
}, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
|
1821
|
+
};
|
1822
|
+
|
1823
|
+
var _excluded$4 = ["table"];
|
1824
|
+
var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
1825
|
+
var table = _ref.table,
|
1826
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
1827
|
+
|
1828
|
+
var getState = table.getState,
|
1829
|
+
_table$options = table.options,
|
1830
|
+
_table$options$icons = _table$options.icons,
|
1831
|
+
SearchIcon = _table$options$icons.SearchIcon,
|
1832
|
+
SearchOffIcon = _table$options$icons.SearchOffIcon,
|
1833
|
+
tableId = _table$options.tableId,
|
1834
|
+
localization = _table$options.localization,
|
1835
|
+
muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
|
1836
|
+
setShowGlobalFilter = table.setShowGlobalFilter;
|
1837
|
+
|
1838
|
+
var _getState = getState(),
|
1839
|
+
showGlobalFilter = _getState.showGlobalFilter;
|
1840
|
+
|
1841
|
+
var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
|
1842
|
+
table: table
|
1843
|
+
}) : muiSearchTextFieldProps;
|
1844
|
+
|
1845
|
+
var handleToggleSearch = function handleToggleSearch() {
|
1846
|
+
setShowGlobalFilter(!showGlobalFilter);
|
1847
|
+
setTimeout(function () {
|
1848
|
+
var _document$getElementB, _textFieldProps$id;
|
1849
|
+
|
1850
|
+
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();
|
1851
|
+
}, 200);
|
1852
|
+
};
|
1853
|
+
|
1854
|
+
return React.createElement(Tooltip, {
|
1855
|
+
arrow: true,
|
1856
|
+
title: localization.showHideSearch
|
1857
|
+
}, React.createElement(IconButton, Object.assign({
|
1858
|
+
onClick: handleToggleSearch
|
1859
|
+
}, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
|
1860
|
+
};
|
1861
|
+
|
1862
|
+
var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
|
1863
|
+
var _renderToolbarInterna;
|
1864
|
+
|
1865
|
+
var table = _ref.table;
|
1866
|
+
var _table$options = table.options,
|
1867
|
+
enableColumnFilters = _table$options.enableColumnFilters,
|
1868
|
+
enableColumnOrdering = _table$options.enableColumnOrdering,
|
1869
|
+
enableDensityToggle = _table$options.enableDensityToggle,
|
1870
|
+
enableFilters = _table$options.enableFilters,
|
1871
|
+
enableFullScreenToggle = _table$options.enableFullScreenToggle,
|
1872
|
+
enableGlobalFilter = _table$options.enableGlobalFilter,
|
1873
|
+
enableHiding = _table$options.enableHiding,
|
1874
|
+
enablePinning = _table$options.enablePinning,
|
1875
|
+
positionGlobalFilter = _table$options.positionGlobalFilter,
|
1876
|
+
renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
|
1877
|
+
return React.createElement(Box, {
|
1899
1878
|
sx: {
|
1900
|
-
|
1879
|
+
alignItems: 'center',
|
1880
|
+
display: 'flex',
|
1881
|
+
zIndex: 3
|
1901
1882
|
}
|
1902
|
-
},
|
1883
|
+
}, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
|
1884
|
+
MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
|
1885
|
+
MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
|
1886
|
+
MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
|
1887
|
+
MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
|
1888
|
+
MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
|
1889
|
+
table: table
|
1890
|
+
})) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
|
1891
|
+
table: table
|
1892
|
+
}), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
|
1893
|
+
table: table
|
1894
|
+
}), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
|
1895
|
+
table: table
|
1896
|
+
}), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
|
1897
|
+
table: table
|
1898
|
+
}), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
|
1899
|
+
table: table
|
1900
|
+
}), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
|
1901
|
+
table: table
|
1902
|
+
})));
|
1903
1903
|
};
|
1904
1904
|
|
1905
1905
|
var commonToolbarStyles = function commonToolbarStyles(_ref) {
|
1906
1906
|
var theme = _ref.theme;
|
1907
1907
|
return {
|
1908
|
+
alignItems: 'flex-start',
|
1908
1909
|
backgroundColor: lighten(theme.palette.background["default"], 0.04),
|
1909
1910
|
backgroundImage: 'none',
|
1910
1911
|
display: 'grid',
|