material-react-table 2.6.1 → 2.8.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 (104) hide show
  1. package/dist/index.d.ts +390 -260
  2. package/dist/index.esm.js +1977 -1921
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +2372 -2318
  5. package/dist/index.js.map +1 -1
  6. package/package.json +20 -20
  7. package/src/{MaterialReactTable.tsx → components/MaterialReactTable.tsx} +3 -3
  8. package/src/{body → components/body}/MRT_TableBody.tsx +6 -28
  9. package/src/{body → components/body}/MRT_TableBodyCell.tsx +6 -23
  10. package/src/{body → components/body}/MRT_TableBodyCellValue.tsx +2 -2
  11. package/src/{body → components/body}/MRT_TableBodyRow.tsx +7 -5
  12. package/src/{body → components/body}/MRT_TableBodyRowGrabHandle.tsx +3 -3
  13. package/src/{body → components/body}/MRT_TableBodyRowPinButton.tsx +3 -3
  14. package/src/{body → components/body}/MRT_TableDetailPanel.tsx +6 -6
  15. package/src/{buttons → components/buttons}/MRT_ColumnPinningButtons.tsx +2 -2
  16. package/src/{buttons → components/buttons}/MRT_CopyButton.tsx +4 -5
  17. package/src/{buttons → components/buttons}/MRT_EditActionButtons.tsx +2 -2
  18. package/src/{buttons → components/buttons}/MRT_ExpandAllButton.tsx +4 -4
  19. package/src/{buttons → components/buttons}/MRT_ExpandButton.tsx +10 -4
  20. package/src/{buttons → components/buttons}/MRT_GrabHandleButton.tsx +4 -5
  21. package/src/{buttons → components/buttons}/MRT_RowPinButton.tsx +4 -4
  22. package/src/{buttons → components/buttons}/MRT_ShowHideColumnsButton.tsx +1 -1
  23. package/src/{buttons → components/buttons}/MRT_ToggleDensePaddingButton.tsx +1 -1
  24. package/src/{buttons → components/buttons}/MRT_ToggleFiltersButton.tsx +1 -1
  25. package/src/{buttons → components/buttons}/MRT_ToggleFullScreenButton.tsx +1 -1
  26. package/src/{buttons → components/buttons}/MRT_ToggleGlobalFilterButton.tsx +1 -1
  27. package/src/{buttons → components/buttons}/MRT_ToggleRowActionMenuButton.tsx +9 -9
  28. package/src/{footer → components/footer}/MRT_TableFooter.tsx +2 -2
  29. package/src/{footer → components/footer}/MRT_TableFooterCell.tsx +3 -3
  30. package/src/{footer → components/footer}/MRT_TableFooterRow.tsx +3 -3
  31. package/src/{head → components/head}/MRT_TableHead.tsx +3 -3
  32. package/src/{head → components/head}/MRT_TableHeadCell.tsx +3 -3
  33. package/src/{head → components/head}/MRT_TableHeadCellColumnActionsButton.tsx +5 -6
  34. package/src/{head → components/head}/MRT_TableHeadCellFilterContainer.tsx +5 -5
  35. package/src/{head → components/head}/MRT_TableHeadCellFilterLabel.tsx +2 -2
  36. package/src/{head → components/head}/MRT_TableHeadCellGrabHandle.tsx +4 -3
  37. package/src/{head → components/head}/MRT_TableHeadCellResizeHandle.tsx +2 -2
  38. package/src/{head → components/head}/MRT_TableHeadCellSortLabel.tsx +2 -2
  39. package/src/{head → components/head}/MRT_TableHeadRow.tsx +3 -3
  40. package/src/{inputs → components/inputs}/MRT_EditCellTextField.tsx +12 -4
  41. package/src/{inputs → components/inputs}/MRT_FilterCheckbox.tsx +4 -4
  42. package/src/{inputs → components/inputs}/MRT_FilterRangeFields.tsx +2 -2
  43. package/src/{inputs → components/inputs}/MRT_FilterRangeSlider.tsx +2 -2
  44. package/src/{inputs → components/inputs}/MRT_FilterTextField.tsx +3 -3
  45. package/src/{inputs → components/inputs}/MRT_GlobalFilterTextField.tsx +2 -2
  46. package/src/{inputs → components/inputs}/MRT_SelectCheckbox.tsx +4 -4
  47. package/src/{menus → components/menus}/MRT_ColumnActionMenu.tsx +9 -1
  48. package/src/{menus → components/menus}/MRT_FilterOptionMenu.tsx +9 -1
  49. package/src/{menus → components/menus}/MRT_RowActionMenu.tsx +13 -2
  50. package/src/{menus → components/menus}/MRT_ShowHideColumnsMenu.tsx +11 -5
  51. package/src/{menus → components/menus}/MRT_ShowHideColumnsMenuItems.tsx +7 -7
  52. package/src/{modals → components/modals}/MRT_EditRowModal.tsx +4 -4
  53. package/src/{table → components/table}/MRT_Table.tsx +4 -4
  54. package/src/{table → components/table}/MRT_TableContainer.tsx +3 -3
  55. package/src/{table → components/table}/MRT_TableLoadingOverlay.tsx +3 -3
  56. package/src/{table → components/table}/MRT_TablePaper.tsx +3 -3
  57. package/src/{toolbar → components/toolbar}/MRT_BottomToolbar.tsx +3 -3
  58. package/src/{toolbar → components/toolbar}/MRT_LinearProgressBar.tsx +2 -2
  59. package/src/{toolbar → components/toolbar}/MRT_TablePagination.tsx +9 -7
  60. package/src/{toolbar → components/toolbar}/MRT_ToolbarAlertBanner.tsx +3 -3
  61. package/src/{toolbar → components/toolbar}/MRT_ToolbarDropZone.tsx +2 -2
  62. package/src/{toolbar → components/toolbar}/MRT_ToolbarInternalButtons.tsx +2 -2
  63. package/src/{toolbar → components/toolbar}/MRT_TopToolbar.tsx +3 -3
  64. package/src/{filterFns.ts → fns/filterFns.ts} +1 -1
  65. package/src/{sortingFns.ts → fns/sortingFns.ts} +1 -1
  66. package/src/hooks/display-columns/getMRT_DisplayColumns.tsx +26 -0
  67. package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx +34 -0
  68. package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +35 -0
  69. package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +96 -0
  70. package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx +36 -0
  71. package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +30 -0
  72. package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx +40 -0
  73. package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx +40 -0
  74. package/src/hooks/useMRT_ColumnVirtualizer.ts +2 -4
  75. package/src/hooks/useMRT_Effects.ts +7 -6
  76. package/src/hooks/useMRT_RowVirtualizer.ts +2 -4
  77. package/src/hooks/useMRT_Rows.ts +32 -6
  78. package/src/hooks/useMRT_TableInstance.ts +91 -87
  79. package/src/hooks/useMRT_TableOptions.ts +5 -3
  80. package/src/{useMaterialReactTable.ts → hooks/useMaterialReactTable.ts} +3 -3
  81. package/src/icons.ts +4 -38
  82. package/src/index.ts +88 -17
  83. package/src/types.ts +59 -26
  84. package/src/utils/column.utils.ts +173 -0
  85. package/src/utils/displayColumn.utils.ts +134 -0
  86. package/src/utils/row.utils.ts +26 -0
  87. package/src/{style.utils.ts → utils/style.utils.ts} +50 -28
  88. package/src/utils/tanstack.helpers.ts +64 -0
  89. package/src/utils/utils.ts +23 -0
  90. package/src/utils/virtualization.utils.ts +19 -0
  91. package/src/utils.ts +0 -0
  92. package/src/body/index.ts +0 -7
  93. package/src/buttons/index.ts +0 -13
  94. package/src/column.utils.ts +0 -368
  95. package/src/footer/index.ts +0 -3
  96. package/src/head/index.ts +0 -9
  97. package/src/hooks/index.ts +0 -7
  98. package/src/hooks/useMRT_DisplayColumns.tsx +0 -299
  99. package/src/inputs/index.ts +0 -7
  100. package/src/menus/index.ts +0 -5
  101. package/src/modals/index.ts +0 -1
  102. package/src/table/index.ts +0 -5
  103. package/src/toolbar/index.ts +0 -7
  104. /package/src/{aggregationFns.ts → fns/aggregationFns.ts} +0 -0
