material-react-table 3.0.0-beta.1 → 3.0.0-beta.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/dist/index.d.ts +87 -87
- package/dist/index.esm.js +79 -42
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +79 -42
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/body/MRT_TableBodyCell.tsx +9 -11
- package/src/components/footer/MRT_TableFooterCell.tsx +8 -9
- package/src/components/head/MRT_TableHeadCell.tsx +10 -11
- package/src/hooks/useMRT_TableOptions.ts +2 -2
- package/src/types.ts +66 -66
- package/src/utils/cell.utils.ts +57 -11
package/package.json
CHANGED
@@ -18,7 +18,7 @@ import {
|
|
18
18
|
} from '../../types';
|
19
19
|
import {
|
20
20
|
isCellEditable,
|
21
|
-
|
21
|
+
cellKeyboardShortcuts,
|
22
22
|
openEditingCell,
|
23
23
|
} from '../../utils/cell.utils';
|
24
24
|
import { getCommonMRTCellStyles } from '../../utils/style.utils';
|
@@ -58,7 +58,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
58
58
|
enableColumnOrdering,
|
59
59
|
enableColumnPinning,
|
60
60
|
enableGrouping,
|
61
|
-
|
61
|
+
enableKeyboardShortcuts,
|
62
62
|
layoutMode,
|
63
63
|
mrtTheme: { draggingBorderColor },
|
64
64
|
muiSkeletonProps,
|
@@ -233,14 +233,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
233
233
|
};
|
234
234
|
|
235
235
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
});
|
243
|
-
}
|
236
|
+
cellKeyboardShortcuts({
|
237
|
+
cell,
|
238
|
+
cellValue: cell.getValue<string>(),
|
239
|
+
event,
|
240
|
+
table,
|
241
|
+
});
|
244
242
|
tableCellProps?.onKeyDown?.(event);
|
245
243
|
};
|
246
244
|
|
@@ -249,7 +247,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
|
|
249
247
|
align={theme.direction === 'rtl' ? 'right' : 'left'}
|
250
248
|
data-index={staticColumnIndex}
|
251
249
|
data-pinned={!!isColumnPinned || undefined}
|
252
|
-
tabIndex={
|
250
|
+
tabIndex={enableKeyboardShortcuts ? 0 : undefined}
|
253
251
|
{...tableCellProps}
|
254
252
|
onKeyDown={handleKeyDown}
|
255
253
|
onContextMenu={handleContextMenu}
|
@@ -7,7 +7,7 @@ import {
|
|
7
7
|
} from '../../types';
|
8
8
|
import { getCommonMRTCellStyles } from '../../utils/style.utils';
|
9
9
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
10
|
-
import {
|
10
|
+
import { cellKeyboardShortcuts } from '../../utils/cell.utils';
|
11
11
|
|
12
12
|
export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
|
13
13
|
extends TableCellProps {
|
@@ -28,7 +28,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
|
|
28
28
|
options: {
|
29
29
|
enableColumnPinning,
|
30
30
|
muiTableFooterCellProps,
|
31
|
-
|
31
|
+
enableKeyboardShortcuts,
|
32
32
|
},
|
33
33
|
} = table;
|
34
34
|
const { density } = getState();
|
@@ -49,13 +49,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
|
|
49
49
|
};
|
50
50
|
|
51
51
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
});
|
58
|
-
}
|
52
|
+
cellKeyboardShortcuts({
|
53
|
+
event,
|
54
|
+
cellValue: footer.column.columnDef.footer,
|
55
|
+
table,
|
56
|
+
});
|
59
57
|
tableCellProps?.onKeyDown?.(event);
|
60
58
|
};
|
61
59
|
|
@@ -71,6 +69,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
|
|
71
69
|
colSpan={footer.colSpan}
|
72
70
|
data-index={staticColumnIndex}
|
73
71
|
data-pinned={!!isColumnPinned || undefined}
|
72
|
+
tabIndex={enableKeyboardShortcuts ? 0 : undefined}
|
74
73
|
variant="footer"
|
75
74
|
{...tableCellProps}
|
76
75
|
onKeyDown={handleKeyDown}
|
@@ -17,7 +17,7 @@ import {
|
|
17
17
|
} from '../../types';
|
18
18
|
import { getCommonMRTCellStyles } from '../../utils/style.utils';
|
19
19
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
20
|
-
import {
|
20
|
+
import { cellKeyboardShortcuts } from '../../utils/cell.utils';
|
21
21
|
|
22
22
|
export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
|
23
23
|
extends TableCellProps {
|
@@ -41,12 +41,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
|
41
41
|
columnFilterDisplayMode,
|
42
42
|
columnResizeDirection,
|
43
43
|
columnResizeMode,
|
44
|
+
enableKeyboardShortcuts,
|
44
45
|
enableColumnActions,
|
45
46
|
enableColumnDragging,
|
46
47
|
enableColumnOrdering,
|
47
48
|
enableColumnPinning,
|
48
49
|
enableGrouping,
|
49
|
-
enableCellNavigation,
|
50
50
|
enableMultiSort,
|
51
51
|
layoutMode,
|
52
52
|
mrtTheme: { draggingBorderColor },
|
@@ -150,14 +150,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
|
150
150
|
};
|
151
151
|
|
152
152
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
}
|
153
|
+
cellKeyboardShortcuts({
|
154
|
+
event,
|
155
|
+
cellValue: header.column.columnDef.header,
|
156
|
+
table,
|
157
|
+
header,
|
158
|
+
});
|
159
|
+
|
161
160
|
tableCellProps?.onKeyDown?.(event);
|
162
161
|
};
|
163
162
|
|
@@ -199,7 +198,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
|
|
199
198
|
}
|
200
199
|
}
|
201
200
|
}}
|
202
|
-
tabIndex={
|
201
|
+
tabIndex={enableKeyboardShortcuts ? 0 : undefined}
|
203
202
|
{...tableCellProps}
|
204
203
|
onKeyDown={handleKeyDown}
|
205
204
|
sx={(theme: Theme) => ({
|
@@ -76,7 +76,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
|
|
76
76
|
enableGlobalFilterRankedResults = true,
|
77
77
|
enableGrouping = false,
|
78
78
|
enableHiding = true,
|
79
|
-
|
79
|
+
enableKeyboardShortcuts = true,
|
80
80
|
enableMultiRowSelection = true,
|
81
81
|
enableMultiSort = true,
|
82
82
|
enablePagination = true,
|
@@ -204,7 +204,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
|
|
204
204
|
enableGlobalFilterRankedResults,
|
205
205
|
enableGrouping,
|
206
206
|
enableHiding,
|
207
|
-
|
207
|
+
enableKeyboardShortcuts,
|
208
208
|
enableMultiRowSelection,
|
209
209
|
enableMultiSort,
|
210
210
|
enablePagination,
|
package/src/types.ts
CHANGED
@@ -184,9 +184,10 @@ export interface MRT_Localization {
|
|
184
184
|
filterFuzzy: string;
|
185
185
|
filterGreaterThan: string;
|
186
186
|
filterGreaterThanOrEqualTo: string;
|
187
|
-
filterInNumberRange: string;
|
188
187
|
filterIncludesString: string;
|
189
188
|
filterIncludesStringSensitive: string;
|
189
|
+
filteringByColumn: string;
|
190
|
+
filterInNumberRange: string;
|
190
191
|
filterLessThan: string;
|
191
192
|
filterLessThanOrEqualTo: string;
|
192
193
|
filterMode: string;
|
@@ -194,7 +195,6 @@ export interface MRT_Localization {
|
|
194
195
|
filterNotEquals: string;
|
195
196
|
filterStartsWith: string;
|
196
197
|
filterWeakEquals: string;
|
197
|
-
filteringByColumn: string;
|
198
198
|
goToFirstPage: string;
|
199
199
|
goToLastPage: string;
|
200
200
|
goToNextPage: string;
|
@@ -412,6 +412,22 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
412
412
|
| 'id'
|
413
413
|
| 'sortingFn'
|
414
414
|
> {
|
415
|
+
/**
|
416
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
417
|
+
* Specify a function here to point to the correct property in the data object.
|
418
|
+
*
|
419
|
+
* @example accessorFn: (row) => row.username
|
420
|
+
*/
|
421
|
+
accessorFn?: (originalRow: TData) => TValue;
|
422
|
+
/**
|
423
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
424
|
+
* Specify which key in the row this column should use to access the correct data.
|
425
|
+
* Also supports Deep Key Dot Notation.
|
426
|
+
*
|
427
|
+
* @example accessorKey: 'username' //simple
|
428
|
+
* @example accessorKey: 'name.firstName' //deep key dot notation
|
429
|
+
*/
|
430
|
+
accessorKey?: DeepKeys<TData> | (string & {});
|
415
431
|
AggregatedCell?: (props: {
|
416
432
|
cell: MRT_Cell<TData, TValue>;
|
417
433
|
column: MRT_Column<TData, TValue>;
|
@@ -420,6 +436,7 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
420
436
|
staticColumnIndex?: number;
|
421
437
|
staticRowIndex?: number;
|
422
438
|
}) => ReactNode;
|
439
|
+
aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
|
423
440
|
Cell?: (props: {
|
424
441
|
cell: MRT_Cell<TData, TValue>;
|
425
442
|
column: MRT_Column<TData, TValue>;
|
@@ -430,63 +447,6 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
430
447
|
staticRowIndex?: number;
|
431
448
|
table: MRT_TableInstance<TData>;
|
432
449
|
}) => ReactNode;
|
433
|
-
Edit?: (props: {
|
434
|
-
cell: MRT_Cell<TData, TValue>;
|
435
|
-
column: MRT_Column<TData, TValue>;
|
436
|
-
row: MRT_Row<TData>;
|
437
|
-
table: MRT_TableInstance<TData>;
|
438
|
-
}) => ReactNode;
|
439
|
-
Filter?: (props: {
|
440
|
-
column: MRT_Column<TData, TValue>;
|
441
|
-
header: MRT_Header<TData>;
|
442
|
-
rangeFilterIndex?: number;
|
443
|
-
table: MRT_TableInstance<TData>;
|
444
|
-
}) => ReactNode;
|
445
|
-
Footer?:
|
446
|
-
| ((props: {
|
447
|
-
column: MRT_Column<TData, TValue>;
|
448
|
-
footer: MRT_Header<TData>;
|
449
|
-
table: MRT_TableInstance<TData>;
|
450
|
-
}) => ReactNode)
|
451
|
-
| ReactNode;
|
452
|
-
GroupedCell?: (props: {
|
453
|
-
cell: MRT_Cell<TData, TValue>;
|
454
|
-
column: MRT_Column<TData, TValue>;
|
455
|
-
row: MRT_Row<TData>;
|
456
|
-
table: MRT_TableInstance<TData>;
|
457
|
-
staticColumnIndex?: number;
|
458
|
-
staticRowIndex?: number;
|
459
|
-
}) => ReactNode;
|
460
|
-
Header?:
|
461
|
-
| ((props: {
|
462
|
-
column: MRT_Column<TData, TValue>;
|
463
|
-
header: MRT_Header<TData>;
|
464
|
-
table: MRT_TableInstance<TData>;
|
465
|
-
}) => ReactNode)
|
466
|
-
| ReactNode;
|
467
|
-
PlaceholderCell?: (props: {
|
468
|
-
cell: MRT_Cell<TData, TValue>;
|
469
|
-
column: MRT_Column<TData, TValue>;
|
470
|
-
row: MRT_Row<TData>;
|
471
|
-
table: MRT_TableInstance<TData>;
|
472
|
-
}) => ReactNode;
|
473
|
-
/**
|
474
|
-
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
475
|
-
* Specify a function here to point to the correct property in the data object.
|
476
|
-
*
|
477
|
-
* @example accessorFn: (row) => row.username
|
478
|
-
*/
|
479
|
-
accessorFn?: (originalRow: TData) => TValue;
|
480
|
-
/**
|
481
|
-
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
482
|
-
* Specify which key in the row this column should use to access the correct data.
|
483
|
-
* Also supports Deep Key Dot Notation.
|
484
|
-
*
|
485
|
-
* @example accessorKey: 'username' //simple
|
486
|
-
* @example accessorKey: 'name.firstName' //deep key dot notation
|
487
|
-
*/
|
488
|
-
accessorKey?: DeepKeys<TData> | (string & {});
|
489
|
-
aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
|
490
450
|
/**
|
491
451
|
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
492
452
|
* Leave this blank if you are just creating a normal data column.
|
@@ -500,6 +460,12 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
500
460
|
LiteralUnion<string & MRT_FilterOption>
|
501
461
|
> | null;
|
502
462
|
columns?: MRT_ColumnDef<TData, TValue>[];
|
463
|
+
Edit?: (props: {
|
464
|
+
cell: MRT_Cell<TData, TValue>;
|
465
|
+
column: MRT_Column<TData, TValue>;
|
466
|
+
row: MRT_Row<TData>;
|
467
|
+
table: MRT_TableInstance<TData>;
|
468
|
+
}) => ReactNode;
|
503
469
|
editSelectOptions?:
|
504
470
|
| ((props: {
|
505
471
|
cell: MRT_Cell<TData, TValue>;
|
@@ -519,6 +485,12 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
519
485
|
enableColumnOrdering?: boolean;
|
520
486
|
enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
|
521
487
|
enableFilterMatchHighlighting?: boolean;
|
488
|
+
Filter?: (props: {
|
489
|
+
column: MRT_Column<TData, TValue>;
|
490
|
+
header: MRT_Header<TData>;
|
491
|
+
rangeFilterIndex?: number;
|
492
|
+
table: MRT_TableInstance<TData>;
|
493
|
+
}) => ReactNode;
|
522
494
|
filterFn?: MRT_FilterFn<TData>;
|
523
495
|
filterSelectOptions?: DropdownOption[];
|
524
496
|
filterVariant?:
|
@@ -539,6 +511,21 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
539
511
|
* footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
|
540
512
|
*/
|
541
513
|
footer?: string;
|
514
|
+
Footer?:
|
515
|
+
| ((props: {
|
516
|
+
column: MRT_Column<TData, TValue>;
|
517
|
+
footer: MRT_Header<TData>;
|
518
|
+
table: MRT_TableInstance<TData>;
|
519
|
+
}) => ReactNode)
|
520
|
+
| ReactNode;
|
521
|
+
GroupedCell?: (props: {
|
522
|
+
cell: MRT_Cell<TData, TValue>;
|
523
|
+
column: MRT_Column<TData, TValue>;
|
524
|
+
row: MRT_Row<TData>;
|
525
|
+
table: MRT_TableInstance<TData>;
|
526
|
+
staticColumnIndex?: number;
|
527
|
+
staticRowIndex?: number;
|
528
|
+
}) => ReactNode;
|
542
529
|
/**
|
543
530
|
* If `layoutMode` is `'grid'` or `'grid-no-grow'`, you can specify the flex grow value for individual columns to still grow and take up remaining space, or set to `false`/0 to not grow.
|
544
531
|
*/
|
@@ -547,6 +534,13 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
547
534
|
* header must be a string. If you want custom JSX to render the header, you can also specify a `Header` option. (Capital H)
|
548
535
|
*/
|
549
536
|
header: string;
|
537
|
+
Header?:
|
538
|
+
| ((props: {
|
539
|
+
column: MRT_Column<TData, TValue>;
|
540
|
+
header: MRT_Header<TData>;
|
541
|
+
table: MRT_TableInstance<TData>;
|
542
|
+
}) => ReactNode)
|
543
|
+
| ReactNode;
|
550
544
|
/**
|
551
545
|
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
552
546
|
*
|
@@ -651,6 +645,12 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
|
|
651
645
|
table: MRT_TableInstance<TData>;
|
652
646
|
}) => TableCellProps)
|
653
647
|
| TableCellProps;
|
648
|
+
PlaceholderCell?: (props: {
|
649
|
+
cell: MRT_Cell<TData, TValue>;
|
650
|
+
column: MRT_Column<TData, TValue>;
|
651
|
+
row: MRT_Row<TData>;
|
652
|
+
table: MRT_TableInstance<TData>;
|
653
|
+
}) => ReactNode;
|
654
654
|
renderCellActionMenuItems?: (props: {
|
655
655
|
cell: MRT_Cell<TData>;
|
656
656
|
closeMenu: () => void;
|
@@ -813,12 +813,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
|
|
813
813
|
columnFilterModeOptions?: Array<
|
814
814
|
LiteralUnion<string & MRT_FilterOption>
|
815
815
|
> | null;
|
816
|
-
columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
|
817
|
-
columnVirtualizerOptions?:
|
818
|
-
| ((props: {
|
819
|
-
table: MRT_TableInstance<TData>;
|
820
|
-
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>)
|
821
|
-
| Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
|
822
816
|
/**
|
823
817
|
* The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` table option.
|
824
818
|
*
|
@@ -830,6 +824,12 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
|
|
830
824
|
* @link https://www.material-react-table.com/docs/api/column-options
|
831
825
|
*/
|
832
826
|
columns: MRT_ColumnDef<TData, any>[];
|
827
|
+
columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
|
828
|
+
columnVirtualizerOptions?:
|
829
|
+
| ((props: {
|
830
|
+
table: MRT_TableInstance<TData>;
|
831
|
+
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>)
|
832
|
+
| Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
|
833
833
|
createDisplayMode?: 'custom' | 'modal' | 'row';
|
834
834
|
/**
|
835
835
|
* Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
|
@@ -870,7 +870,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
|
|
870
870
|
enableFullScreenToggle?: boolean;
|
871
871
|
enableGlobalFilterModes?: boolean;
|
872
872
|
enableGlobalFilterRankedResults?: boolean;
|
873
|
-
|
873
|
+
enableKeyboardShortcuts?: boolean;
|
874
874
|
enablePagination?: boolean;
|
875
875
|
enableRowActions?: boolean;
|
876
876
|
enableRowDragging?: boolean;
|
package/src/utils/cell.utils.ts
CHANGED
@@ -10,6 +10,13 @@ import {
|
|
10
10
|
} from './row.utils';
|
11
11
|
import { parseFromValuesOrFunc } from './utils';
|
12
12
|
|
13
|
+
const isWinCtrlMacMeta = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
|
14
|
+
return (
|
15
|
+
(event.ctrlKey && navigator.platform.toLowerCase().includes('win')) ||
|
16
|
+
(event.metaKey && navigator.platform.toLowerCase().includes('mac'))
|
17
|
+
);
|
18
|
+
};
|
19
|
+
|
13
20
|
export const isCellEditable = <TData extends MRT_RowData>({
|
14
21
|
cell,
|
15
22
|
table,
|
@@ -54,7 +61,7 @@ export const openEditingCell = <TData extends MRT_RowData>({
|
|
54
61
|
}
|
55
62
|
};
|
56
63
|
|
57
|
-
export const
|
64
|
+
export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
|
58
65
|
cell,
|
59
66
|
cellElements,
|
60
67
|
cellValue,
|
@@ -73,10 +80,14 @@ export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
|
|
73
80
|
parentElement?: HTMLTableRowElement;
|
74
81
|
table: MRT_TableInstance<TData>;
|
75
82
|
}) => {
|
76
|
-
if (
|
83
|
+
if (!table.options.enableKeyboardShortcuts) return;
|
84
|
+
const currentCell = event.currentTarget;
|
85
|
+
|
86
|
+
if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
|
77
87
|
navigator.clipboard.writeText(cellValue);
|
78
88
|
} else if (['Enter', ' '].includes(event.key)) {
|
79
89
|
if (cell?.column?.id === 'mrt-row-select') {
|
90
|
+
event.preventDefault();
|
80
91
|
getMRT_RowSelectionHandler({
|
81
92
|
row: cell.row,
|
82
93
|
table,
|
@@ -87,6 +98,7 @@ export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
|
|
87
98
|
header?.column?.id === 'mrt-row-select' &&
|
88
99
|
table.options.enableSelectAll
|
89
100
|
) {
|
101
|
+
event.preventDefault();
|
90
102
|
getMRT_SelectAllHandler({
|
91
103
|
table,
|
92
104
|
})(event as any);
|
@@ -95,15 +107,16 @@ export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
|
|
95
107
|
(cell.row.getCanExpand() ||
|
96
108
|
table.options.renderDetailPanel?.({ row: cell.row, table }))
|
97
109
|
) {
|
110
|
+
event.preventDefault();
|
98
111
|
cell.row.toggleExpanded();
|
99
112
|
} else if (
|
100
113
|
header?.column?.id === 'mrt-row-expand' &&
|
101
114
|
table.options.enableExpandAll
|
102
115
|
) {
|
116
|
+
event.preventDefault();
|
103
117
|
table.toggleAllRowsExpanded();
|
104
|
-
} else if (header?.column?.getCanSort()) {
|
105
|
-
header.column.toggleSorting();
|
106
118
|
} else if (cell?.column.id === 'mrt-row-pin') {
|
119
|
+
event.preventDefault();
|
107
120
|
cell.row.getIsPinned()
|
108
121
|
? cell.row.pin(false)
|
109
122
|
: cell.row.pin(
|
@@ -111,16 +124,32 @@ export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
|
|
111
124
|
? 'bottom'
|
112
125
|
: 'top',
|
113
126
|
);
|
127
|
+
} else if (header && isWinCtrlMacMeta(event)) {
|
128
|
+
const actionsButton = currentCell.querySelector(
|
129
|
+
`button[aria-label="${table.options.localization.columnActions}"]`,
|
130
|
+
);
|
131
|
+
if (actionsButton) {
|
132
|
+
(actionsButton as HTMLButtonElement).click();
|
133
|
+
}
|
134
|
+
} else if (header?.column?.getCanSort()) {
|
135
|
+
event.preventDefault();
|
136
|
+
header.column.toggleSorting();
|
114
137
|
}
|
115
138
|
} else if (
|
116
|
-
[
|
117
|
-
|
118
|
-
|
139
|
+
[
|
140
|
+
'ArrowRight',
|
141
|
+
'ArrowLeft',
|
142
|
+
'ArrowUp',
|
143
|
+
'ArrowDown',
|
144
|
+
'Home',
|
145
|
+
'End',
|
146
|
+
'PageUp',
|
147
|
+
'PageDown',
|
148
|
+
].includes(event.key)
|
119
149
|
) {
|
120
150
|
event.preventDefault();
|
121
|
-
const currentCell = event.currentTarget;
|
122
|
-
const currentRow = parentElement || currentCell.closest('tr');
|
123
151
|
|
152
|
+
const currentRow = parentElement || currentCell.closest('tr');
|
124
153
|
const tableElement = containerElement || currentCell.closest('table');
|
125
154
|
const allCells =
|
126
155
|
cellElements ||
|
@@ -146,6 +175,17 @@ export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
|
|
146
175
|
return targetCell as HTMLElement;
|
147
176
|
};
|
148
177
|
|
178
|
+
//page up/down first or last cell in column
|
179
|
+
const findBottomTopCell = (columnIndex: number, edge: 'b' | 't') => {
|
180
|
+
const row =
|
181
|
+
edge === 't'
|
182
|
+
? tableElement?.querySelector('tr')
|
183
|
+
: tableElement?.lastElementChild?.lastElementChild;
|
184
|
+
const rowCells = Array.from(row?.children || []);
|
185
|
+
const targetCell = rowCells[columnIndex];
|
186
|
+
return targetCell as HTMLElement;
|
187
|
+
};
|
188
|
+
|
149
189
|
const findAdjacentCell = (
|
150
190
|
columnIndex: number,
|
151
191
|
searchDirection: 'f' | 'b',
|
@@ -173,10 +213,16 @@ export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
|
|
173
213
|
nextCell = findAdjacentCell(currentIndex, 'f');
|
174
214
|
break;
|
175
215
|
case 'Home':
|
176
|
-
nextCell = findEdgeCell(event
|
216
|
+
nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
|
177
217
|
break;
|
178
218
|
case 'End':
|
179
|
-
nextCell = findEdgeCell(event
|
219
|
+
nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
|
220
|
+
break;
|
221
|
+
case 'PageUp':
|
222
|
+
nextCell = findBottomTopCell(currentIndex, 't');
|
223
|
+
break;
|
224
|
+
case 'PageDown':
|
225
|
+
nextCell = findBottomTopCell(currentIndex, 'b');
|
180
226
|
break;
|
181
227
|
}
|
182
228
|
|