material-react-table 2.0.6 → 2.2.0

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.
Files changed (144) hide show
  1. package/dist/index.d.ts +13 -4
  2. package/dist/index.esm.js +2331 -2282
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +2362 -2310
  5. package/dist/index.js.map +1 -1
  6. package/locales/fr/index.esm.js +1 -1
  7. package/locales/fr/index.js +1 -1
  8. package/{dist/types/locales/he.d.ts → locales/he/index.d.ts} +2 -1
  9. package/locales/he/index.esm.d.ts +3 -0
  10. package/locales/he/index.esm.js +93 -0
  11. package/locales/he/index.js +97 -0
  12. package/locales/he/package.json +6 -0
  13. package/package.json +24 -24
  14. package/src/body/MRT_TableBody.tsx +16 -123
  15. package/src/body/MRT_TableBodyCell.tsx +11 -10
  16. package/src/body/MRT_TableBodyRow.tsx +9 -5
  17. package/src/head/MRT_TableHeadCell.tsx +4 -1
  18. package/src/head/MRT_TableHeadCellResizeHandle.tsx +18 -9
  19. package/src/hooks/index.ts +3 -0
  20. package/src/hooks/useMRT_ColumnVirtualizer.ts +125 -0
  21. package/src/hooks/useMRT_DisplayColumns.tsx +2 -0
  22. package/src/hooks/useMRT_RowVirtualizer.ts +64 -0
  23. package/src/hooks/useMRT_Rows.ts +94 -0
  24. package/src/hooks/useMRT_TableOptions.ts +8 -0
  25. package/src/inputs/MRT_EditCellTextField.tsx +3 -1
  26. package/src/inputs/MRT_FilterTextField.tsx +1 -1
  27. package/src/locales/fr.ts +1 -1
  28. package/src/table/MRT_Table.tsx +17 -107
  29. package/dist/types/MaterialReactTable.d.ts +0 -7
  30. package/dist/types/aggregationFns.d.ts +0 -11
  31. package/dist/types/body/MRT_TableBody.d.ts +0 -13
  32. package/dist/types/body/MRT_TableBodyCell.d.ts +0 -15
  33. package/dist/types/body/MRT_TableBodyCellValue.d.ts +0 -8
  34. package/dist/types/body/MRT_TableBodyRow.d.ts +0 -18
  35. package/dist/types/body/MRT_TableBodyRowGrabHandle.d.ts +0 -10
  36. package/dist/types/body/MRT_TableBodyRowPinButton.d.ts +0 -8
  37. package/dist/types/body/MRT_TableDetailPanel.d.ts +0 -13
  38. package/dist/types/body/index.d.ts +0 -7
  39. package/dist/types/buttons/MRT_ColumnPinningButtons.d.ts +0 -8
  40. package/dist/types/buttons/MRT_CopyButton.d.ts +0 -8
  41. package/dist/types/buttons/MRT_EditActionButtons.d.ts +0 -9
  42. package/dist/types/buttons/MRT_ExpandAllButton.d.ts +0 -7
  43. package/dist/types/buttons/MRT_ExpandButton.d.ts +0 -8
  44. package/dist/types/buttons/MRT_GrabHandleButton.d.ts +0 -12
  45. package/dist/types/buttons/MRT_RowPinButton.d.ts +0 -10
  46. package/dist/types/buttons/MRT_ShowHideColumnsButton.d.ts +0 -7
  47. package/dist/types/buttons/MRT_ToggleDensePaddingButton.d.ts +0 -7
  48. package/dist/types/buttons/MRT_ToggleFiltersButton.d.ts +0 -7
  49. package/dist/types/buttons/MRT_ToggleFullScreenButton.d.ts +0 -7
  50. package/dist/types/buttons/MRT_ToggleGlobalFilterButton.d.ts +0 -7
  51. package/dist/types/buttons/MRT_ToggleRowActionMenuButton.d.ts +0 -9
  52. package/dist/types/buttons/index.d.ts +0 -13
  53. package/dist/types/column.utils.d.ts +0 -127
  54. package/dist/types/filterFns.d.ts +0 -69
  55. package/dist/types/footer/MRT_TableFooter.d.ts +0 -11
  56. package/dist/types/footer/MRT_TableFooterCell.d.ts +0 -8
  57. package/dist/types/footer/MRT_TableFooterRow.d.ts +0 -12
  58. package/dist/types/footer/index.d.ts +0 -3
  59. package/dist/types/head/MRT_TableHead.d.ts +0 -11
  60. package/dist/types/head/MRT_TableHeadCell.d.ts +0 -8
  61. package/dist/types/head/MRT_TableHeadCellColumnActionsButton.d.ts +0 -8
  62. package/dist/types/head/MRT_TableHeadCellFilterContainer.d.ts +0 -8
  63. package/dist/types/head/MRT_TableHeadCellFilterLabel.d.ts +0 -8
  64. package/dist/types/head/MRT_TableHeadCellGrabHandle.d.ts +0 -10
  65. package/dist/types/head/MRT_TableHeadCellResizeHandle.d.ts +0 -8
  66. package/dist/types/head/MRT_TableHeadCellSortLabel.d.ts +0 -8
  67. package/dist/types/head/MRT_TableHeadRow.d.ts +0 -12
  68. package/dist/types/head/index.d.ts +0 -9
  69. package/dist/types/hooks/index.d.ts +0 -4
  70. package/dist/types/hooks/useMRT_DisplayColumns.d.ts +0 -9
  71. package/dist/types/hooks/useMRT_Effects.d.ts +0 -2
  72. package/dist/types/hooks/useMRT_TableInstance.d.ts +0 -2
  73. package/dist/types/hooks/useMRT_TableOptions.d.ts +0 -22
  74. package/dist/types/icons.d.ts +0 -36
  75. package/dist/types/index.d.ts +0 -18
  76. package/dist/types/inputs/MRT_EditCellTextField.d.ts +0 -8
  77. package/dist/types/inputs/MRT_FilterCheckbox.d.ts +0 -8
  78. package/dist/types/inputs/MRT_FilterRangeFields.d.ts +0 -8
  79. package/dist/types/inputs/MRT_FilterRangeSlider.d.ts +0 -8
  80. package/dist/types/inputs/MRT_FilterTextField.d.ts +0 -9
  81. package/dist/types/inputs/MRT_GlobalFilterTextField.d.ts +0 -7
  82. package/dist/types/inputs/MRT_SelectCheckbox.d.ts +0 -9
  83. package/dist/types/inputs/index.d.ts +0 -7
  84. package/dist/types/locales/am.d.ts +0 -2
  85. package/dist/types/locales/ar.d.ts +0 -2
  86. package/dist/types/locales/az.d.ts +0 -2
  87. package/dist/types/locales/bg.d.ts +0 -2
  88. package/dist/types/locales/cs.d.ts +0 -2
  89. package/dist/types/locales/da.d.ts +0 -2
  90. package/dist/types/locales/de.d.ts +0 -2
  91. package/dist/types/locales/en.d.ts +0 -2
  92. package/dist/types/locales/es.d.ts +0 -2
  93. package/dist/types/locales/et.d.ts +0 -2
  94. package/dist/types/locales/fa.d.ts +0 -2
  95. package/dist/types/locales/fi.d.ts +0 -2
  96. package/dist/types/locales/fr.d.ts +0 -2
  97. package/dist/types/locales/hu.d.ts +0 -2
  98. package/dist/types/locales/hy.d.ts +0 -2
  99. package/dist/types/locales/id.d.ts +0 -2
  100. package/dist/types/locales/it.d.ts +0 -2
  101. package/dist/types/locales/ja.d.ts +0 -2
  102. package/dist/types/locales/ko.d.ts +0 -2
  103. package/dist/types/locales/nl.d.ts +0 -2
  104. package/dist/types/locales/no.d.ts +0 -2
  105. package/dist/types/locales/np.d.ts +0 -2
  106. package/dist/types/locales/pl.d.ts +0 -2
  107. package/dist/types/locales/pt-BR.d.ts +0 -2
  108. package/dist/types/locales/pt.d.ts +0 -2
  109. package/dist/types/locales/ro.d.ts +0 -2
  110. package/dist/types/locales/ru.d.ts +0 -2
  111. package/dist/types/locales/sk.d.ts +0 -2
  112. package/dist/types/locales/sr-Cyrl-RS.d.ts +0 -2
  113. package/dist/types/locales/sr-Latn-RS.d.ts +0 -2
  114. package/dist/types/locales/sv.d.ts +0 -2
  115. package/dist/types/locales/tr.d.ts +0 -2
  116. package/dist/types/locales/uk.d.ts +0 -2
  117. package/dist/types/locales/vi.d.ts +0 -2
  118. package/dist/types/locales/zh-Hans.d.ts +0 -2
  119. package/dist/types/locales/zh-Hant.d.ts +0 -2
  120. package/dist/types/menus/MRT_ColumnActionMenu.d.ts +0 -20
  121. package/dist/types/menus/MRT_FilterOptionMenu.d.ts +0 -13
  122. package/dist/types/menus/MRT_RowActionMenu.d.ts +0 -12
  123. package/dist/types/menus/MRT_ShowHideColumnsMenu.d.ts +0 -10
  124. package/dist/types/menus/MRT_ShowHideColumnsMenuItems.d.ts +0 -12
  125. package/dist/types/menus/index.d.ts +0 -5
  126. package/dist/types/modals/MRT_EditRowModal.d.ts +0 -8
  127. package/dist/types/modals/index.d.ts +0 -1
  128. package/dist/types/sortingFns.d.ts +0 -12
  129. package/dist/types/style.utils.d.ts +0 -32
  130. package/dist/types/table/MRT_Table.d.ts +0 -7
  131. package/dist/types/table/MRT_TableContainer.d.ts +0 -7
  132. package/dist/types/table/MRT_TableLoadingOverlay.d.ts +0 -7
  133. package/dist/types/table/MRT_TablePaper.d.ts +0 -7
  134. package/dist/types/table/index.d.ts +0 -5
  135. package/dist/types/toolbar/MRT_BottomToolbar.d.ts +0 -7
  136. package/dist/types/toolbar/MRT_LinearProgressBar.d.ts +0 -8
  137. package/dist/types/toolbar/MRT_TablePagination.d.ts +0 -15
  138. package/dist/types/toolbar/MRT_ToolbarAlertBanner.d.ts +0 -8
  139. package/dist/types/toolbar/MRT_ToolbarDropZone.d.ts +0 -7
  140. package/dist/types/toolbar/MRT_ToolbarInternalButtons.d.ts +0 -7
  141. package/dist/types/toolbar/MRT_TopToolbar.d.ts +0 -6
  142. package/dist/types/toolbar/index.d.ts +0 -7
  143. package/dist/types/types.d.ts +0 -854
  144. package/dist/types/useMaterialReactTable.d.ts +0 -2
