material-react-table 0.13.3 → 0.14.2
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 +20 -3
- package/dist/MaterialReactTable.d.ts +5 -3
- package/dist/{buttons/MRT_ToggleColumnActionMenuButton.d.ts → head/MRT_TableHeadCellColumnActionsButton.d.ts} +1 -1
- package/dist/material-react-table.cjs.development.js +61 -46
- 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 +61 -46
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/toolbar/MRT_TablePagination.d.ts +1 -0
- package/dist/toolbar/MRT_ToolbarTop.d.ts +0 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +6 -4
- package/src/body/MRT_TableBodyCell.tsx +5 -1
- package/src/head/MRT_TableHeadCell.tsx +3 -2
- package/src/{buttons/MRT_ToggleColumnActionMenuButton.tsx → head/MRT_TableHeadCellColumnActionsButton.tsx} +1 -2
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +1 -0
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +1 -0
- package/src/head/MRT_TableHeadCellSortLabel.tsx +4 -0
- package/src/inputs/MRT_SearchTextField.tsx +8 -11
- package/src/toolbar/MRT_TablePagination.tsx +10 -2
- package/src/toolbar/MRT_ToolbarBottom.tsx +21 -18
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +1 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +18 -15
package/README.md
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
# Material React Table
|
|
2
2
|
|
|
3
|
+
<a href="https://npmjs.com/package/material-react-table" target="_blank_">
|
|
4
|
+
<img alt="" src="https://badgen.net/npm/v/material-react-table" />
|
|
5
|
+
</a>
|
|
3
6
|
<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
|
|
4
7
|
<img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
|
|
5
8
|
</a>
|
|
6
|
-
|
|
7
9
|
<a href="https://npmjs.com/package/material-react-table" target="_blank_">
|
|
8
10
|
<img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
|
|
9
11
|
</a>
|
|
10
|
-
|
|
11
12
|
<a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
|
|
12
13
|
<img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
|
|
13
14
|
</a>
|
|
14
15
|
|
|
16
|
+
---
|
|
17
|
+
|
|
15
18
|
> This Project is based on `@tanstack/react-table` v8, which itself is still in beta, so therefore this package is also still in alpha/beta
|
|
16
19
|
|
|
17
20
|
- A fully featured Material UI V5 implementation of Tanstack React Table v8 (beta)
|
|
@@ -31,6 +34,8 @@ View the [github source code](https://github.com/KevinVandy/material-react-table
|
|
|
31
34
|
|
|
32
35
|
Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
|
|
33
36
|
|
|
37
|
+
---
|
|
38
|
+
|
|
34
39
|
### Features (All Features work and are MVP, but are still being polished)
|
|
35
40
|
|
|
36
41
|
_All features can easily be enabled/disabled_
|
|
@@ -65,6 +70,8 @@ _All features can easily be enabled/disabled_
|
|
|
65
70
|
- [x] Tree Data / Expanding Sub-rows
|
|
66
71
|
- [x] Virtualization (react-virtual)
|
|
67
72
|
|
|
73
|
+
---
|
|
74
|
+
|
|
68
75
|
### Installation
|
|
69
76
|
|
|
70
77
|
1. Install Peer Dependencies (Material UI v5)
|
|
@@ -79,4 +86,14 @@ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
|
79
86
|
npm install material-react-table
|
|
80
87
|
```
|
|
81
88
|
|
|
82
|
-
_`@tanstack/react-table`, `react-virtual` and `react-dnd`_ are internal dependencies, so you don't need to install them yourself.
|
|
89
|
+
_`@tanstack/react-table`, `react-virtual` and `react-dnd`_ are internal dependencies, so you don't need to install them yourself.
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
### Contributors
|
|
94
|
+
|
|
95
|
+
<a href="https://github.com/kevinvandy/material-react-table/graphs/contributors">
|
|
96
|
+
<img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" />
|
|
97
|
+
</a>
|
|
98
|
+
|
|
99
|
+
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first!
|
|
@@ -408,7 +408,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
408
408
|
positionActionsColumn?: 'first' | 'last';
|
|
409
409
|
positionGlobalFilter?: 'left' | 'right';
|
|
410
410
|
positionPagination?: 'bottom' | 'top' | 'both';
|
|
411
|
-
positionToolbarActions?: 'bottom' | 'top';
|
|
412
411
|
positionToolbarAlertBanner?: 'bottom' | 'top';
|
|
413
412
|
renderDetailPanel?: ({ row, instance, }: {
|
|
414
413
|
row: MRT_Row<D>;
|
|
@@ -423,7 +422,10 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
423
422
|
row: MRT_Row<D>;
|
|
424
423
|
instance: MRT_TableInstance<D>;
|
|
425
424
|
}) => ReactNode;
|
|
426
|
-
|
|
425
|
+
renderToolbarBottomCustomActions?: ({ instance, }: {
|
|
426
|
+
instance: MRT_TableInstance<D>;
|
|
427
|
+
}) => ReactNode;
|
|
428
|
+
renderToolbarTopCustomActions?: ({ instance, }: {
|
|
427
429
|
instance: MRT_TableInstance<D>;
|
|
428
430
|
}) => ReactNode;
|
|
429
431
|
renderToolbarInternalActions?: ({ instance, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
|
|
@@ -449,5 +451,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
449
451
|
tableId?: string;
|
|
450
452
|
virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
|
|
451
453
|
};
|
|
452
|
-
declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination,
|
|
454
|
+
declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
|
|
453
455
|
export default _default;
|
|
@@ -5363,7 +5363,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
|
|
|
5363
5363
|
}, React__default.createElement(material.Tooltip, {
|
|
5364
5364
|
arrow: true,
|
|
5365
5365
|
title: localization.changeSearchMode
|
|
5366
|
-
}, React__default.createElement(
|
|
5366
|
+
}, React__default.createElement(material.IconButton, {
|
|
5367
5367
|
"aria-label": localization.changeSearchMode,
|
|
5368
5368
|
onClick: handleGlobalFilterMenuOpen,
|
|
5369
5369
|
size: "small",
|
|
@@ -5371,7 +5371,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
|
|
|
5371
5371
|
height: '1.75rem',
|
|
5372
5372
|
width: '1.75rem'
|
|
5373
5373
|
}
|
|
5374
|
-
}, React__default.createElement(SearchIcon, null))))
|
|
5374
|
+
}, React__default.createElement(SearchIcon, null)))),
|
|
5375
5375
|
endAdornment: React__default.createElement(material.InputAdornment, {
|
|
5376
5376
|
position: "end"
|
|
5377
5377
|
}, React__default.createElement(material.IconButton, {
|
|
@@ -5382,11 +5382,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
|
|
|
5382
5382
|
title: localization.clearSearch
|
|
5383
5383
|
}, React__default.createElement(CloseIcon, null)))
|
|
5384
5384
|
}
|
|
5385
|
-
}, textFieldProps, {
|
|
5386
|
-
sx: _extends({
|
|
5387
|
-
justifySelf: 'end'
|
|
5388
|
-
}, textFieldProps == null ? void 0 : textFieldProps.sx)
|
|
5389
|
-
})), React__default.createElement(MRT_FilterOptionMenu, {
|
|
5385
|
+
}, textFieldProps)), React__default.createElement(MRT_FilterOptionMenu, {
|
|
5390
5386
|
anchorEl: anchorEl,
|
|
5391
5387
|
setAnchorEl: setAnchorEl,
|
|
5392
5388
|
instance: instance
|
|
@@ -5408,8 +5404,8 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
|
|
|
5408
5404
|
renderToolbarInternalActions = _instance$options.renderToolbarInternalActions;
|
|
5409
5405
|
return React__default.createElement(material.Box, {
|
|
5410
5406
|
sx: {
|
|
5411
|
-
display: 'flex',
|
|
5412
5407
|
alignItems: 'center',
|
|
5408
|
+
display: 'flex',
|
|
5413
5409
|
zIndex: 3
|
|
5414
5410
|
}
|
|
5415
5411
|
}, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
|
|
@@ -5435,19 +5431,23 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
|
|
|
5435
5431
|
};
|
|
5436
5432
|
|
|
5437
5433
|
var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
|
5438
|
-
var instance = _ref.instance
|
|
5434
|
+
var instance = _ref.instance,
|
|
5435
|
+
position = _ref.position;
|
|
5439
5436
|
var getPrePaginationRowModel = instance.getPrePaginationRowModel,
|
|
5440
5437
|
getState = instance.getState,
|
|
5441
5438
|
setPageIndex = instance.setPageIndex,
|
|
5442
5439
|
setPageSize = instance.setPageSize,
|
|
5443
|
-
|
|
5440
|
+
_instance$options = instance.options,
|
|
5441
|
+
muiTablePaginationProps = _instance$options.muiTablePaginationProps,
|
|
5442
|
+
enableToolbarInternalActions = _instance$options.enableToolbarInternalActions;
|
|
5444
5443
|
|
|
5445
5444
|
var _getState = getState(),
|
|
5446
5445
|
_getState$pagination = _getState.pagination,
|
|
5447
5446
|
_getState$pagination$ = _getState$pagination.pageSize,
|
|
5448
5447
|
pageSize = _getState$pagination$ === void 0 ? 10 : _getState$pagination$,
|
|
5449
5448
|
_getState$pagination$2 = _getState$pagination.pageIndex,
|
|
5450
|
-
pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2
|
|
5449
|
+
pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2,
|
|
5450
|
+
showGlobalFilter = _getState.showGlobalFilter;
|
|
5451
5451
|
|
|
5452
5452
|
var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps({
|
|
5453
5453
|
instance: instance
|
|
@@ -5483,6 +5483,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
|
|
|
5483
5483
|
}, tablePaginationProps, {
|
|
5484
5484
|
sx: _extends({
|
|
5485
5485
|
m: '0 0.5rem',
|
|
5486
|
+
mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
|
|
5486
5487
|
position: 'relative',
|
|
5487
5488
|
zIndex: 2
|
|
5488
5489
|
}, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
|
|
@@ -5585,12 +5586,11 @@ var commonToolbarStyles = function commonToolbarStyles(_ref) {
|
|
|
5585
5586
|
overflow: 'hidden',
|
|
5586
5587
|
p: '0 !important',
|
|
5587
5588
|
transition: 'all 0.2s ease-in-out',
|
|
5588
|
-
width: '100%',
|
|
5589
5589
|
zIndex: 1
|
|
5590
5590
|
};
|
|
5591
5591
|
};
|
|
5592
5592
|
var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
5593
|
-
var
|
|
5593
|
+
var _renderToolbarTopCust;
|
|
5594
5594
|
|
|
5595
5595
|
var instance = _ref2.instance;
|
|
5596
5596
|
var getState = instance.getState,
|
|
@@ -5598,13 +5598,12 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
|
5598
5598
|
enableGlobalFilter = _instance$options.enableGlobalFilter,
|
|
5599
5599
|
enablePagination = _instance$options.enablePagination,
|
|
5600
5600
|
enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
|
|
5601
|
-
tableId = _instance$options.tableId,
|
|
5602
5601
|
muiTableToolbarTopProps = _instance$options.muiTableToolbarTopProps,
|
|
5603
|
-
positionPagination = _instance$options.positionPagination,
|
|
5604
5602
|
positionGlobalFilter = _instance$options.positionGlobalFilter,
|
|
5605
|
-
|
|
5603
|
+
positionPagination = _instance$options.positionPagination,
|
|
5606
5604
|
positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
|
|
5607
|
-
|
|
5605
|
+
renderToolbarTopCustomActions = _instance$options.renderToolbarTopCustomActions,
|
|
5606
|
+
tableId = _instance$options.tableId;
|
|
5608
5607
|
|
|
5609
5608
|
var _getState = getState(),
|
|
5610
5609
|
isFullScreen = _getState.isFullScreen,
|
|
@@ -5614,7 +5613,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
|
5614
5613
|
var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
|
|
5615
5614
|
instance: instance
|
|
5616
5615
|
}) : muiTableToolbarTopProps;
|
|
5617
|
-
var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!
|
|
5616
|
+
var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarTopCustomActions || showGlobalFilter);
|
|
5618
5617
|
return React__default.createElement(material.Toolbar, Object.assign({
|
|
5619
5618
|
id: "mrt-" + tableId + "-toolbar-top",
|
|
5620
5619
|
variant: "dense"
|
|
@@ -5633,23 +5632,27 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
|
|
|
5633
5632
|
}), React__default.createElement(material.Box, {
|
|
5634
5633
|
sx: {
|
|
5635
5634
|
alignItems: 'flex-start',
|
|
5635
|
+
boxSizing: 'border-box',
|
|
5636
5636
|
display: 'flex',
|
|
5637
5637
|
justifyContent: 'space-between',
|
|
5638
5638
|
p: '0.5rem',
|
|
5639
5639
|
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
5640
5640
|
right: 0,
|
|
5641
5641
|
top: 0,
|
|
5642
|
-
width:
|
|
5642
|
+
width: '100%'
|
|
5643
5643
|
}
|
|
5644
5644
|
}, enableGlobalFilter && positionGlobalFilter === 'left' && React__default.createElement(MRT_SearchTextField, {
|
|
5645
5645
|
instance: instance
|
|
5646
|
-
}), (
|
|
5646
|
+
}), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
|
|
5647
5647
|
instance: instance
|
|
5648
|
-
})) != null ?
|
|
5648
|
+
})) != null ? _renderToolbarTopCust : React__default.createElement("span", null), enableToolbarInternalActions ? React__default.createElement(MRT_ToolbarInternalButtons, {
|
|
5649
5649
|
instance: instance
|
|
5650
|
-
})
|
|
5650
|
+
}) : enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_SearchTextField, {
|
|
5651
5651
|
instance: instance
|
|
5652
|
-
})), React__default.createElement(
|
|
5652
|
+
})), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
|
|
5653
|
+
instance: instance,
|
|
5654
|
+
position: "top"
|
|
5655
|
+
}), React__default.createElement(MRT_LinearProgressBar, {
|
|
5653
5656
|
alignTo: "bottom",
|
|
5654
5657
|
instance: instance
|
|
5655
5658
|
}));
|
|
@@ -5659,14 +5662,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
|
5659
5662
|
var instance = _ref.instance;
|
|
5660
5663
|
var getState = instance.getState,
|
|
5661
5664
|
_instance$options = instance.options,
|
|
5662
|
-
enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
|
|
5663
|
-
tableId = _instance$options.tableId,
|
|
5664
5665
|
enablePagination = _instance$options.enablePagination,
|
|
5665
5666
|
muiTableToolbarBottomProps = _instance$options.muiTableToolbarBottomProps,
|
|
5666
5667
|
positionPagination = _instance$options.positionPagination,
|
|
5667
|
-
positionToolbarActions = _instance$options.positionToolbarActions,
|
|
5668
5668
|
positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
|
|
5669
|
-
|
|
5669
|
+
renderToolbarBottomCustomActions = _instance$options.renderToolbarBottomCustomActions,
|
|
5670
|
+
tableId = _instance$options.tableId;
|
|
5670
5671
|
|
|
5671
5672
|
var _getState = getState(),
|
|
5672
5673
|
isFullScreen = _getState.isFullScreen;
|
|
@@ -5675,7 +5676,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
|
5675
5676
|
var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
|
|
5676
5677
|
instance: instance
|
|
5677
5678
|
}) : muiTableToolbarBottomProps;
|
|
5678
|
-
var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' &&
|
|
5679
|
+
var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && !!renderToolbarBottomCustomActions;
|
|
5679
5680
|
return React__default.createElement(material.Toolbar, Object.assign({
|
|
5680
5681
|
id: "mrt-" + tableId + "-toolbar-bottom",
|
|
5681
5682
|
variant: "dense"
|
|
@@ -5698,16 +5699,26 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
|
5698
5699
|
sx: {
|
|
5699
5700
|
display: 'flex',
|
|
5700
5701
|
justifyContent: 'space-between',
|
|
5701
|
-
width: '100%'
|
|
5702
|
+
width: '100%'
|
|
5703
|
+
}
|
|
5704
|
+
}, renderToolbarBottomCustomActions ? React__default.createElement(material.Box, {
|
|
5705
|
+
sx: {
|
|
5706
|
+
p: '0.5rem'
|
|
5707
|
+
}
|
|
5708
|
+
}, renderToolbarBottomCustomActions({
|
|
5709
|
+
instance: instance
|
|
5710
|
+
})) : React__default.createElement("span", null), React__default.createElement(material.Box, {
|
|
5711
|
+
sx: {
|
|
5712
|
+
display: 'flex',
|
|
5713
|
+
justifyContent: 'flex-end',
|
|
5702
5714
|
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
5703
5715
|
right: 0,
|
|
5704
5716
|
top: 0
|
|
5705
5717
|
}
|
|
5706
|
-
},
|
|
5707
|
-
instance: instance
|
|
5708
|
-
|
|
5709
|
-
|
|
5710
|
-
})));
|
|
5718
|
+
}, enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
|
|
5719
|
+
instance: instance,
|
|
5720
|
+
position: "bottom"
|
|
5721
|
+
}))));
|
|
5711
5722
|
};
|
|
5712
5723
|
|
|
5713
5724
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
@@ -6041,7 +6052,8 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
|
|
|
6041
6052
|
'&:hover': {
|
|
6042
6053
|
backgroundColor: 'transparent',
|
|
6043
6054
|
opacity: 0.8
|
|
6044
|
-
}
|
|
6055
|
+
},
|
|
6056
|
+
width: '1.5ch'
|
|
6045
6057
|
}
|
|
6046
6058
|
}, showFilters && !column.getFilterValue() ? React__default.createElement(FilterAltOffIcon, null) : React__default.createElement(FilterAltIcon, null)));
|
|
6047
6059
|
};
|
|
@@ -6070,6 +6082,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
|
|
|
6070
6082
|
height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
|
|
6071
6083
|
opacity: 0.8,
|
|
6072
6084
|
position: 'absolute',
|
|
6085
|
+
mr: '-1rem',
|
|
6073
6086
|
right: '1px',
|
|
6074
6087
|
touchAction: 'none',
|
|
6075
6088
|
transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
|
|
@@ -6103,11 +6116,15 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
|
|
|
6103
6116
|
}, React__default.createElement(material.TableSortLabel, {
|
|
6104
6117
|
"aria-label": sortTooltip,
|
|
6105
6118
|
active: !!column.getIsSorted(),
|
|
6106
|
-
direction: column.getIsSorted() ? column.getIsSorted() : undefined
|
|
6119
|
+
direction: column.getIsSorted() ? column.getIsSorted() : undefined,
|
|
6120
|
+
sx: {
|
|
6121
|
+
width: '2ch',
|
|
6122
|
+
transform: 'translateX(-0.5ch)'
|
|
6123
|
+
}
|
|
6107
6124
|
}));
|
|
6108
6125
|
};
|
|
6109
6126
|
|
|
6110
|
-
var
|
|
6127
|
+
var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
|
|
6111
6128
|
var header = _ref.header,
|
|
6112
6129
|
instance = _ref.instance;
|
|
6113
6130
|
var _instance$options = instance.options,
|
|
@@ -6151,7 +6168,6 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
6151
6168
|
}, iconButtonProps, {
|
|
6152
6169
|
sx: _extends({
|
|
6153
6170
|
height: '2rem',
|
|
6154
|
-
mr: '2px',
|
|
6155
6171
|
mt: '-0.2rem',
|
|
6156
6172
|
opacity: 0.5,
|
|
6157
6173
|
transition: 'opacity 0.2s',
|
|
@@ -6257,6 +6273,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
6257
6273
|
display: 'flex',
|
|
6258
6274
|
justifyContent: columnDefType === 'group' ? 'center' : 'space-between',
|
|
6259
6275
|
opacity: isDragging ? 0.5 : 1,
|
|
6276
|
+
position: 'relative',
|
|
6260
6277
|
width: '100%'
|
|
6261
6278
|
}
|
|
6262
6279
|
}, React__default.createElement(material.Box, {
|
|
@@ -6283,7 +6300,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
6283
6300
|
}, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_GrabHandleButton, {
|
|
6284
6301
|
ref: dragRef,
|
|
6285
6302
|
instance: instance
|
|
6286
|
-
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(
|
|
6303
|
+
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
|
|
6287
6304
|
header: header,
|
|
6288
6305
|
instance: instance
|
|
6289
6306
|
})), column.getCanResize() && React__default.createElement(MRT_TableHeadCellResizeHandle, {
|
|
@@ -7049,6 +7066,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
|
7049
7066
|
muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
|
|
7050
7067
|
muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
|
|
7051
7068
|
onCellClick = _instance$options.onCellClick,
|
|
7069
|
+
onRowClick = _instance$options.onRowClick,
|
|
7052
7070
|
rowNumberMode = _instance$options.rowNumberMode,
|
|
7053
7071
|
tableId = _instance$options.tableId,
|
|
7054
7072
|
setColumnOrder = instance.setColumnOrder,
|
|
@@ -7135,7 +7153,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
|
7135
7153
|
return _extends({
|
|
7136
7154
|
backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
|
|
7137
7155
|
boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
|
|
7138
|
-
cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
|
|
7156
|
+
cursor: isEditable && editingMode === 'cell' || onRowClick || onCellClick ? 'pointer' : 'text',
|
|
7139
7157
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
|
7140
7158
|
overflow: 'hidden',
|
|
7141
7159
|
p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
|
@@ -7792,7 +7810,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
|
7792
7810
|
}));
|
|
7793
7811
|
};
|
|
7794
7812
|
|
|
7795
|
-
var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "
|
|
7813
|
+
var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
|
|
7796
7814
|
var MaterialReactTable = (function (_ref) {
|
|
7797
7815
|
var _ref$autoResetExpande = _ref.autoResetExpanded,
|
|
7798
7816
|
autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
|
|
@@ -7862,10 +7880,8 @@ var MaterialReactTable = (function (_ref) {
|
|
|
7862
7880
|
positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
|
|
7863
7881
|
_ref$positionPaginati = _ref.positionPagination,
|
|
7864
7882
|
positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
|
|
7865
|
-
_ref$positionToolbarA = _ref.
|
|
7866
|
-
|
|
7867
|
-
_ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
|
|
7868
|
-
positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
|
|
7883
|
+
_ref$positionToolbarA = _ref.positionToolbarAlertBanner,
|
|
7884
|
+
positionToolbarAlertBanner = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
|
|
7869
7885
|
_ref$rowNumberMode = _ref.rowNumberMode,
|
|
7870
7886
|
rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
|
|
7871
7887
|
_ref$selectAllMode = _ref.selectAllMode,
|
|
@@ -7906,7 +7922,6 @@ var MaterialReactTable = (function (_ref) {
|
|
|
7906
7922
|
positionActionsColumn: positionActionsColumn,
|
|
7907
7923
|
positionGlobalFilter: positionGlobalFilter,
|
|
7908
7924
|
positionPagination: positionPagination,
|
|
7909
|
-
positionToolbarActions: positionToolbarActions,
|
|
7910
7925
|
positionToolbarAlertBanner: positionToolbarAlertBanner,
|
|
7911
7926
|
rowNumberMode: rowNumberMode,
|
|
7912
7927
|
selectAllMode: selectAllMode
|