@@ -1,299 +0,0 @@
1
- import { type ReactNode, type RefObject, useMemo } from 'react';
2
- import Stack from '@mui/material/Stack';
3
- import Tooltip from '@mui/material/Tooltip';
4
- import { MRT_TableBodyRowGrabHandle } from '../body';
5
- import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
6
- import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
7
- import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
8
- import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
9
- import { showExpandColumn } from '../column.utils';
10
- import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
11
- import {
12
- type MRT_ColumnDef,
13
- type MRT_ColumnOrderState,
14
- type MRT_DefinedTableOptions,
15
- type MRT_DisplayColumnIds,
16
- type MRT_GroupingState,
17
- type MRT_Localization,
18
- type MRT_Row,
19
- type MRT_RowData,
20
- } from '../types';
21
- import { MRT_DefaultDisplayColumn } from '.';
22
-
23
- interface Params<TData extends MRT_RowData> {
24
- columnOrder: MRT_ColumnOrderState;
25
- creatingRow: MRT_Row<TData> | null;
26
- grouping: MRT_GroupingState;
27
- tableOptions: MRT_DefinedTableOptions<TData>;
28
- }
29
-
30
- export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
31
- params: Params<TData>,
32
- ): MRT_ColumnDef<TData>[] => {
33
- const { columnOrder, creatingRow, grouping, tableOptions } = params;
34
- const order = tableOptions.state?.columnOrder ?? columnOrder;
35
-
36
- return useMemo(
37
- () =>
38
- [
39
- makeRowPinColumn,
40
- makeRowDragColumn,
41
- makeRowActionsColumn,
42
- makeRowExpandColumn,
43
- makeRowSelectColumn,
44
- makeRowNumbersColumn,
45
- makeSpacerColumn,
46
- ]
47
- .map((makeCol) => makeCol(params, order))
48
- .filter(Boolean) as MRT_ColumnDef<TData>[],
49
- [
50
- columnOrder,
51
- creatingRow,
52
- grouping,
53
- tableOptions.displayColumnDefOptions,
54
- tableOptions.editDisplayMode,
55
- tableOptions.enableColumnDragging,
56
- tableOptions.enableColumnFilterModes,
57
- tableOptions.enableColumnOrdering,
58
- tableOptions.enableEditing,
59
- tableOptions.enableExpandAll,
60
- tableOptions.enableExpanding,
61
- tableOptions.enableGrouping,
62
- tableOptions.enableRowActions,
63
- tableOptions.enableRowDragging,
64
- tableOptions.enableRowNumbers,
65
- tableOptions.enableRowOrdering,
66
- tableOptions.enableRowSelection,
67
- tableOptions.enableSelectAll,
68
- tableOptions.groupedColumnMode,
69
- tableOptions.localization,
70
- tableOptions.positionActionsColumn,
71
- tableOptions.positionExpandColumn,
72
- tableOptions.renderDetailPanel,
73
- tableOptions.renderRowActionMenuItems,
74
- tableOptions.renderRowActions,
75
- tableOptions.state?.columnOrder,
76
- tableOptions.state?.grouping,
77
- ],
78
- );
79
- };
80
-
81
- function defaultDisplayColumnProps<TData extends MRT_RowData>(
82
- {
83
- defaultDisplayColumn,
84
- displayColumnDefOptions,
85
- localization,
86
- }: MRT_DefinedTableOptions<TData>,
87
- id: MRT_DisplayColumnIds,
88
- header?: keyof MRT_Localization,
89
- size = 60,
90
- ) {
91
- return {
92
- ...defaultDisplayColumn,
93
- header: header ? localization[header]! : '',
94
- size,
95
- ...displayColumnDefOptions?.[id],
96
- id,
97
- } as const;
98
- }
99
-
100
- function makeRowPinColumn<TData extends MRT_RowData>(
101
- { tableOptions }: Params<TData>,
102
- order: MRT_ColumnOrderState,
103
- ): MRT_ColumnDef<TData> | null {
104
- const id: MRT_DisplayColumnIds = 'mrt-row-pin';
105
- if (order.includes(id)) {
106
- return {
107
- Cell: ({ row, table }) => (
108
- <MRT_TableBodyRowPinButton row={row} table={table} />
109
- ),
110
- ...defaultDisplayColumnProps(tableOptions, id, 'pin'),
111
- };
112
- }
113
- return null;
114
- }
115
-
116
- function makeRowDragColumn<TData extends MRT_RowData>(
117
- { tableOptions }: Params<TData>,
118
- order: MRT_ColumnOrderState,
119
- ): MRT_ColumnDef<TData> | null {
120
- const id: MRT_DisplayColumnIds = 'mrt-row-drag';
121
- if (order.includes(id)) {
122
- return {
123
- Cell: ({ row, rowRef, table }) => (
124
- <MRT_TableBodyRowGrabHandle
125
- row={row}
126
- rowRef={rowRef as RefObject<HTMLTableRowElement>}
127
- table={table}
128
- />
129
- ),
130
- ...defaultDisplayColumnProps(tableOptions, id, 'move'),
131
- };
132
- }
133
- return null;
134
- }
135
-
136
- function makeRowActionsColumn<TData extends MRT_RowData>(
137
- { creatingRow, tableOptions }: Params<TData>,
138
- order: MRT_ColumnOrderState,
139
- ): MRT_ColumnDef<TData> | null {
140
- const id: MRT_DisplayColumnIds = 'mrt-row-actions';
141
- if (
142
- order.includes(id) ||
143
- (creatingRow && tableOptions.createDisplayMode === 'row')
144
- ) {
145
- return {
146
- Cell: ({ cell, row, table }) => (
147
- <MRT_ToggleRowActionMenuButton cell={cell} row={row} table={table} />
148
- ),
149
- ...defaultDisplayColumnProps(tableOptions, id, 'actions'),
150
- };
151
- }
152
- return null;
153
- }
154
-
155
- function makeRowExpandColumn<TData extends MRT_RowData>(
156
- { grouping, tableOptions }: Params<TData>,
157
- order: MRT_ColumnOrderState,
158
- ): MRT_ColumnDef<TData> | null {
159
- const id: MRT_DisplayColumnIds = 'mrt-row-expand';
160
- if (
161
- order.includes(id) &&
162
- showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
163
- ) {
164
- const alignProps =
165
- tableOptions.positionExpandColumn === 'last'
166
- ? ({
167
- align: 'right',
168
- } as const)
169
- : undefined;
170
-
171
- return {
172
- Cell: ({ cell, column, row, table }) => {
173
- const expandButtonProps = { row, table };
174
- const subRowsLength = row.subRows?.length;
175
- if (
176
- tableOptions.groupedColumnMode === 'remove' &&
177
- row.groupingColumnId
178
- ) {
179
- return (
180
- <Stack alignItems="center" flexDirection="row" gap="0.25rem">
181
- <MRT_ExpandButton {...expandButtonProps} />
182
- <Tooltip
183
- enterDelay={1000}
184
- enterNextDelay={1000}
185
- placement="right"
186
- title={table.getColumn(row.groupingColumnId).columnDef.header}
187
- >
188
- <span>{row.groupingValue as ReactNode}</span>
189
- </Tooltip>
190
- {!!subRowsLength && <span>({subRowsLength})</span>}
191
- </Stack>
192
- );
193
- } else {
194
- return (
195
- <>
196
- <MRT_ExpandButton {...expandButtonProps} />
197
- {column.columnDef.GroupedCell?.({ cell, column, row, table })}
198
- </>
199
- );
200
- }
201
- },
202
- Header: tableOptions.enableExpandAll
203
- ? ({ table }) => {
204
- return (
205
- <>
206
- <MRT_ExpandAllButton table={table} />
207
- {tableOptions.groupedColumnMode === 'remove' &&
208
- grouping
209
- .map(
210
- (groupedColumnId) =>
211
- table.getColumn(groupedColumnId).columnDef.header,
212
- )
213
- .join(', ')}
214
- </>
215
- );
216
- }
217
- : undefined,
218
- muiTableBodyCellProps: alignProps,
219
- muiTableHeadCellProps: alignProps,
220
- ...defaultDisplayColumnProps(
221
- tableOptions,
222
- id,
223
- 'expand',
224
- tableOptions.groupedColumnMode === 'remove'
225
- ? tableOptions?.defaultColumn?.size
226
- : 60,
227
- ),
228
- };
229
- }
230
- return null;
231
- }
232
-
233
- function makeRowSelectColumn<TData extends MRT_RowData>(
234
- { tableOptions }: Params<TData>,
235
- order: MRT_ColumnOrderState,
236
- ): MRT_ColumnDef<TData> | null {
237
- const id: MRT_DisplayColumnIds = 'mrt-row-select';
238
- if (order.includes(id)) {
239
- return {
240
- Cell: ({ row, staticRowIndex, table }) => (
241
- <MRT_SelectCheckbox
242
- row={row}
243
- staticRowIndex={staticRowIndex}
244
- table={table}
245
- />
246
- ),
247
- Header:
248
- tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
249
- ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
250
- : undefined,
251
- ...defaultDisplayColumnProps(tableOptions, id, 'select'),
252
- };
253
- }
254
- return null;
255
- }
256
-
257
- function makeRowNumbersColumn<TData extends MRT_RowData>(
258
- { tableOptions }: Params<TData>,
259
- order: MRT_ColumnOrderState,
260
- ): MRT_ColumnDef<TData> | null {
261
- const id: MRT_DisplayColumnIds = 'mrt-row-numbers';
262
- if (order.includes(id) || tableOptions.enableRowNumbers)
263
- return {
264
- Cell: ({ row, staticRowIndex }) =>
265
- ((tableOptions.rowNumberDisplayMode === 'static'
266
- ? staticRowIndex
267
- : row.index) ?? 0) + 1,
268
- Header: () => tableOptions.localization.rowNumber,
269
- ...defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'),
270
- };
271
- return null;
272
- }
273
-
274
- const blankColProps = {
275
- children: null,
276
- sx: {
277
- flex: '1 0 auto',
278
- minWidth: 0,
279
- p: 0,
280
- width: 0,
281
- },
282
- };
283
-
284
- function makeSpacerColumn<TData extends MRT_RowData>(
285
- { tableOptions }: Params<TData>,
286
- order: MRT_ColumnOrderState,
287
- ): MRT_ColumnDef<TData> | null {
288
- const id: MRT_DisplayColumnIds = 'mrt-row-spacer';
289
- if (order.includes(id)) {
290
- return {
291
- ...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
292
- ...MRT_DefaultDisplayColumn,
293
- muiTableBodyCellProps: blankColProps,
294
- muiTableFooterCellProps: blankColProps,
295
- muiTableHeadCellProps: blankColProps,
296
- };
297
- }
298
- return null;
299
- }
@@ -1,7 +0,0 @@
1
- export * from './MRT_EditCellTextField';
2
- export * from './MRT_FilterCheckbox';
3
- export * from './MRT_FilterRangeFields';
4
- export * from './MRT_FilterRangeSlider';
5
- export * from './MRT_FilterTextField';
6
- export * from './MRT_GlobalFilterTextField';
7
- export * from './MRT_SelectCheckbox';
@@ -1,5 +0,0 @@
1
- export * from './MRT_ColumnActionMenu';
2
- export * from './MRT_FilterOptionMenu';
3
- export * from './MRT_RowActionMenu';
4
- export * from './MRT_ShowHideColumnsMenu';
5
- export * from './MRT_ShowHideColumnsMenuItems';
@@ -1 +0,0 @@
1
- export * from './MRT_EditRowModal';
@@ -1,5 +0,0 @@
1
- export * from '../modals/MRT_EditRowModal';
2
- export * from './MRT_Table';
3
- export * from './MRT_TableContainer';
4
- export * from './MRT_TableLoadingOverlay';
5
- export * from './MRT_TablePaper';
@@ -1,7 +0,0 @@
1
- export * from './MRT_BottomToolbar';
2
- export * from './MRT_LinearProgressBar';
3
- export * from './MRT_TablePagination';
4
- export * from './MRT_ToolbarAlertBanner';
5
- export * from './MRT_ToolbarDropZone';
6
- export * from './MRT_ToolbarInternalButtons';
7
- export * from './MRT_TopToolbar';