@@ -19,12 +19,21 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
19
19
  }: Props<TData>) => {
20
20
  const {
21
21
  getState,
22
- options: { columnResizeMode },
22
+ options: { columnResizeDirection, columnResizeMode },
23
23
  setColumnSizingInfo,
24
24
  } = table;
25
25
  const { density } = getState();
26
26
  const { column } = header;
27
27
 
28
+ const mx =
29
+ density === 'compact'
30
+ ? '-8px'
31
+ : density === 'comfortable'
32
+ ? '-16px'
33
+ : '-24px';
34
+
35
+ const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
36
+
28
37
  return (
29
38
  <Box
30
39
  className="Mui-TableHeadCell-ResizeHandle-Wrapper"
@@ -40,7 +49,10 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
40
49
  style={{
41
50
  transform:
42
51
  column.getIsResizing() && columnResizeMode === 'onEnd'
43
- ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
52
+ ? `translateX(${
53
+ (columnResizeDirection === 'rtl' ? -1 : 1) *
54
+ (getState().columnSizingInfo.deltaOffset ?? 0)
55
+ }px)`
44
56
  : undefined,
45
57
  }}
46
58
  sx={(theme) => ({
@@ -50,15 +62,12 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
50
62
  header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
51
63
  },
52
64
  cursor: 'col-resize',
53
- mr:
54
- density === 'compact'
55
- ? '-8px'
56
- : density === 'comfortable'
57
- ? '-16px'
58
- : '-24px',
65
+ left: columnResizeDirection === 'rtl' ? lr : undefined,
66
+ ml: columnResizeDirection === 'rtl' ? mx : undefined,
67
+ mr: columnResizeDirection === 'ltr' ? mx : undefined,
59
68
  position: 'absolute',
60
69
  px: '4px',
61
- right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
70
+ right: columnResizeDirection === 'ltr' ? lr : undefined,
62
71
  })}
63
72
  >
64
73
  <Divider
@@ -1,4 +1,7 @@
1
+ export * from './useMRT_ColumnVirtualizer';
1
2
  export * from './useMRT_DisplayColumns';
2
3
  export * from './useMRT_Effects';
4
+ export * from './useMRT_RowVirtualizer';
5
+ export * from './useMRT_Rows';
3
6
  export * from './useMRT_TableInstance';
4
7
  export * from './useMRT_TableOptions';
@@ -0,0 +1,125 @@
1
+ import { useCallback, useMemo } from 'react';
2
+ import {
3
+ type Range,
4
+ type Virtualizer,
5
+ useVirtualizer,
6
+ } from '@tanstack/react-virtual';
7
+ import {
8
+ extraIndexRangeExtractor,
9
+ parseFromValuesOrFunc,
10
+ } from '../column.utils';
11
+ import { type MRT_RowData, type MRT_TableInstance } from '../types';
12
+
13
+ export const useMRT_ColumnVirtualizer = <
14
+ TData extends MRT_RowData,
15
+ TScrollElement extends Element | Window = HTMLDivElement,
16
+ TItemElement extends Element = HTMLTableCellElement,
17
+ >(
18
+ table: MRT_TableInstance<TData>,
19
+ ):
20
+ | (Virtualizer<TScrollElement, TItemElement> & {
21
+ virtualPaddingLeft?: number;
22
+ virtualPaddingRight?: number;
23
+ })
24
+ | undefined => {
25
+ const {
26
+ getState,
27
+ options: {
28
+ columnVirtualizerInstanceRef,
29
+ columnVirtualizerOptions,
30
+ enableColumnPinning,
31
+ enableColumnVirtualization,
32
+ },
33
+ refs: { tableContainerRef },
34
+ } = table;
35
+ const { columnPinning, columnVisibility, draggingColumn } = getState();
36
+
37
+ const columnVirtualizerProps = parseFromValuesOrFunc(
38
+ columnVirtualizerOptions,
39
+ {
40
+ table,
41
+ },
42
+ );
43
+
44
+ const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
45
+ () =>
46
+ enableColumnVirtualization && enableColumnPinning
47
+ ? [
48
+ table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
49
+ table
50
+ .getRightLeafColumns()
51
+ .map(
52
+ (c) =>
53
+ table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
54
+ ),
55
+ ]
56
+ : [[], []],
57
+ [columnPinning, enableColumnVirtualization, enableColumnPinning],
58
+ );
59
+
60
+ //get first 16 column widths and average them if calc is needed
61
+ const averageColumnWidth = useMemo(() => {
62
+ if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize)
63
+ return 0;
64
+ const columnsWidths =
65
+ table
66
+ .getRowModel()
67
+ .rows[0]?.getCenterVisibleCells()
68
+ ?.slice(0, 16)
69
+ ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
70
+ return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
71
+ }, [table.getRowModel().rows, columnPinning, columnVisibility]);
72
+
73
+ const draggingColumnIndex = table
74
+ .getVisibleLeafColumns()
75
+ .findIndex((c) => c.id === draggingColumn?.id);
76
+
77
+ const columnVirtualizer = enableColumnVirtualization
78
+ ? (useVirtualizer({
79
+ count: table.getVisibleLeafColumns().length,
80
+ estimateSize: () => averageColumnWidth,
81
+ getScrollElement: () => tableContainerRef.current,
82
+ horizontal: true,
83
+ overscan: 3,
84
+ rangeExtractor: useCallback(
85
+ (range: Range) => {
86
+ const newIndexes = extraIndexRangeExtractor(
87
+ range,
88
+ draggingColumnIndex,
89
+ );
90
+ return [
91
+ ...new Set([
92
+ ...leftPinnedIndexes,
93
+ ...newIndexes,
94
+ ...rightPinnedIndexes,
95
+ ]),
96
+ ];
97
+ },
98
+ [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
99
+ ),
100
+ ...columnVirtualizerProps,
101
+ }) as unknown as Virtualizer<TScrollElement, TItemElement>)
102
+ : undefined;
103
+
104
+ if (columnVirtualizerInstanceRef && columnVirtualizer) {
105
+ //@ts-ignore
106
+ columnVirtualizerInstanceRef.current = columnVirtualizer;
107
+ }
108
+
109
+ const virtualColumns = columnVirtualizer
110
+ ? columnVirtualizer.getVirtualItems()
111
+ : undefined;
112
+
113
+ if (columnVirtualizer && virtualColumns?.length) {
114
+ // @ts-ignore
115
+ columnVirtualizer.virtualPaddingLeft =
116
+ virtualColumns[leftPinnedIndexes!.length]?.start ?? 0;
117
+ // @ts-ignore
118
+ columnVirtualizer.virtualPaddingRight =
119
+ columnVirtualizer.getTotalSize() -
120
+ (virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes!.length]
121
+ ?.end ?? 0);
122
+ }
123
+
124
+ return columnVirtualizer as any;
125
+ };
@@ -16,6 +16,7 @@ import {
16
16
  type MRT_Row,
17
17
  type MRT_RowData,
18
18
  } from '../types';
