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/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.0-beta.1",
2
+ "version": "3.0.0-beta.2",
3
3
  "license": "MIT",
4
4
  "name": "material-react-table",
5
5
  "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -18,7 +18,7 @@ import {
18
18
  } from '../../types';
19
19
  import {
20
20
  isCellEditable,
21
- cellNavigation,
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
- enableCellNavigation,
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
- if (enableCellNavigation) {
237
- cellNavigation({
238
- cell,
239
- cellValue: cell.getValue<string>(),
240
- event,
241
- table,
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={enableCellNavigation ? 0 : undefined}
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 { cellNavigation } from '../../utils/cell.utils';
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
- enableCellNavigation,
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
- if (enableCellNavigation) {
53
- cellNavigation({
54
- event,
55
- cellValue: footer.column.columnDef.footer,
56
- table,
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 { cellNavigation } from '../../utils/cell.utils';
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
- if (enableCellNavigation) {
154
- cellNavigation({
155
- event,
156
- cellValue: header.column.columnDef.header,
157
- table,
158
- header,
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={enableCellNavigation ? 0 : undefined}
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
- enableCellNavigation = true,
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
- enableCellNavigation,
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
- enableCellNavigation?: boolean;
873
+ enableKeyboardShortcuts?: boolean;
874
874
  enablePagination?: boolean;
875
875
  enableRowActions?: boolean;
876
876
  enableRowDragging?: boolean;
@@ -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 cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
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 (cellValue && (event.ctrlKey || event.metaKey) && event.key === 'c') {
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
- ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
117
- event.key,
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.ctrlKey ? 'f' : 'c', 'f');
216
+ nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
177
217
  break;
178
218
  case 'End':
179
- nextCell = findEdgeCell(event.ctrlKey ? 'l' : 'c', 'l');
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