material-react-table 0.26.0 → 0.26.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -2
- package/dist/material-react-table.cjs.development.js +100 -80
- 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 +100 -80
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/body/MRT_TableBodyCell.tsx +3 -1
- package/src/body/MRT_TableBodyRow.tsx +3 -1
- package/src/body/MRT_TableDetailPanel.tsx +5 -3
- package/src/buttons/MRT_CopyButton.tsx +5 -3
- package/src/buttons/MRT_ExpandButton.tsx +5 -3
- package/src/footer/MRT_TableFooterCell.tsx +3 -1
- package/src/head/MRT_TableHeadCell.tsx +3 -1
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +5 -3
- package/src/inputs/MRT_FilterTextField.tsx +9 -4
- package/src/inputs/MRT_SelectCheckbox.tsx +5 -3
- package/src/menus/MRT_FilterOptionMenu.tsx +1 -1
- package/src/table/MRT_Table.tsx +5 -3
- package/src/table/MRT_TableContainer.tsx +5 -3
- package/src/toolbar/MRT_TablePagination.tsx +5 -3
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +5 -3
- package/src/toolbar/MRT_ToolbarBottom.tsx +3 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +3 -1
package/README.md
CHANGED
@@ -55,8 +55,8 @@ _All features can easily be enabled/disabled_
|
|
55
55
|
- [x] < 35kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
|
56
56
|
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
|
57
57
|
- [x] Click To Copy Cell Values
|
58
|
-
- [x] Column
|
59
|
-
- [x] Column Grouping (Group By and Aggregates)
|
58
|
+
- [x] Column Action Dropdown Menu
|
59
|
+
- [x] Column/Row Grouping (Group By and Aggregates)
|
60
60
|
- [x] Column Hiding
|
61
61
|
- [x] Column Ordering via Drag'n'Drop
|
62
62
|
- [x] Column Pinning (Freeze Columns)
|
@@ -224,10 +224,12 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
224
224
|
disabled: !row.getCanExpand() && !renderDetailPanel,
|
225
225
|
onClick: handleToggleExpand
|
226
226
|
}, iconButtonProps, {
|
227
|
-
sx:
|
228
|
-
|
229
|
-
|
230
|
-
|
227
|
+
sx: function sx(theme) {
|
228
|
+
return _extends({
|
229
|
+
height: density === 'compact' ? '1.75rem' : '2.25rem',
|
230
|
+
width: density === 'compact' ? '1.75rem' : '2.25rem'
|
231
|
+
}, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
|
232
|
+
}
|
231
233
|
}), React__default.createElement(ExpandMoreIcon, {
|
232
234
|
style: {
|
233
235
|
transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
|
@@ -272,7 +274,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
272
274
|
divider: false
|
273
275
|
}, {
|
274
276
|
option: 'contains',
|
275
|
-
symbol: '
|
277
|
+
symbol: '*',
|
276
278
|
label: localization.filterContains,
|
277
279
|
divider: false
|
278
280
|
}, {
|
@@ -1448,11 +1450,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1448
1450
|
onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
|
1449
1451
|
size: density === 'compact' ? 'small' : 'medium'
|
1450
1452
|
}, checkboxProps, {
|
1451
|
-
sx:
|
1452
|
-
|
1453
|
-
|
1454
|
-
|
1455
|
-
|
1453
|
+
sx: function sx(theme) {
|
1454
|
+
return _extends({
|
1455
|
+
height: density === 'compact' ? '1.5rem' : '2rem',
|
1456
|
+
width: density === 'compact' ? '1.5rem' : '2rem',
|
1457
|
+
m: '-1re.m'
|
1458
|
+
}, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
|
1459
|
+
}
|
1456
1460
|
})));
|
1457
1461
|
};
|
1458
1462
|
|
@@ -1803,12 +1807,14 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
|
1803
1807
|
showFirstButton: showFirstLastPageButtons,
|
1804
1808
|
showLastButton: showFirstLastPageButtons
|
1805
1809
|
}, tablePaginationProps, {
|
1806
|
-
sx:
|
1807
|
-
|
1808
|
-
|
1809
|
-
|
1810
|
-
|
1811
|
-
|
1810
|
+
sx: function sx(theme) {
|
1811
|
+
return _extends({
|
1812
|
+
m: '0 0.5rem',
|
1813
|
+
mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
|
1814
|
+
position: 'relative',
|
1815
|
+
zIndex: 2
|
1816
|
+
}, (tablePaginationProps == null ? void 0 : tablePaginationProps.sx) instanceof Function ? tablePaginationProps.sx(theme) : tablePaginationProps == null ? void 0 : tablePaginationProps.sx);
|
1817
|
+
}
|
1812
1818
|
}));
|
1813
1819
|
};
|
1814
1820
|
|
@@ -1850,17 +1856,19 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
1850
1856
|
color: "info",
|
1851
1857
|
icon: false
|
1852
1858
|
}, alertProps, {
|
1853
|
-
sx:
|
1854
|
-
|
1855
|
-
|
1856
|
-
|
1857
|
-
|
1858
|
-
|
1859
|
-
|
1860
|
-
|
1861
|
-
|
1862
|
-
|
1863
|
-
|
1859
|
+
sx: function sx(theme) {
|
1860
|
+
return _extends({
|
1861
|
+
borderRadius: 0,
|
1862
|
+
fontSize: '1rem',
|
1863
|
+
left: 0,
|
1864
|
+
p: 0,
|
1865
|
+
position: 'relative',
|
1866
|
+
right: 0,
|
1867
|
+
top: 0,
|
1868
|
+
width: '100%',
|
1869
|
+
zIndex: 2
|
1870
|
+
}, (alertProps == null ? void 0 : alertProps.sx) instanceof Function ? alertProps.sx(theme) : alertProps == null ? void 0 : alertProps.sx);
|
1871
|
+
}
|
1864
1872
|
}), (alertProps == null ? void 0 : alertProps.title) && React__default.createElement(material.AlertTitle, null, alertProps.title), React__default.createElement(material.Box, {
|
1865
1873
|
sx: {
|
1866
1874
|
p: '0.5rem 1rem'
|
@@ -1949,7 +1957,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
1949
1957
|
top: isFullScreen ? '0' : undefined
|
1950
1958
|
}, commonToolbarStyles({
|
1951
1959
|
theme: theme
|
1952
|
-
}), toolbarProps == null ? void 0 : toolbarProps.sx);
|
1960
|
+
}), (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
|
1953
1961
|
}
|
1954
1962
|
}), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, {
|
1955
1963
|
stackAlertBanner: stackAlertBanner,
|
@@ -2015,7 +2023,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
2015
2023
|
left: 0,
|
2016
2024
|
position: isFullScreen ? 'fixed' : 'relative',
|
2017
2025
|
right: 0
|
2018
|
-
}, toolbarProps == null ? void 0 : toolbarProps.sx);
|
2026
|
+
}, (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
|
2019
2027
|
}
|
2020
2028
|
}), React__default.createElement(MRT_LinearProgressBar, {
|
2021
2029
|
isTopToolbar: false,
|
@@ -2090,16 +2098,18 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
|
|
2090
2098
|
onClick: handleClick,
|
2091
2099
|
size: "small"
|
2092
2100
|
}, iconButtonProps, {
|
2093
|
-
sx:
|
2094
|
-
|
2095
|
-
|
2096
|
-
|
2097
|
-
|
2098
|
-
|
2099
|
-
|
2100
|
-
|
2101
|
-
|
2102
|
-
|
2101
|
+
sx: function sx(theme) {
|
2102
|
+
return _extends({
|
2103
|
+
height: '2rem',
|
2104
|
+
mt: '-0.2rem',
|
2105
|
+
opacity: 0.5,
|
2106
|
+
transition: 'opacity 0.2s',
|
2107
|
+
width: '2rem',
|
2108
|
+
'&:hover': {
|
2109
|
+
opacity: 1
|
2110
|
+
}
|
2111
|
+
}, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
|
2112
|
+
}
|
2103
2113
|
}), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
2104
2114
|
anchorEl: anchorEl,
|
2105
2115
|
header: header,
|
@@ -2284,15 +2294,17 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2284
2294
|
}, React__default.createElement(CloseIcon, null)))))
|
2285
2295
|
}
|
2286
2296
|
}, textFieldProps, {
|
2287
|
-
sx:
|
2288
|
-
|
2289
|
-
|
2290
|
-
|
2291
|
-
|
2292
|
-
|
2293
|
-
|
2294
|
-
|
2295
|
-
|
2297
|
+
sx: function sx(theme) {
|
2298
|
+
return _extends({
|
2299
|
+
m: '-0.25rem',
|
2300
|
+
p: 0,
|
2301
|
+
minWidth: !filterChipLabel ? '8rem' : 'auto',
|
2302
|
+
width: 'calc(100% + 0.5rem)',
|
2303
|
+
'& .MuiSelect-icon': {
|
2304
|
+
mr: '1.5rem'
|
2305
|
+
}
|
2306
|
+
}, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
|
2307
|
+
}
|
2296
2308
|
}), isSelectFilter && React__default.createElement(material.MenuItem, {
|
2297
2309
|
divider: true,
|
2298
2310
|
disabled: !filterValue,
|
@@ -2626,7 +2638,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2626
2638
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
2627
2639
|
verticalAlign: 'top',
|
2628
2640
|
zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
2629
|
-
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2641
|
+
}, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2630
2642
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
2631
2643
|
minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
|
2632
2644
|
width: header.getSize()
|
@@ -2848,19 +2860,21 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
|
|
2848
2860
|
type: "button",
|
2849
2861
|
variant: "text"
|
2850
2862
|
}, buttonProps, {
|
2851
|
-
sx:
|
2852
|
-
|
2853
|
-
|
2854
|
-
|
2855
|
-
|
2856
|
-
|
2857
|
-
|
2858
|
-
|
2859
|
-
|
2860
|
-
|
2861
|
-
|
2862
|
-
|
2863
|
-
|
2863
|
+
sx: function sx(theme) {
|
2864
|
+
return _extends({
|
2865
|
+
backgroundColor: 'transparent',
|
2866
|
+
border: 'none',
|
2867
|
+
color: 'inherit',
|
2868
|
+
cursor: 'copy',
|
2869
|
+
fontFamily: 'inherit',
|
2870
|
+
fontSize: 'inherit',
|
2871
|
+
letterSpacing: 'inherit',
|
2872
|
+
m: '-0.25rem',
|
2873
|
+
minWidth: 'unset',
|
2874
|
+
textAlign: 'inherit',
|
2875
|
+
textTransform: 'inherit'
|
2876
|
+
}, (buttonProps == null ? void 0 : buttonProps.sx) instanceof Function ? buttonProps.sx(theme) : buttonProps == null ? void 0 : buttonProps.sx);
|
2877
|
+
}
|
2864
2878
|
}), children));
|
2865
2879
|
};
|
2866
2880
|
|
@@ -3015,7 +3029,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
3015
3029
|
'&:hover': {
|
3016
3030
|
backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
|
3017
3031
|
}
|
3018
|
-
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
3032
|
+
}, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
3019
3033
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
3020
3034
|
minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
|
3021
3035
|
width: column.getSize()
|
@@ -3066,13 +3080,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
|
|
3066
3080
|
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
|
3067
3081
|
colSpan: getVisibleLeafColumns().length
|
3068
3082
|
}, tableCellProps, {
|
3069
|
-
sx:
|
3070
|
-
|
3071
|
-
|
3072
|
-
|
3073
|
-
|
3074
|
-
|
3075
|
-
|
3083
|
+
sx: function sx(theme) {
|
3084
|
+
return _extends({
|
3085
|
+
borderBottom: !row.getIsExpanded() ? 'none' : undefined,
|
3086
|
+
pb: row.getIsExpanded() ? '1rem' : 0,
|
3087
|
+
pt: row.getIsExpanded() ? '1rem' : 0,
|
3088
|
+
transition: 'all 0.2s ease-in-out',
|
3089
|
+
width: table.getTotalSize() + "px"
|
3090
|
+
}, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
|
3091
|
+
}
|
3076
3092
|
}), renderDetailPanel && React__default.createElement(material.Collapse, {
|
3077
3093
|
"in": row.getIsExpanded()
|
3078
3094
|
}, renderDetailPanel({
|
@@ -3130,7 +3146,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
3130
3146
|
'&:hover td': {
|
3131
3147
|
backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
|
3132
3148
|
}
|
3133
|
-
}, tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
|
3149
|
+
}, (tableRowProps == null ? void 0 : tableRowProps.sx) instanceof Function ? tableRowProps.sx(theme) : tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
|
3134
3150
|
}
|
3135
3151
|
}), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
|
3136
3152
|
return React__default.createElement(MRT_TableBodyCell, {
|
@@ -3266,7 +3282,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
|
|
3266
3282
|
transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
|
3267
3283
|
width: column.getSize(),
|
3268
3284
|
verticalAlign: 'text-top'
|
3269
|
-
}, tableCellProps == null ? void 0 : tableCellProps.sx);
|
3285
|
+
}, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
|
3270
3286
|
}
|
3271
3287
|
}), React__default.createElement(React__default.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
|
3272
3288
|
footer: footer,
|
@@ -3334,9 +3350,11 @@ var MRT_Table = function MRT_Table(_ref) {
|
|
3334
3350
|
return React__default.createElement(material.Table, Object.assign({
|
3335
3351
|
stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
|
3336
3352
|
}, tableProps, {
|
3337
|
-
sx:
|
3338
|
-
|
3339
|
-
|
3353
|
+
sx: function sx(theme) {
|
3354
|
+
return _extends({
|
3355
|
+
tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
|
3356
|
+
}, (tableProps == null ? void 0 : tableProps.sx) instanceof Function ? tableProps.sx(theme) : tableProps == null ? void 0 : tableProps.sx);
|
3357
|
+
}
|
3340
3358
|
}), enableTableHead && React__default.createElement(MRT_TableHead, {
|
3341
3359
|
table: table
|
3342
3360
|
}), React__default.createElement(MRT_TableBody, {
|
@@ -3378,11 +3396,13 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
|
|
3378
3396
|
return React__default.createElement(material.TableContainer, Object.assign({
|
3379
3397
|
ref: tableContainerRef
|
3380
3398
|
}, tableContainerProps, {
|
3381
|
-
sx:
|
3382
|
-
|
3383
|
-
|
3384
|
-
|
3385
|
-
|
3399
|
+
sx: function sx(theme) {
|
3400
|
+
return _extends({
|
3401
|
+
maxWidth: '100%',
|
3402
|
+
maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
|
3403
|
+
overflow: 'auto'
|
3404
|
+
}, (tableContainerProps == null ? void 0 : tableContainerProps.sx) instanceof Function ? tableContainerProps.sx(theme) : tableContainerProps == null ? void 0 : tableContainerProps.sx);
|
3405
|
+
},
|
3386
3406
|
style: _extends({
|
3387
3407
|
maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
|
3388
3408
|
}, tableContainerProps == null ? void 0 : tableContainerProps.style)
|