19
+ import { MRT_DefaultDisplayColumn } from '.';
19
20
 
20
21
  interface Params<TData extends MRT_RowData> {
21
22
  columnOrder: MRT_ColumnOrderState;
@@ -217,6 +218,7 @@ function makeSpacerColumn<TData extends MRT_RowData>(
217
218
  if (order.includes(id)) {
218
219
  return {
219
220
  ...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
221
+ ...MRT_DefaultDisplayColumn,
220
222
  muiTableBodyCellProps: blankColProps,
221
223
  muiTableFooterCellProps: blankColProps,
222
224
  muiTableHeadCellProps: blankColProps,
@@ -0,0 +1,64 @@
1
+ import { useCallback } from 'react';
2
+ import {
3
+ type Range,
4
+ type Virtualizer,
5
+ useVirtualizer,
6
+ } from '@tanstack/react-virtual';
7
+ import {
8
+ extraIndexRangeExtractor,
9
+ parseFromValuesOrFunc,
10
+ } from '../column.utils';
11
+ import { type MRT_RowData, type MRT_TableInstance } from '../types';
12
+
13
+ export const useMRT_RowVirtualizer = <
14
+ TData extends MRT_RowData,
15
+ TScrollElement extends Element | Window = HTMLDivElement,
16
+ TItemElement extends Element = HTMLTableRowElement,
17
+ >(
18
+ table: MRT_TableInstance<TData>,
19
+ ): Virtualizer<TScrollElement, TItemElement> | undefined => {
20
+ const {
21
+ getRowModel,
22
+ getState,
23
+ options: {
24
+ enableRowVirtualization,
25
+ rowVirtualizerInstanceRef,
26
+ rowVirtualizerOptions,
27
+ },
28
+ refs: { tableContainerRef },
29
+ } = table;
30
+ const { density, draggingRow } = getState();
31
+
32
+ const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
33
+ table,
34
+ });
35
+
36
+ const rowVirtualizer = enableRowVirtualization
37
+ ? (useVirtualizer({
38
+ count: getRowModel().rows.length,
39
+ estimateSize: () =>
40
+ density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
41
+ getScrollElement: () => tableContainerRef.current,
42
+ measureElement:
43
+ typeof window !== 'undefined' &&
44
+ navigator.userAgent.indexOf('Firefox') === -1
45
+ ? (element) => element?.getBoundingClientRect().height
46
+ : undefined,
47
+ overscan: 4,
48
+ rangeExtractor: useCallback(
49
+ (range: Range) => {
50
+ return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
51
+ },
52
+ [draggingRow],
53
+ ),
54
+ ...rowVirtualizerProps,
55
+ }) as unknown as Virtualizer<TScrollElement, TItemElement>)
56
+ : undefined;
57
+
58
+ if (rowVirtualizerInstanceRef && rowVirtualizer) {
59
+ //@ts-ignore
60
+ rowVirtualizerInstanceRef.current = rowVirtualizer;
61
+ }
62
+
63
+ return rowVirtualizer;
64
+ };
@@ -0,0 +1,94 @@
1
+ import { useMemo } from 'react';
2
+ import { getCanRankRows } from '../column.utils';
3
+ import { rankGlobalFuzzy } from '../sortingFns';
4
+ import {
5
+ type MRT_Row,
6
+ type MRT_RowData,
7
+ type MRT_TableInstance,
8
+ } from '../types';
9
+
10
+ export const useMRT_Rows = <TData extends MRT_RowData>(
11
+ table: MRT_TableInstance<TData>,
12
+ ): MRT_Row<TData>[] => {
13
+ const {
14
+ getBottomRows,
15
+ getCenterRows,
16
+ getPrePaginationRowModel,
17
+ getRowModel,
18
+ getState,
19
+ getTopRows,
20
+ options: {
21
+ enableGlobalFilterRankedResults,
22
+ enablePagination,
23
+ enableRowPinning,
24
+ manualExpanding,
25
+ manualFiltering,
26
+ manualGrouping,
27
+ manualPagination,
28
+ manualSorting,
29
+ rowPinningDisplayMode,
30
+ },
31
+ } = table;
32
+ const { expanded, globalFilter, pagination, rowPinning, sorting } =
33
+ getState();
34
+
35
+ const shouldRankRows = useMemo(
36
+ () =>
37
+ getCanRankRows(table) &&
38
+ !Object.values(sorting).some(Boolean) &&
39
+ globalFilter,
40
+ [
41
+ enableGlobalFilterRankedResults,
42
+ expanded,
43
+ globalFilter,
44
+ manualExpanding,
45
+ manualFiltering,
46
+ manualGrouping,
47
+ manualSorting,
48
+ sorting,
49
+ ],
50
+ );
51
+
52
+ const pinnedRowIds = useMemo(
53
+ () =>
54
+ getRowModel()
55
+ .rows.filter((row) => row.getIsPinned())
56
+ .map((r) => r.id),
57
+ [rowPinning, table.getRowModel().rows],
58
+ );
59
+
60
+ const rows = useMemo(() => {
61
+ let rows: MRT_Row<TData>[] = [];
62
+ if (!shouldRankRows) {
63
+ rows =
64
+ !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
65
+ ? getRowModel().rows
66
+ : getCenterRows();
67
+ } else {
68
+ rows = getPrePaginationRowModel().rows.sort((a, b) =>
69
+ rankGlobalFuzzy(a, b),
70
+ );
71
+ if (enablePagination && !manualPagination) {
72
+ const start = pagination.pageIndex * pagination.pageSize;
73
+ rows = rows.slice(start, start + pagination.pageSize);
74
+ }
75
+ }
76
+ if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
77
+ rows = [
78
+ ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
79
+ ...rows,
80
+ ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
81
+ ];
82
+ }
83
+
84
+ return rows;
85
+ }, [
86
+ shouldRankRows,
87
+ shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
88
+ pagination.pageIndex,
89
+ pagination.pageSize,
90
+ rowPinning,
91
+ ]);
92
+
93
+ return rows;
94
+ };
@@ -1,4 +1,5 @@
1
1
  import { useMemo } from 'react';
2
+ import { useTheme } from '@mui/material';
2
3
  import { MRT_AggregationFns } from '../aggregationFns';
3
4
  import { MRT_FilterFns } from '../filterFns';
4
5
  import { MRT_Default_Icons } from '../icons';
@@ -38,6 +39,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
38
39
  aggregationFns,
39
40
  autoResetExpanded = false,
40
41
  columnFilterDisplayMode = 'subheader',
42
+ columnResizeDirection,
41
43
  columnResizeMode = 'onChange',
42
44
  createDisplayMode = 'modal',
43
45
  defaultColumn,
@@ -92,6 +94,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
92
94
  sortingFns,
93
95
  ...rest
94
96
  }: MRT_TableOptions<TData>) => {
97
+ const theme = useTheme();
95
98
  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
96
99
  const _localization = useMemo(
97
100
  () => ({
@@ -118,6 +121,10 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
118
121
  [defaultDisplayColumn],
119
122
  );
120
123
 
124
+ if (!columnResizeDirection) {
125
+ columnResizeDirection = theme.direction || 'ltr';
126
+ }
127
+
121
128
  layoutMode =
122
129
  layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
123
130
  if (
@@ -146,6 +153,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
146
153
  aggregationFns: _aggregationFns,
147
154
  autoResetExpanded,
148
155
  columnFilterDisplayMode,
156
+ columnResizeDirection,
149
157
  columnResizeMode,
150
158
  createDisplayMode,
151
159
  defaultColumn: _defaultColumn,
@@ -127,7 +127,9 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
127
127
  variant="standard"
128
128
  {...textFieldProps}
129
129
  InputProps={{
130
- disableUnderline: editDisplayMode === 'table',
130
+ ...(textFieldProps.variant !== 'outlined'
131
+ ? { disableUnderline: editDisplayMode === 'table' }
132
+ : {}),
131
133
  ...textFieldProps.InputProps,
132
134
  sx: (theme) => ({
133
135
  mb: 0,
@@ -290,7 +290,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
290
290
  whiteSpace: 'nowrap',
291
291
  },
292
292
  },
293
- InputProps: endAdornment //hack because mui looks for presense of endAdornment key instead of undefined
293
+ InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
294
294
  ? { endAdornment, startAdornment }
295
295
  : { startAdornment },
296
296
  fullWidth: true,
package/src/locales/fr.ts CHANGED
@@ -51,7 +51,7 @@ export const MRT_Localization_FR: MRT_Localization = {
51
51
  groupByColumn: 'Grouper par {column}',
52
52
  groupedBy: 'Groupé par ',
53
53
  hideAll: 'Cacher tout',
54
- hideColumn: 'Cacher {column} colonne',
54
+ hideColumn: 'Cacher colonne {column}',
55
55
  max: 'Max',
56
56
  min: 'Min',
57
57
  move: 'Déplacer',
@@ -1,17 +1,10 @@
1
- import { useCallback, useMemo } from 'react';
2
- import {
3
- type Range,
4
- type Virtualizer,
5
- useVirtualizer,
6
- } from '@tanstack/react-virtual';
1
+ import { useMemo } from 'react';
7
2
  import Table, { type TableProps } from '@mui/material/Table';
8
3
  import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
9
- import {
10
- extraIndexRangeExtractor,
11
- parseFromValuesOrFunc,
12
- } from '../column.utils';
4
+ import { parseFromValuesOrFunc } from '../column.utils';
13
5
  import { MRT_TableFooter } from '../footer/MRT_TableFooter';
14
6
  import { MRT_TableHead } from '../head/MRT_TableHead';
7
+ import { useMRT_ColumnVirtualizer } from '../hooks/useMRT_ColumnVirtualizer';
15
8
  import { parseCSSVarId } from '../style.utils';
16
9
  import { type MRT_RowData, type MRT_TableInstance } from '../types';
17
10
 
@@ -27,11 +20,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
27
20
  getFlatHeaders,
28
21
  getState,
29
22
  options: {
30
- columnVirtualizerInstanceRef,
31
- columnVirtualizerOptions,
32
23
  columns,
33
- enableColumnPinning,
34
- enableColumnVirtualization,
35
24
  enableStickyHeader,
36
25
  enableTableFooter,
37
26
  enableTableHead,
@@ -39,27 +28,15 @@ export const MRT_Table = <TData extends MRT_RowData>({
39
28
  memoMode,
40
29
  muiTableProps,
41
30
  },
42
- refs: { tableContainerRef },
43
31
  } = table;
44
- const {
45
- columnPinning,
46
- columnSizing,
47
- columnSizingInfo,
48
- columnVisibility,
49
- draggingColumn,
50
- isFullScreen,
51
- } = getState();
32
+ const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
33
+ getState();
52
34
 
53
35
  const tableProps = {
54
36
  ...parseFromValuesOrFunc(muiTableProps, { table }),
55
37
  ...rest,
56
38
  };
57
39
 
58
- const columnVirtualizerProps = parseFromValuesOrFunc(
59
- columnVirtualizerOptions,
60
- { table },
61
- );
62
-
63
40
  const columnSizeVars = useMemo(() => {
64
41
  const headers = getFlatHeaders();
65
42
  const colSizes: { [key: string]: number } = {};
@@ -74,93 +51,26 @@ export const MRT_Table = <TData extends MRT_RowData>({
74
51
  return colSizes;
75
52
  }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
76
53
 
77
- //get first 16 column widths and average them
78
- const averageColumnWidth = useMemo(() => {
79
- if (!enableColumnVirtualization) return 0;
80
- const columnsWidths =
81
- table
82
- .getRowModel()
83
- .rows[0]?.getCenterVisibleCells()
84
- ?.slice(0, 16)
85
- ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
86
- return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
87
- }, [table.getRowModel().rows, columnPinning, columnVisibility]);
88
-
89
- const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
90
- () =>
91
- enableColumnVirtualization && enableColumnPinning
92
- ? [
93
- table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
94
- table
95
- .getRightLeafColumns()
96
- .map(
97
- (c) =>
98
- table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
99
- ),
100
- ]
101
- : [[], []],
102
- [columnPinning, enableColumnVirtualization, enableColumnPinning],
103
- );
104
-
105
- const draggingColumnIndex = table
106
- .getVisibleLeafColumns()
107
- .findIndex((c) => c.id === draggingColumn?.id);
54
+ const columnVirtualizer = useMRT_ColumnVirtualizer(table);
108
55
 
109
- const columnVirtualizer:
110
- | Virtualizer<HTMLDivElement, HTMLTableCellElement>
111
- | undefined = enableColumnVirtualization
112
- ? useVirtualizer({
113
- count: table.getVisibleLeafColumns().length,
114
- estimateSize: () => averageColumnWidth,
115
- getScrollElement: () => tableContainerRef.current,
116
- horizontal: true,
117
- overscan: 3,
118
- rangeExtractor: useCallback(
119
- (range: Range) => {
120
- const newIndexs = extraIndexRangeExtractor(
121
- range,
122
- draggingColumnIndex,
123
- );
124
- return [
125
- ...new Set([
126
- ...leftPinnedIndexes,
127
- ...newIndexs,
128
- ...rightPinnedIndexes,
129
- ]),
130
- ];
131
- },
132
- [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
133
- ),
134
- ...columnVirtualizerProps,
135
- })
136
- : undefined;
137
-
138
- if (columnVirtualizerInstanceRef && columnVirtualizer) {
139
- columnVirtualizerInstanceRef.current = columnVirtualizer;
140
- }
56
+ const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
141
57
 
142
58
  const virtualColumns = columnVirtualizer
143
59
  ? columnVirtualizer.getVirtualItems()
144
60
  : undefined;
145
61
 
146
- let virtualPaddingLeft: number | undefined;
147
- let virtualPaddingRight: number | undefined;
148
-
149
- if (columnVirtualizer && virtualColumns?.length) {
150
- virtualPaddingLeft = virtualColumns[leftPinnedIndexes.length]?.start ?? 0;
151
- virtualPaddingRight =
152
- columnVirtualizer.getTotalSize() -
153
- (virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]
154
- ?.end ?? 0);
155
- }
156
-
157
- const props = {
62
+ const commonTableGroupProps = {
158
63
  table,
159
64
  virtualColumns,
160
65
  virtualPaddingLeft,
161
66
  virtualPaddingRight,
162
67
  };
163
68
 
69
+ const commonTableBodyProps = {
70
+ ...commonTableGroupProps,
71
+ columnVirtualizer,
72
+ };
73
+
164
74
  return (
165
75
  <Table
166
76
  stickyHeader={enableStickyHeader || isFullScreen}
@@ -172,13 +82,13 @@ export const MRT_Table = <TData extends MRT_RowData>({
172
82
  ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
173
83
  })}
174
84
  >
175
- {enableTableHead && <MRT_TableHead {...props} />}
85
+ {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
176
86
  {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
177
- <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
87
+ <Memo_MRT_TableBody {...commonTableBodyProps} />
178
88
  ) : (
179
- <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
89
+ <MRT_TableBody {...commonTableBodyProps} />
180
90
  )}
181
- {enableTableFooter && <MRT_TableFooter {...props} />}
91
+ {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
182
92
  </Table>
183
93
  );
184
94
  };
@@ -1,7 +0,0 @@
1
- import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions, type Xor } from './types';
2
- type TableInstanceProp<TData extends MRT_RowData> = {
3
- table: MRT_TableInstance<TData>;
4
- };
5
- type Props<TData extends MRT_RowData> = Xor<TableInstanceProp<TData>, MRT_TableOptions<TData>>;
6
- export declare const MaterialReactTable: <TData extends MRT_RowData>(props: Props<TData>) => import("react/jsx-runtime").JSX.Element;
7
- export {};
@@ -1,11 +0,0 @@
1
- export declare const MRT_AggregationFns: {
2
- sum: import("@tanstack/react-table").AggregationFn<any>;
3
- min: import("@tanstack/react-table").AggregationFn<any>;
4
- max: import("@tanstack/react-table").AggregationFn<any>;
5
- extent: import("@tanstack/react-table").AggregationFn<any>;
6
- mean: import("@tanstack/react-table").AggregationFn<any>;
7
- median: import("@tanstack/react-table").AggregationFn<any>;
8
- unique: import("@tanstack/react-table").AggregationFn<any>;
9
- uniqueCount: import("@tanstack/react-table").AggregationFn<any>;
10
- count: import("@tanstack/react-table").AggregationFn<any>;
11
- };
@@ -1,13 +0,0 @@
1
- import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
2
- import { type TableBodyProps } from '@mui/material/TableBody';
3
- import { type MRT_RowData, type MRT_TableInstance } from '../types';
4
- interface Props<TData extends MRT_RowData> extends TableBodyProps {
5
- columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
6
- table: MRT_TableInstance<TData>;
7
- virtualColumns?: VirtualItem[];
8
- virtualPaddingLeft?: number;
9
- virtualPaddingRight?: number;
10
- }
11
- export declare const MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
12
- export declare const Memo_MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
13
- export {};
@@ -1,15 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TableCellProps } from '@mui/material/TableCell';
3
- import { type MRT_Cell, type MRT_RowData, type MRT_TableInstance } from '../types';
4
- interface Props<TData extends MRT_RowData> extends TableCellProps {
5
- cell: MRT_Cell<TData>;
6
- measureElement?: (element: HTMLTableCellElement) => void;
7
- numRows?: number;
8
- rowIndex: number;
9
- rowRef: RefObject<HTMLTableRowElement>;
10
- table: MRT_TableInstance<TData>;
11
- virtualIndex?: number;
12
- }
13
- export declare const MRT_TableBodyCell: <TData extends MRT_RowData>({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
14
- export declare const Memo_MRT_TableBodyCell: <TData extends MRT_RowData>({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex, ...rest }: Props<TData>) => import("react/jsx-runtime").JSX.Element;
15
- export {};
@@ -1,8 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- import { type MRT_Cell, type MRT_RowData, type MRT_TableInstance } from '../types';
3
- interface Props<TData extends MRT_RowData> {
4
- cell: MRT_Cell<TData>;
5
- table: MRT_TableInstance<TData>;
6
- }
7
- export declare const MRT_TableBodyCellValue: <TData extends MRT_RowData>({ cell, table, }: Props<TData>) => ReactNode;
8
- export {};