material-react-table 0.23.1 → 0.23.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +18 -3
- package/dist/body/MRT_TableBody.d.ts +2 -3
- package/dist/body/MRT_TableBodyCell.d.ts +2 -3
- package/dist/body/MRT_TableBodyRow.d.ts +2 -3
- package/dist/head/MRT_TableHead.d.ts +2 -4
- package/dist/head/MRT_TableHeadCell.d.ts +2 -4
- package/dist/head/MRT_TableHeadRow.d.ts +2 -4
- package/dist/material-react-table.cjs.development.js +86 -68
- 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 +87 -69
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +3 -2
- package/src/MaterialReactTable.tsx +18 -3
- package/src/body/MRT_TableBody.tsx +3 -9
- package/src/body/MRT_TableBodyCell.tsx +43 -14
- package/src/body/MRT_TableBodyRow.tsx +3 -10
- package/src/head/MRT_TableHead.tsx +3 -11
- package/src/head/MRT_TableHeadCell.tsx +45 -37
- package/src/head/MRT_TableHeadRow.tsx +3 -17
- package/src/table/MRT_Table.tsx +4 -17
- package/src/table/MRT_TableRoot.tsx +11 -0
@@ -42,12 +42,14 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
|
|
42
42
|
tableId: string;
|
43
43
|
localization: MRT_Localization;
|
44
44
|
};
|
45
|
+
setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
45
46
|
setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
46
47
|
setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
47
48
|
setCurrentFilterFns: Dispatch<SetStateAction<{
|
48
49
|
[key: string]: MRT_FilterOption;
|
49
50
|
}>>;
|
50
51
|
setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
|
52
|
+
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
51
53
|
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
52
54
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
53
55
|
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
@@ -55,13 +57,15 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
|
|
55
57
|
setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
|
56
58
|
};
|
57
59
|
export declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
|
60
|
+
currentDraggingColumn: MRT_Column<TData> | null;
|
58
61
|
currentEditingCell: MRT_Cell<TData> | null;
|
59
62
|
currentEditingRow: MRT_Row<TData> | null;
|
60
63
|
currentFilterFns: Record<string, MRT_FilterOption>;
|
61
64
|
currentGlobalFilterFn: Record<string, MRT_FilterOption>;
|
65
|
+
currentHoveredColumn: MRT_Column<TData> | null;
|
62
66
|
density: 'comfortable' | 'compact' | 'spacious';
|
63
|
-
isLoading: boolean;
|
64
67
|
isFullScreen: boolean;
|
68
|
+
isLoading: boolean;
|
65
69
|
showAlertBanner: boolean;
|
66
70
|
showColumnFilters: boolean;
|
67
71
|
showGlobalFilter: boolean;
|
@@ -352,12 +356,14 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
352
356
|
cell: MRT_Cell<TData>;
|
353
357
|
table: MRT_TableInstance<TData>;
|
354
358
|
}) => void;
|
355
|
-
|
356
|
-
|
359
|
+
onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
360
|
+
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
361
|
+
onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
357
362
|
onCurrentFilterFnsChange?: OnChangeFn<{
|
358
363
|
[key: string]: MRT_FilterOption;
|
359
364
|
}>;
|
360
365
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
366
|
+
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
361
367
|
onEditRowSubmit?: ({ row, table, }: {
|
362
368
|
row: MRT_Row<TData>;
|
363
369
|
table: MRT_TableInstance<TData>;
|
@@ -415,4 +421,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
415
421
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
|
416
422
|
};
|
417
423
|
declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
424
|
+
/**
|
425
|
+
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
426
|
+
*
|
427
|
+
* See more info on creating columns and data on the official docs site:
|
428
|
+
* @link https://www.material-react-table.com/docs/usage
|
429
|
+
*
|
430
|
+
* See the full props list on the official docs site:
|
431
|
+
* @link https://www.material-react-table.com/docs/api/props
|
432
|
+
*/
|
418
433
|
export default _default;
|
@@ -1,8 +1,7 @@
|
|
1
|
-
import {
|
2
|
-
import type {
|
1
|
+
import { FC, RefObject } from 'react';
|
2
|
+
import type { MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
4
|
table: MRT_TableInstance;
|
5
|
-
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
|
6
5
|
tableContainerRef: RefObject<HTMLDivElement>;
|
7
6
|
}
|
8
7
|
export declare const MRT_TableBody: FC<Props>;
|
@@ -1,10 +1,9 @@
|
|
1
|
-
import {
|
2
|
-
import type { MRT_Cell,
|
1
|
+
import { FC } from 'react';
|
2
|
+
import type { MRT_Cell, MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
4
|
cell: MRT_Cell;
|
5
5
|
enableHover?: boolean;
|
6
6
|
rowIndex: number;
|
7
|
-
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
|
8
7
|
table: MRT_TableInstance;
|
9
8
|
}
|
10
9
|
export declare const MRT_TableBodyCell: FC<Props>;
|
@@ -1,9 +1,8 @@
|
|
1
|
-
import {
|
2
|
-
import type {
|
1
|
+
import { FC } from 'react';
|
2
|
+
import type { MRT_Row, MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
4
|
row: MRT_Row;
|
5
5
|
rowIndex: number;
|
6
|
-
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
|
7
6
|
table: MRT_TableInstance;
|
8
7
|
}
|
9
8
|
export declare const MRT_TableBodyRow: FC<Props>;
|
@@ -1,8 +1,6 @@
|
|
1
|
-
import {
|
2
|
-
import type {
|
1
|
+
import { FC } from 'react';
|
2
|
+
import type { MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
|
-
currentHoveredColumn: MRT_Column | null;
|
5
|
-
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
|
6
4
|
table: MRT_TableInstance;
|
7
5
|
}
|
8
6
|
export declare const MRT_TableHead: FC<Props>;
|
@@ -1,8 +1,6 @@
|
|
1
|
-
import {
|
2
|
-
import type {
|
1
|
+
import { FC } from 'react';
|
2
|
+
import type { MRT_Header, MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
|
-
currentHoveredColumn: MRT_Column | null;
|
5
|
-
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
|
6
4
|
header: MRT_Header;
|
7
5
|
table: MRT_TableInstance;
|
8
6
|
}
|
@@ -1,8 +1,6 @@
|
|
1
|
-
import {
|
2
|
-
import type {
|
1
|
+
import { FC } from 'react';
|
2
|
+
import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
|
-
currentHoveredColumn: MRT_Column | null;
|
5
|
-
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
|
6
4
|
headerGroup: MRT_HeaderGroup;
|
7
5
|
table: MRT_TableInstance;
|
8
6
|
}
|
@@ -2424,10 +2424,9 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
|
|
2424
2424
|
var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
2425
2425
|
var _ref2, _columnDef$header$len, _columnDef$header;
|
2426
2426
|
|
2427
|
-
var
|
2428
|
-
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2429
|
-
header = _ref.header,
|
2427
|
+
var header = _ref.header,
|
2430
2428
|
table = _ref.table;
|
2429
|
+
var theme = material.useTheme();
|
2431
2430
|
var getState = table.getState,
|
2432
2431
|
_table$options = table.options,
|
2433
2432
|
enableColumnActions = _table$options.enableColumnActions,
|
@@ -2436,11 +2435,15 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2436
2435
|
enableGrouping = _table$options.enableGrouping,
|
2437
2436
|
enableMultiSort = _table$options.enableMultiSort,
|
2438
2437
|
muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
|
2439
|
-
setColumnOrder = table.setColumnOrder
|
2438
|
+
setColumnOrder = table.setColumnOrder,
|
2439
|
+
setCurrentDraggingColumn = table.setCurrentDraggingColumn,
|
2440
|
+
setCurrentHoveredColumn = table.setCurrentHoveredColumn;
|
2440
2441
|
|
2441
2442
|
var _getState = getState(),
|
2442
2443
|
columnOrder = _getState.columnOrder,
|
2443
|
-
density = _getState.density
|
2444
|
+
density = _getState.density,
|
2445
|
+
currentDraggingColumn = _getState.currentDraggingColumn,
|
2446
|
+
currentHoveredColumn = _getState.currentHoveredColumn;
|
2444
2447
|
|
2445
2448
|
var column = header.column;
|
2446
2449
|
var columnDef = column.columnDef;
|
@@ -2475,28 +2478,32 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2475
2478
|
|
2476
2479
|
var tableHeadCellRef = React__default.useRef(null);
|
2477
2480
|
|
2478
|
-
var _useState = React.useState(false),
|
2479
|
-
isDragging = _useState[0],
|
2480
|
-
setIsDragging = _useState[1];
|
2481
|
-
|
2482
2481
|
var handleDragStart = function handleDragStart(e) {
|
2483
|
-
|
2482
|
+
setCurrentDraggingColumn(column);
|
2484
2483
|
e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
|
2485
2484
|
};
|
2486
2485
|
|
2487
2486
|
var handleDragEnd = function handleDragEnd(_e) {
|
2488
|
-
|
2487
|
+
setCurrentDraggingColumn(null);
|
2489
2488
|
setCurrentHoveredColumn(null);
|
2490
2489
|
|
2491
|
-
if (currentHoveredColumn) {
|
2490
|
+
if (currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
|
2492
2491
|
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
2493
2492
|
}
|
2494
2493
|
};
|
2495
2494
|
|
2496
2495
|
var handleDragEnter = function handleDragEnter(_e) {
|
2497
|
-
|
2496
|
+
if (currentDraggingColumn) {
|
2497
|
+
setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
|
2498
|
+
}
|
2498
2499
|
};
|
2499
2500
|
|
2501
|
+
var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
|
2502
|
+
var draggingBorders = draggingBorder ? {
|
2503
|
+
borderLeft: draggingBorder,
|
2504
|
+
borderRight: draggingBorder,
|
2505
|
+
borderTop: draggingBorder
|
2506
|
+
} : undefined;
|
2500
2507
|
return React__default.createElement(material.TableCell, Object.assign({
|
2501
2508
|
align: columnDefType === 'group' ? 'center' : 'left',
|
2502
2509
|
colSpan: header.colSpan,
|
@@ -2509,12 +2516,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2509
2516
|
return _extends({
|
2510
2517
|
backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
|
2511
2518
|
backgroundImage: 'inherit',
|
2512
|
-
border: isDragging ? "2px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined,
|
2513
2519
|
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,
|
2514
2520
|
fontWeight: 'bold',
|
2515
2521
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
2516
2522
|
overflow: 'visible',
|
2517
|
-
opacity:
|
2523
|
+
opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
|
2518
2524
|
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',
|
2519
2525
|
pb: columnDefType === 'display' ? 0 : undefined,
|
2520
2526
|
position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
|
@@ -2523,8 +2529,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2523
2529
|
transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
|
2524
2530
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
2525
2531
|
verticalAlign: 'text-top',
|
2526
|
-
zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
2527
|
-
}, tableCellProps == null ? void 0 : tableCellProps.sx, {
|
2532
|
+
zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
2533
|
+
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2528
2534
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
2529
2535
|
minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
|
2530
2536
|
width: header.getSize()
|
@@ -2535,7 +2541,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2535
2541
|
alignItems: 'flex-start',
|
2536
2542
|
display: 'flex',
|
2537
2543
|
justifyContent: columnDefType === 'group' ? 'center' : 'space-between',
|
2538
|
-
opacity: isDragging ? 0.5 : 1,
|
2539
2544
|
position: 'relative',
|
2540
2545
|
width: '100%'
|
2541
2546
|
}
|
@@ -2575,9 +2580,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2575
2580
|
};
|
2576
2581
|
|
2577
2582
|
var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
2578
|
-
var
|
2579
|
-
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2580
|
-
headerGroup = _ref.headerGroup,
|
2583
|
+
var headerGroup = _ref.headerGroup,
|
2581
2584
|
table = _ref.table;
|
2582
2585
|
var muiTableHeadRowProps = table.options.muiTableHeadRowProps;
|
2583
2586
|
var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
|
@@ -2593,8 +2596,6 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
2593
2596
|
}
|
2594
2597
|
}), headerGroup.headers.map(function (header, index) {
|
2595
2598
|
return React__default.createElement(MRT_TableHeadCell, {
|
2596
|
-
currentHoveredColumn: currentHoveredColumn,
|
2597
|
-
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
2598
2599
|
header: header,
|
2599
2600
|
key: header.id || index,
|
2600
2601
|
table: table
|
@@ -2603,9 +2604,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
2603
2604
|
};
|
2604
2605
|
|
2605
2606
|
var MRT_TableHead = function MRT_TableHead(_ref) {
|
2606
|
-
var
|
2607
|
-
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2608
|
-
table = _ref.table;
|
2607
|
+
var table = _ref.table;
|
2609
2608
|
var getHeaderGroups = table.getHeaderGroups,
|
2610
2609
|
muiTableHeadProps = table.options.muiTableHeadProps;
|
2611
2610
|
var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
|
@@ -2613,8 +2612,6 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
|
|
2613
2612
|
}) : muiTableHeadProps;
|
2614
2613
|
return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
|
2615
2614
|
return React__default.createElement(MRT_TableHeadRow, {
|
2616
|
-
currentHoveredColumn: currentHoveredColumn,
|
2617
|
-
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
2618
2615
|
headerGroup: headerGroup,
|
2619
2616
|
key: headerGroup.id,
|
2620
2617
|
table: table
|
@@ -2777,8 +2774,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2777
2774
|
var cell = _ref.cell,
|
2778
2775
|
enableHover = _ref.enableHover,
|
2779
2776
|
rowIndex = _ref.rowIndex,
|
2780
|
-
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2781
2777
|
table = _ref.table;
|
2778
|
+
var theme = material.useTheme();
|
2782
2779
|
var getState = table.getState,
|
2783
2780
|
_table$options = table.options,
|
2784
2781
|
editingMode = _table$options.editingMode,
|
@@ -2789,11 +2786,14 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2789
2786
|
muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
|
2790
2787
|
rowNumberMode = _table$options.rowNumberMode,
|
2791
2788
|
tableId = _table$options.tableId,
|
2792
|
-
setCurrentEditingCell = table.setCurrentEditingCell
|
2789
|
+
setCurrentEditingCell = table.setCurrentEditingCell,
|
2790
|
+
setCurrentHoveredColumn = table.setCurrentHoveredColumn;
|
2793
2791
|
|
2794
2792
|
var _getState = getState(),
|
2793
|
+
currentDraggingColumn = _getState.currentDraggingColumn,
|
2795
2794
|
currentEditingCell = _getState.currentEditingCell,
|
2796
2795
|
currentEditingRow = _getState.currentEditingRow,
|
2796
|
+
currentHoveredColumn = _getState.currentHoveredColumn,
|
2797
2797
|
density = _getState.density,
|
2798
2798
|
isLoading = _getState.isLoading,
|
2799
2799
|
showSkeletons = _getState.showSkeletons;
|
@@ -2846,9 +2846,16 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2846
2846
|
};
|
2847
2847
|
|
2848
2848
|
var handleDragEnter = function handleDragEnter(_e) {
|
2849
|
-
|
2849
|
+
if (currentDraggingColumn) {
|
2850
|
+
setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
|
2851
|
+
}
|
2850
2852
|
};
|
2851
2853
|
|
2854
|
+
var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
|
2855
|
+
var draggingBorders = draggingBorder ? {
|
2856
|
+
borderLeft: draggingBorder,
|
2857
|
+
borderRight: draggingBorder
|
2858
|
+
} : undefined;
|
2852
2859
|
return React__default.createElement(material.TableCell, Object.assign({
|
2853
2860
|
onDoubleClick: handleDoubleClick,
|
2854
2861
|
onDragEnter: handleDragEnter
|
@@ -2861,6 +2868,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2861
2868
|
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,
|
2862
2869
|
cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
|
2863
2870
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
2871
|
+
opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
|
2864
2872
|
overflow: 'hidden',
|
2865
2873
|
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',
|
2866
2874
|
pl: column.id === 'mrt-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
|
@@ -2869,11 +2877,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2869
2877
|
textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
|
2870
2878
|
transition: 'all 0.2s ease-in-out',
|
2871
2879
|
whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
|
2872
|
-
zIndex: column.getIsPinned() ? 1 : undefined,
|
2880
|
+
zIndex: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : undefined,
|
2873
2881
|
'&:hover': {
|
2874
2882
|
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
|
2875
2883
|
}
|
2876
|
-
}, tableCellProps == null ? void 0 : tableCellProps.sx, {
|
2884
|
+
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2877
2885
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
2878
2886
|
minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
|
2879
2887
|
width: column.getSize()
|
@@ -2940,7 +2948,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
2940
2948
|
|
2941
2949
|
var row = _ref.row,
|
2942
2950
|
rowIndex = _ref.rowIndex,
|
2943
|
-
setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
|
2944
2951
|
table = _ref.table;
|
2945
2952
|
var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
|
2946
2953
|
_table$options = table.options,
|
@@ -2969,7 +2976,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
2969
2976
|
key: cell.id,
|
2970
2977
|
enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
|
2971
2978
|
rowIndex: rowIndex,
|
2972
|
-
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
2973
2979
|
table: table
|
2974
2980
|
});
|
2975
2981
|
})), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
|
@@ -2979,8 +2985,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
2979
2985
|
};
|
2980
2986
|
|
2981
2987
|
var MRT_TableBody = function MRT_TableBody(_ref) {
|
2982
|
-
var
|
2983
|
-
table = _ref.table,
|
2988
|
+
var table = _ref.table,
|
2984
2989
|
tableContainerRef = _ref.tableContainerRef;
|
2985
2990
|
var getRowModel = table.getRowModel,
|
2986
2991
|
getPrePaginationRowModel = table.getPrePaginationRowModel,
|
@@ -3046,7 +3051,6 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
|
|
3046
3051
|
key: row.id,
|
3047
3052
|
row: row,
|
3048
3053
|
rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
|
3049
|
-
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
3050
3054
|
table: table
|
3051
3055
|
});
|
3052
3056
|
}), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
|
@@ -3164,11 +3168,6 @@ var MRT_Table = function MRT_Table(_ref) {
|
|
3164
3168
|
var tableProps = muiTableProps instanceof Function ? muiTableProps({
|
3165
3169
|
table: table
|
3166
3170
|
}) : muiTableProps;
|
3167
|
-
|
3168
|
-
var _useState = React.useState(null),
|
3169
|
-
currentHoveredColumn = _useState[0],
|
3170
|
-
setCurrentHoveredColumn = _useState[1];
|
3171
|
-
|
3172
3171
|
return React__default.createElement(material.Table, Object.assign({
|
3173
3172
|
stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
|
3174
3173
|
}, tableProps, {
|
@@ -3176,11 +3175,8 @@ var MRT_Table = function MRT_Table(_ref) {
|
|
3176
3175
|
tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
|
3177
3176
|
}, tableProps == null ? void 0 : tableProps.sx)
|
3178
3177
|
}), enableTableHead && React__default.createElement(MRT_TableHead, {
|
3179
|
-
currentHoveredColumn: currentHoveredColumn,
|
3180
|
-
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
3181
3178
|
table: table
|
3182
3179
|
}), React__default.createElement(MRT_TableBody, {
|
3183
|
-
setCurrentHoveredColumn: setCurrentHoveredColumn,
|
3184
3180
|
tableContainerRef: tableContainerRef,
|
3185
3181
|
table: table
|
3186
3182
|
}), enableTableFooter && React__default.createElement(MRT_TableFooter, {
|
@@ -3280,7 +3276,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
3280
3276
|
};
|
3281
3277
|
|
3282
3278
|
var MRT_TableRoot = function MRT_TableRoot(props) {
|
3283
|
-
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
3279
|
+
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
3284
3280
|
|
3285
3281
|
var _useState = React.useState(props.tableId),
|
3286
3282
|
tableId = _useState[0],
|
@@ -3311,39 +3307,47 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3311
3307
|
currentEditingRow = _useState4[0],
|
3312
3308
|
setCurrentEditingRow = _useState4[1];
|
3313
3309
|
|
3314
|
-
var _useState5 = React.useState(
|
3315
|
-
|
3316
|
-
|
3310
|
+
var _useState5 = React.useState(null),
|
3311
|
+
currentDraggingColumn = _useState5[0],
|
3312
|
+
setCurrentDraggingColumn = _useState5[1];
|
3313
|
+
|
3314
|
+
var _useState6 = React.useState(null),
|
3315
|
+
currentHoveredColumn = _useState6[0],
|
3316
|
+
setCurrentHoveredColumn = _useState6[1];
|
3317
|
+
|
3318
|
+
var _useState7 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
|
3319
|
+
density = _useState7[0],
|
3320
|
+
setDensity = _useState7[1];
|
3317
3321
|
|
3318
|
-
var
|
3319
|
-
isFullScreen =
|
3320
|
-
setIsFullScreen =
|
3322
|
+
var _useState8 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
|
3323
|
+
isFullScreen = _useState8[0],
|
3324
|
+
setIsFullScreen = _useState8[1];
|
3321
3325
|
|
3322
|
-
var
|
3323
|
-
showAlertBanner =
|
3324
|
-
setShowAlertBanner =
|
3326
|
+
var _useState9 = React.useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
|
3327
|
+
showAlertBanner = _useState9[0],
|
3328
|
+
setShowAlertBanner = _useState9[1];
|
3325
3329
|
|
3326
|
-
var
|
3327
|
-
showColumnFilters =
|
3328
|
-
setShowFilters =
|
3330
|
+
var _useState10 = React.useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
|
3331
|
+
showColumnFilters = _useState10[0],
|
3332
|
+
setShowFilters = _useState10[1];
|
3329
3333
|
|
3330
|
-
var
|
3331
|
-
showGlobalFilter =
|
3332
|
-
setShowGlobalFilter =
|
3334
|
+
var _useState11 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
|
3335
|
+
showGlobalFilter = _useState11[0],
|
3336
|
+
setShowGlobalFilter = _useState11[1];
|
3333
3337
|
|
3334
|
-
var
|
3338
|
+
var _useState12 = React.useState(function () {
|
3335
3339
|
return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
|
3336
3340
|
var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current3, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
|
3337
3341
|
|
3338
3342
|
return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
|
3339
3343
|
})));
|
3340
3344
|
}),
|
3341
|
-
currentFilterFns =
|
3342
|
-
setCurrentFilterFns =
|
3345
|
+
currentFilterFns = _useState12[0],
|
3346
|
+
setCurrentFilterFns = _useState12[1];
|
3343
3347
|
|
3344
|
-
var
|
3345
|
-
currentGlobalFilterFn =
|
3346
|
-
setCurrentGlobalFilterFn =
|
3348
|
+
var _useState13 = React.useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
|
3349
|
+
currentGlobalFilterFn = _useState13[0],
|
3350
|
+
setCurrentGlobalFilterFn = _useState13[1];
|
3347
3351
|
|
3348
3352
|
var displayColumns = React.useMemo(function () {
|
3349
3353
|
var _props$localization, _props$localization2, _props$localization3, _props$localization5;
|
@@ -3455,10 +3459,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3455
3459
|
initialState: initialState,
|
3456
3460
|
state: _extends({
|
3457
3461
|
columnOrder: columnOrder,
|
3462
|
+
currentDraggingColumn: currentDraggingColumn,
|
3458
3463
|
currentEditingCell: currentEditingCell,
|
3459
3464
|
currentEditingRow: currentEditingRow,
|
3460
3465
|
currentFilterFns: currentFilterFns,
|
3461
3466
|
currentGlobalFilterFn: currentGlobalFilterFn,
|
3467
|
+
currentHoveredColumn: currentHoveredColumn,
|
3462
3468
|
density: density,
|
3463
3469
|
isFullScreen: isFullScreen,
|
3464
3470
|
showAlertBanner: showAlertBanner,
|
@@ -3467,10 +3473,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3467
3473
|
}, props.state),
|
3468
3474
|
tableId: tableId
|
3469
3475
|
})), {
|
3476
|
+
setCurrentDraggingColumn: (_props$onCurrentDragg = props.onCurrentDraggingColumnChange) != null ? _props$onCurrentDragg : setCurrentDraggingColumn,
|
3470
3477
|
setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
|
3471
3478
|
setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
|
3472
3479
|
setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
|
3473
3480
|
setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
|
3481
|
+
setCurrentHoveredColumn: (_props$onCurrentHover = props.onCurrentHoveredColumnChange) != null ? _props$onCurrentHover : setCurrentHoveredColumn,
|
3474
3482
|
setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
|
3475
3483
|
setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
|
3476
3484
|
setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
|
@@ -3497,6 +3505,16 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3497
3505
|
};
|
3498
3506
|
|
3499
3507
|
var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
|
3508
|
+
/**
|
3509
|
+
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
3510
|
+
*
|
3511
|
+
* See more info on creating columns and data on the official docs site:
|
3512
|
+
* @link https://www.material-react-table.com/docs/usage
|
3513
|
+
*
|
3514
|
+
* See the full props list on the official docs site:
|
3515
|
+
* @link https://www.material-react-table.com/docs/api/props
|
3516
|
+
*/
|
3517
|
+
|
3500
3518
|
var MaterialReactTable = (function (_ref) {
|
3501
3519
|
var _ref$autoResetExpande = _ref.autoResetExpanded,
|
3502
3520
|
autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
|