material-react-table 0.34.0 → 0.35.1
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/dist/cjs/MaterialReactTable.d.ts +39 -32
- package/dist/cjs/index.js +116 -118
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/menus/MRT_ShowHideColumnsMenuItems.d.ts +3 -3
- package/dist/esm/MaterialReactTable.d.ts +39 -32
- package/dist/esm/material-react-table.esm.js +116 -118
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/menus/MRT_ShowHideColumnsMenuItems.d.ts +3 -3
- package/dist/index.d.ts +39 -32
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +38 -26
- package/src/body/MRT_TableBodyCell.tsx +17 -18
- package/src/body/MRT_TableBodyRow.tsx +7 -10
- package/src/body/MRT_TableBodyRowGrabHandle.tsx +5 -5
- package/src/buttons/MRT_EditActionButtons.tsx +10 -6
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +4 -4
- package/src/head/MRT_TableHeadCell.tsx +11 -16
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +11 -12
- package/src/inputs/MRT_EditCellTextField.tsx +13 -13
- package/src/inputs/MRT_GlobalFilterTextField.tsx +1 -6
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +5 -4
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +11 -11
- package/src/table/MRT_TableRoot.tsx +57 -63
- package/src/toolbar/MRT_ToolbarDropZone.tsx +6 -10
|
@@ -3,10 +3,10 @@ import type { MRT_Column, MRT_TableInstance } from '..';
|
|
|
3
3
|
interface Props<TData extends Record<string, any> = {}> {
|
|
4
4
|
allColumns: MRT_Column<TData>[];
|
|
5
5
|
column: MRT_Column<TData>;
|
|
6
|
-
|
|
6
|
+
hoveredColumn: MRT_Column<TData> | null;
|
|
7
7
|
isSubMenu?: boolean;
|
|
8
|
-
|
|
8
|
+
setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
|
9
9
|
table: MRT_TableInstance<TData>;
|
|
10
10
|
}
|
|
11
|
-
export declare const MRT_ShowHideColumnsMenuItems: <TData extends Record<string, any> = {}>({ allColumns,
|
|
11
|
+
export declare const MRT_ShowHideColumnsMenuItems: <TData extends Record<string, any> = {}>({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }: Props<TData>) => JSX.Element;
|
|
12
12
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -226,40 +226,40 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
|
|
|
226
226
|
tableId: string;
|
|
227
227
|
localization: MRT_Localization;
|
|
228
228
|
};
|
|
229
|
-
setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
|
230
|
-
setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
|
231
|
-
setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
|
232
|
-
setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
|
233
229
|
setColumnFilterFns: Dispatch<SetStateAction<{
|
|
234
230
|
[key: string]: MRT_FilterOption;
|
|
235
231
|
}>>;
|
|
232
|
+
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
|
233
|
+
setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
|
234
|
+
setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
|
235
|
+
setEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
|
236
|
+
setEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
|
236
237
|
setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
|
|
237
|
-
|
|
238
|
+
setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | {
|
|
238
239
|
id: string;
|
|
239
240
|
} | null>>;
|
|
240
|
-
|
|
241
|
+
setHoveredRow: Dispatch<SetStateAction<MRT_Row<TData> | {
|
|
241
242
|
id: string;
|
|
242
243
|
} | null>>;
|
|
243
|
-
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
|
244
244
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
|
245
245
|
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
|
246
246
|
setShowFilters: Dispatch<SetStateAction<boolean>>;
|
|
247
247
|
setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
|
|
248
248
|
};
|
|
249
249
|
declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
|
|
250
|
-
currentDraggingColumn: MRT_Column<TData> | null;
|
|
251
|
-
currentDraggingRow: MRT_Row<TData> | null;
|
|
252
|
-
currentEditingCell: MRT_Cell<TData> | null;
|
|
253
|
-
currentEditingRow: MRT_Row<TData> | null;
|
|
254
250
|
columnFilterFns: Record<string, MRT_FilterOption>;
|
|
255
|
-
|
|
256
|
-
|
|
251
|
+
density: 'comfortable' | 'compact' | 'spacious';
|
|
252
|
+
draggingColumn: MRT_Column<TData> | null;
|
|
253
|
+
draggingRow: MRT_Row<TData> | null;
|
|
254
|
+
editingCell: MRT_Cell<TData> | null;
|
|
255
|
+
editingRow: MRT_Row<TData> | null;
|
|
256
|
+
globalFilterFn: MRT_FilterOption;
|
|
257
|
+
hoveredColumn: MRT_Column<TData> | {
|
|
257
258
|
id: string;
|
|
258
259
|
} | null;
|
|
259
|
-
|
|
260
|
+
hoveredRow: MRT_Row<TData> | {
|
|
260
261
|
id: string;
|
|
261
262
|
} | null;
|
|
262
|
-
density: 'comfortable' | 'compact' | 'spacious';
|
|
263
263
|
isFullScreen: boolean;
|
|
264
264
|
isLoading: boolean;
|
|
265
265
|
showAlertBanner: boolean;
|
|
@@ -389,15 +389,17 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
|
|
|
389
389
|
table: MRT_TableInstance<TData>;
|
|
390
390
|
column: MRT_Column<TData>;
|
|
391
391
|
}) => TableCellProps);
|
|
392
|
-
onCellEditBlur?: ({ cell, event, table, }: {
|
|
392
|
+
onCellEditBlur?: ({ cell, event, table, value, }: {
|
|
393
393
|
event: FocusEvent<HTMLInputElement>;
|
|
394
394
|
cell: MRT_Cell<TData>;
|
|
395
395
|
table: MRT_TableInstance<TData>;
|
|
396
|
+
value: string;
|
|
396
397
|
}) => void;
|
|
397
|
-
onCellEditChange?: ({ cell, event, table, }: {
|
|
398
|
+
onCellEditChange?: ({ cell, event, table, value, }: {
|
|
398
399
|
event: ChangeEvent<HTMLInputElement>;
|
|
399
400
|
cell: MRT_Cell<TData>;
|
|
400
401
|
table: MRT_TableInstance<TData>;
|
|
402
|
+
value: string;
|
|
401
403
|
}) => void;
|
|
402
404
|
sortingFn?: MRT_SortingFn;
|
|
403
405
|
};
|
|
@@ -422,7 +424,7 @@ declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>,
|
|
|
422
424
|
getAllCells: () => MRT_Cell<TData>[];
|
|
423
425
|
getVisibleCells: () => MRT_Cell<TData>[];
|
|
424
426
|
subRows?: MRT_Row<TData>[];
|
|
425
|
-
_valuesCache
|
|
427
|
+
_valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
|
426
428
|
};
|
|
427
429
|
declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
|
|
428
430
|
column: MRT_Column<TData>;
|
|
@@ -442,10 +444,11 @@ declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-ro
|
|
|
442
444
|
* See the full props list on the official docs site:
|
|
443
445
|
* @link https://www.material-react-table.com/docs/api/props
|
|
444
446
|
*/
|
|
445
|
-
declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
|
|
447
|
+
declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
|
|
446
448
|
columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
|
|
447
449
|
columns: MRT_ColumnDef<TData>[];
|
|
448
450
|
data: TData[];
|
|
451
|
+
defaultColumn?: Partial<MRT_ColumnDef<TData>>;
|
|
449
452
|
displayColumnDefOptions?: Partial<{
|
|
450
453
|
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
|
451
454
|
}>;
|
|
@@ -467,6 +470,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
|
|
|
467
470
|
enableRowDragging?: boolean;
|
|
468
471
|
enableRowNumbers?: boolean;
|
|
469
472
|
enableRowOrdering?: boolean;
|
|
473
|
+
enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
|
|
470
474
|
enableRowVirtualization?: boolean;
|
|
471
475
|
enableSelectAll?: boolean;
|
|
472
476
|
enableStickyHeader?: boolean;
|
|
@@ -587,15 +591,17 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
|
|
|
587
591
|
muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
|
|
588
592
|
table: MRT_TableInstance<TData>;
|
|
589
593
|
}) => ToolbarProps);
|
|
590
|
-
onCellEditBlur?: ({ cell, event, table, }: {
|
|
594
|
+
onCellEditBlur?: ({ cell, event, table, value, }: {
|
|
591
595
|
event: FocusEvent<HTMLInputElement>;
|
|
592
596
|
cell: MRT_Cell<TData>;
|
|
593
597
|
table: MRT_TableInstance<TData>;
|
|
598
|
+
value: string;
|
|
594
599
|
}) => void;
|
|
595
|
-
onCellEditChange?: ({ cell, event, table, }: {
|
|
600
|
+
onCellEditChange?: ({ cell, event, table, value, }: {
|
|
596
601
|
event: ChangeEvent<HTMLInputElement>;
|
|
597
602
|
cell: MRT_Cell<TData>;
|
|
598
603
|
table: MRT_TableInstance<TData>;
|
|
604
|
+
value: string;
|
|
599
605
|
}) => void;
|
|
600
606
|
onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
|
|
601
607
|
event: DragEvent<HTMLButtonElement>;
|
|
@@ -604,21 +610,22 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
|
|
|
604
610
|
id: string;
|
|
605
611
|
} | null;
|
|
606
612
|
}) => void;
|
|
607
|
-
onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
608
|
-
onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
609
|
-
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
|
610
|
-
onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
611
|
-
onCurrentFilterFnsChange?: OnChangeFn<{
|
|
612
|
-
[key: string]: MRT_FilterOption;
|
|
613
|
-
}>;
|
|
614
|
-
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
|
615
|
-
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
616
|
-
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
617
613
|
onDensityChange?: OnChangeFn<boolean>;
|
|
618
|
-
|
|
614
|
+
onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
615
|
+
onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
616
|
+
onEditRowSubmit?: ({ row, table, values, }: {
|
|
619
617
|
row: MRT_Row<TData>;
|
|
620
618
|
table: MRT_TableInstance<TData>;
|
|
619
|
+
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
|
621
620
|
}) => Promise<void> | void;
|
|
621
|
+
onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
|
622
|
+
onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
623
|
+
onFilterFnsChange?: OnChangeFn<{
|
|
624
|
+
[key: string]: MRT_FilterOption;
|
|
625
|
+
}>;
|
|
626
|
+
onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
|
627
|
+
onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
628
|
+
onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
622
629
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
|
623
630
|
onRowDrop?: ({ event, draggedRow, targetRow, }: {
|
|
624
631
|
event: DragEvent<HTMLButtonElement>;
|
package/package.json
CHANGED
|
@@ -96,23 +96,21 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
|
|
|
96
96
|
tableId: string;
|
|
97
97
|
localization: MRT_Localization;
|
|
98
98
|
};
|
|
99
|
-
setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
|
100
|
-
setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
|
101
|
-
setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
|
102
|
-
setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
|
103
99
|
setColumnFilterFns: Dispatch<
|
|
104
|
-
SetStateAction<{
|
|
105
|
-
[key: string]: MRT_FilterOption;
|
|
106
|
-
}>
|
|
100
|
+
SetStateAction<{ [key: string]: MRT_FilterOption }>
|
|
107
101
|
>;
|
|
102
|
+
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
|
103
|
+
setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
|
104
|
+
setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
|
105
|
+
setEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
|
106
|
+
setEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
|
108
107
|
setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
|
|
109
|
-
|
|
108
|
+
setHoveredColumn: Dispatch<
|
|
110
109
|
SetStateAction<MRT_Column<TData> | { id: string } | null>
|
|
111
110
|
>;
|
|
112
|
-
|
|
111
|
+
setHoveredRow: Dispatch<
|
|
113
112
|
SetStateAction<MRT_Row<TData> | { id: string } | null>
|
|
114
113
|
>;
|
|
115
|
-
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
|
116
114
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
|
117
115
|
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
|
118
116
|
setShowFilters: Dispatch<SetStateAction<boolean>>;
|
|
@@ -121,15 +119,15 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
|
|
|
121
119
|
|
|
122
120
|
export type MRT_TableState<TData extends Record<string, any> = {}> =
|
|
123
121
|
TableState & {
|
|
124
|
-
currentDraggingColumn: MRT_Column<TData> | null;
|
|
125
|
-
currentDraggingRow: MRT_Row<TData> | null;
|
|
126
|
-
currentEditingCell: MRT_Cell<TData> | null;
|
|
127
|
-
currentEditingRow: MRT_Row<TData> | null;
|
|
128
122
|
columnFilterFns: Record<string, MRT_FilterOption>;
|
|
129
|
-
globalFilterFn: Record<string, MRT_FilterOption>;
|
|
130
|
-
currentHoveredColumn: MRT_Column<TData> | { id: string } | null;
|
|
131
|
-
currentHoveredRow: MRT_Row<TData> | { id: string } | null;
|
|
132
123
|
density: 'comfortable' | 'compact' | 'spacious';
|
|
124
|
+
draggingColumn: MRT_Column<TData> | null;
|
|
125
|
+
draggingRow: MRT_Row<TData> | null;
|
|
126
|
+
editingCell: MRT_Cell<TData> | null;
|
|
127
|
+
editingRow: MRT_Row<TData> | null;
|
|
128
|
+
globalFilterFn: MRT_FilterOption;
|
|
129
|
+
hoveredColumn: MRT_Column<TData> | { id: string } | null;
|
|
130
|
+
hoveredRow: MRT_Row<TData> | { id: string } | null;
|
|
133
131
|
isFullScreen: boolean;
|
|
134
132
|
isLoading: boolean;
|
|
135
133
|
showAlertBanner: boolean;
|
|
@@ -340,19 +338,23 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
|
|
|
340
338
|
cell,
|
|
341
339
|
event,
|
|
342
340
|
table,
|
|
341
|
+
value,
|
|
343
342
|
}: {
|
|
344
343
|
event: FocusEvent<HTMLInputElement>;
|
|
345
344
|
cell: MRT_Cell<TData>;
|
|
346
345
|
table: MRT_TableInstance<TData>;
|
|
346
|
+
value: string;
|
|
347
347
|
}) => void;
|
|
348
348
|
onCellEditChange?: ({
|
|
349
349
|
cell,
|
|
350
350
|
event,
|
|
351
351
|
table,
|
|
352
|
+
value,
|
|
352
353
|
}: {
|
|
353
354
|
event: ChangeEvent<HTMLInputElement>;
|
|
354
355
|
cell: MRT_Cell<TData>;
|
|
355
356
|
table: MRT_TableInstance<TData>;
|
|
357
|
+
value: string;
|
|
356
358
|
}) => void;
|
|
357
359
|
sortingFn?: MRT_SortingFn;
|
|
358
360
|
};
|
|
@@ -397,7 +399,7 @@ export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
|
|
|
397
399
|
getAllCells: () => MRT_Cell<TData>[];
|
|
398
400
|
getVisibleCells: () => MRT_Cell<TData>[];
|
|
399
401
|
subRows?: MRT_Row<TData>[];
|
|
400
|
-
_valuesCache
|
|
402
|
+
_valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
|
401
403
|
};
|
|
402
404
|
|
|
403
405
|
export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
|
|
@@ -445,6 +447,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
|
445
447
|
Partial<TableOptions<TData>>,
|
|
446
448
|
| 'columns'
|
|
447
449
|
| 'data'
|
|
450
|
+
| 'defaultColumn'
|
|
451
|
+
| 'enableRowSelection'
|
|
448
452
|
| 'expandRowsFn'
|
|
449
453
|
| 'initialState'
|
|
450
454
|
| 'onStateChange'
|
|
@@ -453,6 +457,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
|
453
457
|
columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
|
|
454
458
|
columns: MRT_ColumnDef<TData>[];
|
|
455
459
|
data: TData[];
|
|
460
|
+
defaultColumn?: Partial<MRT_ColumnDef<TData>>;
|
|
456
461
|
displayColumnDefOptions?: Partial<{
|
|
457
462
|
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
|
458
463
|
}>;
|
|
@@ -474,6 +479,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
|
474
479
|
enableRowDragging?: boolean;
|
|
475
480
|
enableRowNumbers?: boolean;
|
|
476
481
|
enableRowOrdering?: boolean;
|
|
482
|
+
enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
|
|
477
483
|
enableRowVirtualization?: boolean;
|
|
478
484
|
enableSelectAll?: boolean;
|
|
479
485
|
enableStickyHeader?: boolean;
|
|
@@ -691,19 +697,23 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
|
691
697
|
cell,
|
|
692
698
|
event,
|
|
693
699
|
table,
|
|
700
|
+
value,
|
|
694
701
|
}: {
|
|
695
702
|
event: FocusEvent<HTMLInputElement>;
|
|
696
703
|
cell: MRT_Cell<TData>;
|
|
697
704
|
table: MRT_TableInstance<TData>;
|
|
705
|
+
value: string;
|
|
698
706
|
}) => void;
|
|
699
707
|
onCellEditChange?: ({
|
|
700
708
|
cell,
|
|
701
709
|
event,
|
|
702
710
|
table,
|
|
711
|
+
value,
|
|
703
712
|
}: {
|
|
704
713
|
event: ChangeEvent<HTMLInputElement>;
|
|
705
714
|
cell: MRT_Cell<TData>;
|
|
706
715
|
table: MRT_TableInstance<TData>;
|
|
716
|
+
value: string;
|
|
707
717
|
}) => void;
|
|
708
718
|
onColumnDrop?: ({
|
|
709
719
|
event,
|
|
@@ -714,22 +724,24 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
|
714
724
|
draggedColumn: MRT_Column<TData>;
|
|
715
725
|
targetColumn: MRT_Column<TData> | { id: string } | null;
|
|
716
726
|
}) => void;
|
|
717
|
-
onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
718
|
-
onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
719
|
-
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
|
720
|
-
onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
721
|
-
onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
|
|
722
|
-
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
|
723
|
-
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
724
|
-
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
725
727
|
onDensityChange?: OnChangeFn<boolean>;
|
|
728
|
+
onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
729
|
+
onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
726
730
|
onEditRowSubmit?: ({
|
|
727
731
|
row,
|
|
728
732
|
table,
|
|
733
|
+
values,
|
|
729
734
|
}: {
|
|
730
735
|
row: MRT_Row<TData>;
|
|
731
736
|
table: MRT_TableInstance<TData>;
|
|
737
|
+
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
|
732
738
|
}) => Promise<void> | void;
|
|
739
|
+
onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
|
740
|
+
onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
741
|
+
onFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
|
|
742
|
+
onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
|
743
|
+
onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
|
744
|
+
onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
733
745
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
|
734
746
|
onRowDrop?: ({
|
|
735
747
|
event,
|
|
@@ -50,14 +50,14 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
|
50
50
|
rowNumberMode,
|
|
51
51
|
tableId,
|
|
52
52
|
},
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
setEditingCell,
|
|
54
|
+
setHoveredColumn,
|
|
55
55
|
} = table;
|
|
56
56
|
const {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
draggingColumn,
|
|
58
|
+
editingCell,
|
|
59
|
+
editingRow,
|
|
60
|
+
hoveredColumn,
|
|
61
61
|
density,
|
|
62
62
|
isLoading,
|
|
63
63
|
showSkeletons,
|
|
@@ -88,8 +88,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
|
88
88
|
const isEditing =
|
|
89
89
|
isEditable &&
|
|
90
90
|
(editingMode === 'table' ||
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
editingRow?.id === row.id ||
|
|
92
|
+
editingCell?.id === cell.id);
|
|
93
93
|
|
|
94
94
|
const [skeletonWidth, setSkeletonWidth] = useState(0);
|
|
95
95
|
useEffect(
|
|
@@ -113,7 +113,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
|
113
113
|
columnDef.enableEditing !== false &&
|
|
114
114
|
editingMode === 'cell'
|
|
115
115
|
) {
|
|
116
|
-
|
|
116
|
+
setEditingCell(cell);
|
|
117
117
|
setTimeout(() => {
|
|
118
118
|
const textField = document.getElementById(
|
|
119
119
|
`mrt-${tableId}-edit-cell-text-field-${cell.id}`,
|
|
@@ -144,20 +144,20 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
|
144
144
|
};
|
|
145
145
|
|
|
146
146
|
const handleDragEnter = (_e: DragEvent) => {
|
|
147
|
-
if (enableGrouping &&
|
|
148
|
-
|
|
147
|
+
if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
|
|
148
|
+
setHoveredColumn(null);
|
|
149
149
|
}
|
|
150
|
-
if (enableColumnOrdering &&
|
|
151
|
-
|
|
150
|
+
if (enableColumnOrdering && draggingColumn) {
|
|
151
|
+
setHoveredColumn(
|
|
152
152
|
columnDef.enableColumnOrdering !== false ? column : null,
|
|
153
153
|
);
|
|
154
154
|
}
|
|
155
155
|
};
|
|
156
156
|
|
|
157
157
|
const draggingBorder =
|
|
158
|
-
|
|
158
|
+
draggingColumn?.id === column.id
|
|
159
159
|
? `1px dashed ${theme.palette.text.secondary}`
|
|
160
|
-
:
|
|
160
|
+
: hoveredColumn?.id === column.id
|
|
161
161
|
? `2px dashed ${theme.palette.primary.main}`
|
|
162
162
|
: undefined;
|
|
163
163
|
|
|
@@ -197,8 +197,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
|
197
197
|
? `${column.getStart('left')}px`
|
|
198
198
|
: undefined,
|
|
199
199
|
opacity:
|
|
200
|
-
|
|
201
|
-
currentHoveredColumn?.id === column.id
|
|
200
|
+
draggingColumn?.id === column.id || hoveredColumn?.id === column.id
|
|
202
201
|
? 0.5
|
|
203
202
|
: 1,
|
|
204
203
|
overflow: 'hidden',
|
|
@@ -232,7 +231,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
|
232
231
|
transition: 'all 0.2s ease-in-out',
|
|
233
232
|
whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
|
|
234
233
|
zIndex:
|
|
235
|
-
|
|
234
|
+
draggingColumn?.id === column.id
|
|
236
235
|
? 2
|
|
237
236
|
: column.getIsPinned()
|
|
238
237
|
? 1
|
|
@@ -16,9 +16,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
|
|
|
16
16
|
getIsSomeColumnsPinned,
|
|
17
17
|
getState,
|
|
18
18
|
options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel },
|
|
19
|
-
|
|
19
|
+
setHoveredRow,
|
|
20
20
|
} = table;
|
|
21
|
-
const {
|
|
21
|
+
const { draggingRow, hoveredRow } = getState();
|
|
22
22
|
|
|
23
23
|
const tableRowProps =
|
|
24
24
|
muiTableBodyRowProps instanceof Function
|
|
@@ -26,17 +26,17 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
|
|
|
26
26
|
: muiTableBodyRowProps;
|
|
27
27
|
|
|
28
28
|
const handleDragEnter = (_e: DragEvent) => {
|
|
29
|
-
if (enableRowOrdering &&
|
|
30
|
-
|
|
29
|
+
if (enableRowOrdering && draggingRow) {
|
|
30
|
+
setHoveredRow(row);
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
const rowRef = useRef<HTMLTableRowElement>(null);
|
|
35
35
|
|
|
36
36
|
const draggingBorder =
|
|
37
|
-
|
|
37
|
+
draggingRow?.id === row.id
|
|
38
38
|
? `1px dashed ${theme.palette.text.secondary}`
|
|
39
|
-
:
|
|
39
|
+
: hoveredRow?.id === row.id
|
|
40
40
|
? `2px dashed ${theme.palette.primary.main}`
|
|
41
41
|
: undefined;
|
|
42
42
|
|
|
@@ -57,10 +57,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
|
|
|
57
57
|
sx={(theme) => ({
|
|
58
58
|
backgroundColor: lighten(theme.palette.background.default, 0.06),
|
|
59
59
|
opacity:
|
|
60
|
-
|
|
61
|
-
currentHoveredRow?.id === row.id
|
|
62
|
-
? 0.5
|
|
63
|
-
: 1,
|
|
60
|
+
draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
|
|
64
61
|
transition: 'all 0.2s ease-in-out',
|
|
65
62
|
'&:hover td': {
|
|
66
63
|
backgroundColor:
|
|
@@ -24,17 +24,17 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
|
|
|
24
24
|
|
|
25
25
|
const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
|
|
26
26
|
e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
|
|
27
|
-
table.
|
|
27
|
+
table.setDraggingRow(cell.row as any);
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
|
|
31
31
|
onRowDrop?.({
|
|
32
32
|
event,
|
|
33
|
-
draggedRow: table.getState().
|
|
34
|
-
targetRow: table.getState().
|
|
33
|
+
draggedRow: table.getState().draggingRow as any,
|
|
34
|
+
targetRow: table.getState().hoveredRow as any,
|
|
35
35
|
});
|
|
36
|
-
table.
|
|
37
|
-
table.
|
|
36
|
+
table.setDraggingRow(null);
|
|
37
|
+
table.setHoveredRow(null);
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
return (
|
|
@@ -15,18 +15,22 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
|
|
|
15
15
|
localization,
|
|
16
16
|
onEditRowSubmit,
|
|
17
17
|
},
|
|
18
|
-
|
|
18
|
+
setEditingRow,
|
|
19
19
|
} = table;
|
|
20
|
-
const {
|
|
20
|
+
const { editingRow } = getState();
|
|
21
21
|
|
|
22
22
|
const handleCancel = () => {
|
|
23
|
-
row._valuesCache = row.original
|
|
24
|
-
|
|
23
|
+
row._valuesCache = { ...row.original };
|
|
24
|
+
setEditingRow(null);
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
const handleSave = () => {
|
|
28
|
-
onEditRowSubmit?.({
|
|
29
|
-
|
|
28
|
+
onEditRowSubmit?.({
|
|
29
|
+
row: editingRow ?? row,
|
|
30
|
+
table,
|
|
31
|
+
values: editingRow?._valuesCache ?? { ...row.original },
|
|
32
|
+
});
|
|
33
|
+
setEditingRow(null);
|
|
30
34
|
};
|
|
31
35
|
|
|
32
36
|
return (
|
|
@@ -30,10 +30,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
|
|
|
30
30
|
renderRowActionMenuItems,
|
|
31
31
|
renderRowActions,
|
|
32
32
|
},
|
|
33
|
-
|
|
33
|
+
setEditingRow,
|
|
34
34
|
} = table;
|
|
35
35
|
|
|
36
|
-
const {
|
|
36
|
+
const { editingRow } = getState();
|
|
37
37
|
|
|
38
38
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
39
39
|
|
|
@@ -44,7 +44,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
|
|
|
44
44
|
};
|
|
45
45
|
|
|
46
46
|
const handleStartEditMode = () => {
|
|
47
|
-
|
|
47
|
+
setEditingRow({ ...row });
|
|
48
48
|
setAnchorEl(null);
|
|
49
49
|
};
|
|
50
50
|
|
|
@@ -52,7 +52,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
|
|
|
52
52
|
<>
|
|
53
53
|
{renderRowActions ? (
|
|
54
54
|
<>{renderRowActions({ row, table })}</>
|
|
55
|
-
) : row.id ===
|
|
55
|
+
) : row.id === editingRow?.id ? (
|
|
56
56
|
<MRT_EditActionButtons row={row} table={table} />
|
|
57
57
|
) : !renderRowActionMenuItems && enableEditing ? (
|
|
58
58
|
<Tooltip placement="right" arrow title={localization.edit}>
|
|
@@ -26,14 +26,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
|
26
26
|
enableMultiSort,
|
|
27
27
|
muiTableHeadCellProps,
|
|
28
28
|
},
|
|
29
|
-
|
|
29
|
+
setHoveredColumn,
|
|
30
30
|
} = table;
|
|
31
|
-
const {
|
|
32
|
-
|
|
33
|
-
currentDraggingColumn,
|
|
34
|
-
currentHoveredColumn,
|
|
35
|
-
showColumnFilters,
|
|
36
|
-
} = getState();
|
|
31
|
+
const { density, draggingColumn, hoveredColumn, showColumnFilters } =
|
|
32
|
+
getState();
|
|
37
33
|
const { column } = header;
|
|
38
34
|
const { columnDef } = column;
|
|
39
35
|
const { columnDefType } = columnDef;
|
|
@@ -71,20 +67,20 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
|
71
67
|
};
|
|
72
68
|
|
|
73
69
|
const handleDragEnter = (_e: DragEvent) => {
|
|
74
|
-
if (enableGrouping &&
|
|
75
|
-
|
|
70
|
+
if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
|
|
71
|
+
setHoveredColumn(null);
|
|
76
72
|
}
|
|
77
|
-
if (enableColumnOrdering &&
|
|
78
|
-
|
|
73
|
+
if (enableColumnOrdering && draggingColumn) {
|
|
74
|
+
setHoveredColumn(
|
|
79
75
|
columnDef.enableColumnOrdering !== false ? column : null,
|
|
80
76
|
);
|
|
81
77
|
}
|
|
82
78
|
};
|
|
83
79
|
|
|
84
80
|
const draggingBorder =
|
|
85
|
-
|
|
81
|
+
draggingColumn?.id === column.id
|
|
86
82
|
? `1px dashed ${theme.palette.text.secondary}`
|
|
87
|
-
:
|
|
83
|
+
: hoveredColumn?.id === column.id
|
|
88
84
|
? `2px dashed ${theme.palette.primary.main}`
|
|
89
85
|
: undefined;
|
|
90
86
|
|
|
@@ -131,8 +127,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
|
131
127
|
: undefined,
|
|
132
128
|
overflow: 'visible',
|
|
133
129
|
opacity:
|
|
134
|
-
|
|
135
|
-
currentHoveredColumn?.id === column.id
|
|
130
|
+
draggingColumn?.id === column.id || hoveredColumn?.id === column.id
|
|
136
131
|
? 0.5
|
|
137
132
|
: 1,
|
|
138
133
|
p:
|
|
@@ -169,7 +164,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
|
169
164
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
|
170
165
|
verticalAlign: 'top',
|
|
171
166
|
zIndex:
|
|
172
|
-
column.getIsResizing() ||
|
|
167
|
+
column.getIsResizing() || draggingColumn?.id === column.id
|
|
173
168
|
? 3
|
|
174
169
|
: column.getIsPinned() && columnDefType !== 'group'
|
|
175
170
|
? 2
|