material-react-table 2.0.0-alpha.0 → 2.0.0-alpha.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/README.md +2 -2
- package/dist/cjs/index.js +2480 -2392
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/MaterialReactTable.d.ts +1 -1
- package/dist/cjs/types/body/MRT_TableBodyRow.d.ts +3 -2
- package/dist/cjs/types/body/MRT_TableBodyRowPinButton.d.ts +7 -0
- package/dist/cjs/types/body/index.d.ts +1 -0
- package/dist/cjs/types/buttons/MRT_GrabHandleButton.d.ts +1 -1
- package/dist/cjs/types/buttons/MRT_RowPinButton.d.ts +9 -0
- package/dist/cjs/types/buttons/index.d.ts +2 -1
- package/dist/cjs/types/column.utils.d.ts +7 -6
- package/dist/cjs/types/filterFns.d.ts +14 -14
- package/dist/cjs/types/head/MRT_TableHeadCellFilterLabel.d.ts +1 -1
- package/dist/cjs/types/head/MRT_TableHeadCellSortLabel.d.ts +1 -1
- package/dist/cjs/types/hooks/useMRT_DisplayColumns.d.ts +3 -3
- package/dist/cjs/types/icons.d.ts +1 -1
- package/dist/cjs/types/inputs/MRT_FilterRangeSlider.d.ts +1 -1
- package/dist/cjs/types/menus/MRT_ColumnActionMenu.d.ts +4 -4
- package/dist/cjs/types/menus/MRT_ShowHideColumnsMenuItems.d.ts +1 -1
- package/dist/cjs/types/toolbar/MRT_TablePagination.d.ts +2 -2
- package/dist/cjs/types/toolbar/MRT_TopToolbar.d.ts +1 -1
- package/dist/cjs/types/types.d.ts +203 -197
- package/dist/esm/material-react-table.esm.js +2442 -2358
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/types/MaterialReactTable.d.ts +1 -1
- package/dist/esm/types/body/MRT_TableBodyRow.d.ts +3 -2
- package/dist/esm/types/body/MRT_TableBodyRowPinButton.d.ts +7 -0
- package/dist/esm/types/body/index.d.ts +1 -0
- package/dist/esm/types/buttons/MRT_GrabHandleButton.d.ts +1 -1
- package/dist/esm/types/buttons/MRT_RowPinButton.d.ts +9 -0
- package/dist/esm/types/buttons/index.d.ts +2 -1
- package/dist/esm/types/column.utils.d.ts +7 -6
- package/dist/esm/types/filterFns.d.ts +14 -14
- package/dist/esm/types/head/MRT_TableHeadCellFilterLabel.d.ts +1 -1
- package/dist/esm/types/head/MRT_TableHeadCellSortLabel.d.ts +1 -1
- package/dist/esm/types/hooks/useMRT_DisplayColumns.d.ts +3 -3
- package/dist/esm/types/icons.d.ts +1 -1
- package/dist/esm/types/inputs/MRT_FilterRangeSlider.d.ts +1 -1
- package/dist/esm/types/menus/MRT_ColumnActionMenu.d.ts +4 -4
- package/dist/esm/types/menus/MRT_ShowHideColumnsMenuItems.d.ts +1 -1
- package/dist/esm/types/toolbar/MRT_TablePagination.d.ts +2 -2
- package/dist/esm/types/toolbar/MRT_TopToolbar.d.ts +1 -1
- package/dist/esm/types/types.d.ts +203 -197
- package/dist/index.d.ts +293 -272
- package/locales/en.esm.js +1 -0
- package/locales/en.esm.js.map +1 -1
- package/locales/en.js +1 -0
- package/locales/en.js.map +1 -1
- package/locales/fr.esm.js +1 -1
- package/locales/fr.esm.js.map +1 -1
- package/locales/fr.js +1 -1
- package/locales/fr.js.map +1 -1
- package/package.json +10 -9
- package/src/MaterialReactTable.tsx +2 -2
- package/src/body/MRT_TableBody.tsx +180 -76
- package/src/body/MRT_TableBodyCell.tsx +45 -43
- package/src/body/MRT_TableBodyCellValue.tsx +5 -5
- package/src/body/MRT_TableBodyRow.tsx +117 -29
- package/src/body/MRT_TableBodyRowGrabHandle.tsx +6 -5
- package/src/body/MRT_TableBodyRowPinButton.tsx +46 -0
- package/src/body/MRT_TableDetailPanel.tsx +16 -22
- package/src/body/index.ts +2 -1
- package/src/buttons/MRT_CopyButton.tsx +14 -20
- package/src/buttons/MRT_EditActionButtons.tsx +4 -4
- package/src/buttons/MRT_ExpandAllButton.tsx +7 -9
- package/src/buttons/MRT_ExpandButton.tsx +6 -7
- package/src/buttons/MRT_GrabHandleButton.tsx +12 -13
- package/src/buttons/MRT_RowPinButton.tsx +74 -0
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +1 -1
- package/src/buttons/MRT_ToggleFullScreenButton.tsx +2 -2
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +9 -10
- package/src/buttons/index.ts +2 -1
- package/src/column.utils.ts +33 -21
- package/src/filterFns.ts +29 -29
- package/src/footer/MRT_TableFooter.tsx +14 -8
- package/src/footer/MRT_TableFooterCell.tsx +8 -21
- package/src/footer/MRT_TableFooterRow.tsx +7 -8
- package/src/head/MRT_TableHead.tsx +12 -8
- package/src/head/MRT_TableHeadCell.tsx +18 -25
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +18 -23
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +11 -4
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +106 -61
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +8 -15
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +11 -11
- package/src/head/MRT_TableHeadCellSortLabel.tsx +8 -8
- package/src/head/MRT_TableHeadRow.tsx +7 -8
- package/src/hooks/useMRT_DisplayColumns.tsx +17 -4
- package/src/hooks/useMRT_Effects.ts +3 -3
- package/src/hooks/useMRT_TableInstance.ts +17 -10
- package/src/hooks/useMRT_TableOptions.ts +9 -5
- package/src/icons.ts +2 -2
- package/src/inputs/MRT_EditCellTextField.tsx +23 -31
- package/src/inputs/MRT_FilterCheckbox.tsx +17 -29
- package/src/inputs/MRT_FilterRangeFields.tsx +1 -1
- package/src/inputs/MRT_FilterRangeSlider.tsx +12 -29
- package/src/inputs/MRT_FilterTextField.tsx +83 -99
- package/src/inputs/MRT_GlobalFilterTextField.tsx +29 -29
- package/src/inputs/MRT_SelectCheckbox.tsx +35 -21
- package/src/locales/en.ts +1 -1
- package/src/locales/fr.ts +1 -1
- package/src/menus/MRT_ColumnActionMenu.tsx +14 -14
- package/src/menus/MRT_FilterOptionMenu.tsx +35 -35
- package/src/menus/MRT_RowActionMenu.tsx +17 -18
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +6 -6
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +5 -5
- package/src/modals/MRT_EditRowModal.tsx +12 -20
- package/src/sortingFns.ts +1 -1
- package/src/table/MRT_Table.tsx +14 -19
- package/src/table/MRT_TableContainer.tsx +14 -20
- package/src/table/MRT_TablePaper.tsx +16 -20
- package/src/toolbar/MRT_BottomToolbar.tsx +18 -24
- package/src/toolbar/MRT_LinearProgressBar.tsx +8 -7
- package/src/toolbar/MRT_TablePagination.tsx +23 -25
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +11 -14
- package/src/toolbar/MRT_ToolbarDropZone.tsx +6 -6
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +8 -5
- package/src/toolbar/MRT_TopToolbar.tsx +14 -20
- package/src/types.ts +269 -252
- package/src/useMaterialReactTable.ts +1 -1
@@ -1,4 +1,6 @@
|
|
1
1
|
import { type Dispatch, type MutableRefObject, type ReactNode, type RefObject, type SetStateAction } from 'react';
|
2
|
+
import { type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
|
3
|
+
import { type VirtualItem, type Virtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
|
2
4
|
import { type AlertProps } from '@mui/material/Alert';
|
3
5
|
import { type ButtonProps } from '@mui/material/Button';
|
4
6
|
import { type CheckboxProps } from '@mui/material/Checkbox';
|
@@ -10,22 +12,20 @@ import { type PaperProps } from '@mui/material/Paper';
|
|
10
12
|
import { type RadioProps } from '@mui/material/Radio';
|
11
13
|
import { type SkeletonProps } from '@mui/material/Skeleton';
|
12
14
|
import { type SliderProps } from '@mui/material/Slider';
|
15
|
+
import { type TableProps } from '@mui/material/Table';
|
13
16
|
import { type TableBodyProps } from '@mui/material/TableBody';
|
14
17
|
import { type TableCellProps } from '@mui/material/TableCell';
|
15
18
|
import { type TableContainerProps } from '@mui/material/TableContainer';
|
16
19
|
import { type TableFooterProps } from '@mui/material/TableFooter';
|
17
20
|
import { type TableHeadProps } from '@mui/material/TableHead';
|
18
21
|
import { type TablePaginationProps } from '@mui/material/TablePagination';
|
19
|
-
import { type TableProps } from '@mui/material/Table';
|
20
22
|
import { type TableRowProps } from '@mui/material/TableRow';
|
21
23
|
import { type TextFieldProps } from '@mui/material/TextField';
|
22
24
|
import { type ToolbarProps } from '@mui/material/Toolbar';
|
23
|
-
import { type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
|
24
|
-
import { type VirtualizerOptions, type Virtualizer, type VirtualItem } from '@tanstack/react-virtual';
|
25
25
|
import { type MRT_AggregationFns } from './aggregationFns';
|
26
26
|
import { type MRT_FilterFns } from './filterFns';
|
27
|
-
import { type MRT_SortingFns } from './sortingFns';
|
28
27
|
import { type MRT_Icons } from './icons';
|
28
|
+
import { type MRT_SortingFns } from './sortingFns';
|
29
29
|
export type { MRT_Icons };
|
30
30
|
export type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
31
31
|
export type Prettify<T> = {
|
@@ -49,7 +49,6 @@ export interface MRT_Localization {
|
|
49
49
|
clearSearch: string;
|
50
50
|
clearSort: string;
|
51
51
|
clickToCopy: string;
|
52
|
-
create?: string;
|
53
52
|
collapse: string;
|
54
53
|
collapseAll: string;
|
55
54
|
columnActions: string;
|
@@ -99,6 +98,7 @@ export interface MRT_Localization {
|
|
99
98
|
noResultsFound: string;
|
100
99
|
of: string;
|
101
100
|
or: string;
|
101
|
+
pin?: string;
|
102
102
|
pinToLeft: string;
|
103
103
|
pinToRight: string;
|
104
104
|
resetColumnSize: string;
|
@@ -137,11 +137,13 @@ export interface MRT_RowModel<TData extends Record<string, any>> {
|
|
137
137
|
[key: string]: MRT_Row<TData>;
|
138
138
|
};
|
139
139
|
}
|
140
|
-
export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
|
140
|
+
export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
|
141
141
|
getAllColumns: () => MRT_Column<TData>[];
|
142
142
|
getAllFlatColumns: () => MRT_Column<TData>[];
|
143
143
|
getAllLeafColumns: () => MRT_Column<TData>[];
|
144
|
+
getBottomRows: () => MRT_Row<TData>[];
|
144
145
|
getCenterLeafColumns: () => MRT_Column<TData>[];
|
146
|
+
getCenterRows: () => MRT_Row<TData>[];
|
145
147
|
getColumn: (columnId: string) => MRT_Column<TData>;
|
146
148
|
getExpandedRowModel: () => MRT_RowModel<TData>;
|
147
149
|
getFlatHeaders: () => MRT_Header<TData>[];
|
@@ -154,6 +156,7 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TD
|
|
154
156
|
getRowModel: () => MRT_RowModel<TData>;
|
155
157
|
getSelectedRowModel: () => MRT_RowModel<TData>;
|
156
158
|
getState: () => MRT_TableState<TData>;
|
159
|
+
getTopRows: () => MRT_Row<TData>[];
|
157
160
|
options: MRT_DefinedTableOptions<TData>;
|
158
161
|
refs: {
|
159
162
|
bottomToolbarRef: MutableRefObject<HTMLDivElement>;
|
@@ -161,24 +164,26 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TD
|
|
161
164
|
filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
|
162
165
|
searchInputRef: MutableRefObject<HTMLInputElement>;
|
163
166
|
tableContainerRef: MutableRefObject<HTMLDivElement>;
|
167
|
+
tableFooterRef: MutableRefObject<HTMLTableSectionElement>;
|
164
168
|
tableHeadCellRefs: MutableRefObject<Record<string, HTMLTableCellElement>>;
|
169
|
+
tableHeadRef: MutableRefObject<HTMLTableSectionElement>;
|
165
170
|
tablePaperRef: MutableRefObject<HTMLDivElement>;
|
166
171
|
topToolbarRef: MutableRefObject<HTMLDivElement>;
|
167
172
|
};
|
168
|
-
setCreatingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | true>>;
|
169
173
|
setColumnFilterFns: Dispatch<SetStateAction<MRT_ColumnFilterFnsState>>;
|
174
|
+
setCreatingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | true>>;
|
170
175
|
setDensity: Dispatch<SetStateAction<MRT_DensityState>>;
|
171
176
|
setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
172
177
|
setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
173
178
|
setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
|
174
179
|
setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
175
180
|
setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
|
176
|
-
setHoveredColumn: Dispatch<SetStateAction<
|
181
|
+
setHoveredColumn: Dispatch<SetStateAction<{
|
177
182
|
id: string;
|
178
|
-
} | null>>;
|
179
|
-
setHoveredRow: Dispatch<SetStateAction<
|
183
|
+
} | MRT_Column<TData> | null>>;
|
184
|
+
setHoveredRow: Dispatch<SetStateAction<{
|
180
185
|
id: string;
|
181
|
-
} | null>>;
|
186
|
+
} | MRT_Row<TData> | null>>;
|
182
187
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
183
188
|
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
184
189
|
setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
|
@@ -186,8 +191,8 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TD
|
|
186
191
|
setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
|
187
192
|
};
|
188
193
|
export type MRT_DefinedTableOptions<TData extends Record<string, any>> = MRT_TableOptions<TData> & {
|
189
|
-
localization: MRT_Localization;
|
190
194
|
icons: MRT_Icons;
|
195
|
+
localization: MRT_Localization;
|
191
196
|
};
|
192
197
|
export type MRT_TableState<TData extends Record<string, any>> = TableState & {
|
193
198
|
columnFilterFns: MRT_ColumnFilterFnsState;
|
@@ -198,12 +203,12 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
|
|
198
203
|
editingCell: MRT_Cell<TData> | null;
|
199
204
|
editingRow: MRT_Row<TData> | null;
|
200
205
|
globalFilterFn: MRT_FilterOption;
|
201
|
-
hoveredColumn:
|
206
|
+
hoveredColumn: {
|
202
207
|
id: string;
|
203
|
-
} | null;
|
204
|
-
hoveredRow:
|
208
|
+
} | MRT_Column<TData> | null;
|
209
|
+
hoveredRow: {
|
205
210
|
id: string;
|
206
|
-
} | null;
|
211
|
+
} | MRT_Row<TData> | null;
|
207
212
|
isFullScreen: boolean;
|
208
213
|
isLoading: boolean;
|
209
214
|
isSaving: boolean;
|
@@ -223,8 +228,8 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
|
|
223
228
|
}) => ReactNode;
|
224
229
|
Cell?: (props: {
|
225
230
|
cell: MRT_Cell<TData>;
|
226
|
-
renderedCellValue: number | string | ReactNode;
|
227
231
|
column: MRT_Column<TData>;
|
232
|
+
renderedCellValue: ReactNode | number | string;
|
228
233
|
row: MRT_Row<TData>;
|
229
234
|
rowRef?: RefObject<HTMLTableRowElement>;
|
230
235
|
table: MRT_TableInstance<TData>;
|
@@ -241,22 +246,22 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
|
|
241
246
|
rangeFilterIndex?: number;
|
242
247
|
table: MRT_TableInstance<TData>;
|
243
248
|
}) => ReactNode;
|
244
|
-
Footer?:
|
249
|
+
Footer?: ((props: {
|
245
250
|
column: MRT_Column<TData>;
|
246
251
|
footer: MRT_Header<TData>;
|
247
252
|
table: MRT_TableInstance<TData>;
|
248
|
-
}) => ReactNode);
|
253
|
+
}) => ReactNode) | ReactNode;
|
249
254
|
GroupedCell?: (props: {
|
250
255
|
cell: MRT_Cell<TData>;
|
251
256
|
column: MRT_Column<TData>;
|
252
257
|
row: MRT_Row<TData>;
|
253
258
|
table: MRT_TableInstance<TData>;
|
254
259
|
}) => ReactNode;
|
255
|
-
Header?:
|
260
|
+
Header?: ((props: {
|
256
261
|
column: MRT_Column<TData>;
|
257
262
|
header: MRT_Header<TData>;
|
258
263
|
table: MRT_TableInstance<TData>;
|
259
|
-
}) => ReactNode);
|
264
|
+
}) => ReactNode) | ReactNode;
|
260
265
|
PlaceholderCell?: (props: {
|
261
266
|
cell: MRT_Cell<TData>;
|
262
267
|
column: MRT_Column<TData>;
|
@@ -278,8 +283,8 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
|
|
278
283
|
* @example accessorKey: 'username' //simple
|
279
284
|
* @example accessorKey: 'name.firstName' //deep key dot notation
|
280
285
|
*/
|
281
|
-
accessorKey?: (string & {})
|
282
|
-
aggregationFn?: MRT_AggregationFn<TData
|
286
|
+
accessorKey?: DeepKeys<TData> | (string & {});
|
287
|
+
aggregationFn?: Array<MRT_AggregationFn<TData>> | MRT_AggregationFn<TData>;
|
283
288
|
/**
|
284
289
|
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
285
290
|
* Leave this blank if you are just creating a normal data column.
|
@@ -291,23 +296,23 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
|
|
291
296
|
columnDefType?: 'data' | 'display' | 'group';
|
292
297
|
columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
|
293
298
|
columns?: MRT_ColumnDef<TData>[];
|
294
|
-
editSelectOptions?: (
|
299
|
+
editSelectOptions?: ({
|
295
300
|
text: string;
|
296
301
|
value: any;
|
297
|
-
})[];
|
298
|
-
editVariant?: '
|
302
|
+
} | string)[];
|
303
|
+
editVariant?: 'select' | 'text';
|
299
304
|
enableClickToCopy?: boolean;
|
300
305
|
enableColumnActions?: boolean;
|
301
306
|
enableColumnDragging?: boolean;
|
302
307
|
enableColumnFilterModes?: boolean;
|
303
308
|
enableColumnOrdering?: boolean;
|
304
|
-
enableEditing?:
|
309
|
+
enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
|
305
310
|
enableFilterMatchHighlighting?: boolean;
|
306
311
|
filterFn?: MRT_FilterFn<TData>;
|
307
|
-
filterSelectOptions?: (
|
312
|
+
filterSelectOptions?: ({
|
308
313
|
text: string;
|
309
314
|
value: any;
|
310
|
-
})[];
|
315
|
+
} | string)[];
|
311
316
|
filterVariant?: 'checkbox' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
|
312
317
|
/**
|
313
318
|
* footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
|
@@ -327,53 +332,53 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
|
|
327
332
|
* @default gets set to the same value as `accessorKey` by default
|
328
333
|
*/
|
329
334
|
id?: LiteralUnion<string & keyof TData>;
|
330
|
-
|
331
|
-
|
335
|
+
muiColumnActionsButtonProps?: ((props: {
|
336
|
+
column: MRT_Column<TData>;
|
337
|
+
table: MRT_TableInstance<TData>;
|
338
|
+
}) => IconButtonProps) | IconButtonProps;
|
339
|
+
muiColumnDragHandleProps?: ((props: {
|
332
340
|
column: MRT_Column<TData>;
|
333
|
-
row: MRT_Row<TData>;
|
334
341
|
table: MRT_TableInstance<TData>;
|
335
|
-
}) =>
|
336
|
-
|
342
|
+
}) => IconButtonProps) | IconButtonProps;
|
343
|
+
muiCopyButtonProps?: ((props: {
|
337
344
|
cell: MRT_Cell<TData>;
|
338
345
|
column: MRT_Column<TData>;
|
339
346
|
row: MRT_Row<TData>;
|
340
347
|
table: MRT_TableInstance<TData>;
|
341
|
-
}) =>
|
342
|
-
|
348
|
+
}) => ButtonProps) | ButtonProps;
|
349
|
+
muiEditTextFieldProps?: ((props: {
|
343
350
|
cell: MRT_Cell<TData>;
|
344
351
|
column: MRT_Column<TData>;
|
345
352
|
row: MRT_Row<TData>;
|
346
353
|
table: MRT_TableInstance<TData>;
|
347
|
-
}) =>
|
348
|
-
|
349
|
-
table: MRT_TableInstance<TData>;
|
354
|
+
}) => TextFieldProps) | TextFieldProps;
|
355
|
+
muiFilterCheckboxProps?: ((props: {
|
350
356
|
column: MRT_Column<TData>;
|
351
|
-
}) => TableCellProps);
|
352
|
-
muiColumnActionsButtonProps?: IconButtonProps | ((props: {
|
353
357
|
table: MRT_TableInstance<TData>;
|
358
|
+
}) => CheckboxProps) | CheckboxProps;
|
359
|
+
muiFilterSliderProps?: ((props: {
|
354
360
|
column: MRT_Column<TData>;
|
355
|
-
}) => IconButtonProps);
|
356
|
-
muiColumnDragHandleProps?: IconButtonProps | ((props: {
|
357
361
|
table: MRT_TableInstance<TData>;
|
362
|
+
}) => SliderProps) | SliderProps;
|
363
|
+
muiFilterTextFieldProps?: ((props: {
|
358
364
|
column: MRT_Column<TData>;
|
359
|
-
|
360
|
-
muiFilterCheckboxProps?: CheckboxProps | ((props: {
|
361
|
-
column: MRT_Column<TData>;
|
362
|
-
table: MRT_TableInstance<TData>;
|
363
|
-
}) => CheckboxProps);
|
364
|
-
muiFilterTextFieldProps?: TextFieldProps | ((props: {
|
365
|
+
rangeFilterIndex?: number;
|
365
366
|
table: MRT_TableInstance<TData>;
|
367
|
+
}) => TextFieldProps) | TextFieldProps;
|
368
|
+
muiTableBodyCellProps?: ((props: {
|
369
|
+
cell: MRT_Cell<TData>;
|
366
370
|
column: MRT_Column<TData>;
|
367
|
-
|
368
|
-
}) => TextFieldProps);
|
369
|
-
muiFilterSliderProps?: SliderProps | ((props: {
|
371
|
+
row: MRT_Row<TData>;
|
370
372
|
table: MRT_TableInstance<TData>;
|
373
|
+
}) => TableCellProps) | TableCellProps;
|
374
|
+
muiTableFooterCellProps?: ((props: {
|
371
375
|
column: MRT_Column<TData>;
|
372
|
-
}) => TextFieldProps);
|
373
|
-
muiTableHeadCellProps?: TableCellProps | ((props: {
|
374
376
|
table: MRT_TableInstance<TData>;
|
377
|
+
}) => TableCellProps) | TableCellProps;
|
378
|
+
muiTableHeadCellProps?: ((props: {
|
375
379
|
column: MRT_Column<TData>;
|
376
|
-
|
380
|
+
table: MRT_TableInstance<TData>;
|
381
|
+
}) => TableCellProps) | TableCellProps;
|
377
382
|
renderColumnActionsMenuItems?: (props: {
|
378
383
|
closeMenu: () => void;
|
379
384
|
column: MRT_Column<TData>;
|
@@ -388,12 +393,12 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
|
|
388
393
|
}) => ReactNode[];
|
389
394
|
sortingFn?: MRT_SortingFn<TData>;
|
390
395
|
};
|
391
|
-
export type MRT_DefinedColumnDef<TData extends Record<string, any>> = Omit<MRT_ColumnDef<TData>, '
|
396
|
+
export type MRT_DefinedColumnDef<TData extends Record<string, any>> = Omit<MRT_ColumnDef<TData>, 'defaultDisplayColumn' | 'id'> & {
|
397
|
+
_filterFn: MRT_FilterOption;
|
392
398
|
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
393
399
|
id: string;
|
394
|
-
_filterFn: MRT_FilterOption;
|
395
400
|
};
|
396
|
-
export type MRT_Column<TData extends Record<string, any>> = Omit<Column<TData, unknown>, '
|
401
|
+
export type MRT_Column<TData extends Record<string, any>> = Omit<Column<TData, unknown>, 'columnDef' | 'columns' | 'filterFn' | 'footer' | 'header'> & {
|
397
402
|
columnDef: MRT_DefinedColumnDef<TData>;
|
398
403
|
columns?: MRT_Column<TData>[];
|
399
404
|
filterFn?: MRT_FilterFn<TData>;
|
@@ -406,11 +411,11 @@ export type MRT_Header<TData extends Record<string, any>> = Omit<Header<TData, u
|
|
406
411
|
export type MRT_HeaderGroup<TData extends Record<string, any>> = Omit<HeaderGroup<TData>, 'headers'> & {
|
407
412
|
headers: MRT_Header<TData>[];
|
408
413
|
};
|
409
|
-
export type MRT_Row<TData extends Record<string, any>> = Omit<Row<TData>, '
|
414
|
+
export type MRT_Row<TData extends Record<string, any>> = Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'> & {
|
415
|
+
_valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
410
416
|
getAllCells: () => MRT_Cell<TData>[];
|
411
417
|
getVisibleCells: () => MRT_Cell<TData>[];
|
412
418
|
subRows?: MRT_Row<TData>[];
|
413
|
-
_valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
414
419
|
};
|
415
420
|
export type MRT_Cell<TData extends Record<string, any>> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
|
416
421
|
column: MRT_Column<TData>;
|
@@ -419,16 +424,16 @@ export type MRT_Cell<TData extends Record<string, any>> = Omit<Cell<TData, unkno
|
|
419
424
|
export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
|
420
425
|
export type MRT_AggregationFn<TData extends Record<string, any>> = AggregationFn<TData> | MRT_AggregationOption;
|
421
426
|
export type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
|
422
|
-
export type MRT_SortingFn<TData extends Record<string, any>> = SortingFn<TData
|
427
|
+
export type MRT_SortingFn<TData extends Record<string, any>> = MRT_SortingOption | SortingFn<TData>;
|
423
428
|
export type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
|
424
429
|
export type MRT_FilterFn<TData extends Record<string, any>> = FilterFn<TData> | MRT_FilterOption;
|
425
430
|
export type MRT_InternalFilterOption = {
|
431
|
+
divider: boolean;
|
432
|
+
label: string;
|
426
433
|
option: string;
|
427
434
|
symbol: string;
|
428
|
-
label: string;
|
429
|
-
divider: boolean;
|
430
435
|
};
|
431
|
-
export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
|
436
|
+
export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-pin' | 'mrt-row-select';
|
432
437
|
/**
|
433
438
|
* `columns` and `data` props are the only required props, but there are over 170 other optional props.
|
434
439
|
*
|
@@ -439,7 +444,12 @@ export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row
|
|
439
444
|
* @link https://www.material-react-table.com/docs/api/props
|
440
445
|
*/
|
441
446
|
export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
|
447
|
+
columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader';
|
442
448
|
columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
|
449
|
+
columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableCellElement> | null>;
|
450
|
+
columnVirtualizerOptions?: ((props: {
|
451
|
+
table: MRT_TableInstance<TData>;
|
452
|
+
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
|
443
453
|
/**
|
444
454
|
* The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
|
445
455
|
*
|
@@ -451,10 +461,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
451
461
|
* @link https://www.material-react-table.com/docs/api/column-options
|
452
462
|
*/
|
453
463
|
columns: MRT_ColumnDef<TData>[];
|
454
|
-
|
455
|
-
columnVirtualizerOptions?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | ((props: {
|
456
|
-
table: MRT_TableInstance<TData>;
|
457
|
-
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>);
|
464
|
+
createDisplayMode?: 'custom' | 'modal' | 'row';
|
458
465
|
/**
|
459
466
|
* Pass your data as an array of objects. Objects can theoretically be any shape, but it's best to keep them consistent.
|
460
467
|
*
|
@@ -473,11 +480,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
473
480
|
displayColumnDefOptions?: Partial<{
|
474
481
|
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef<TData>>;
|
475
482
|
}>;
|
476
|
-
|
477
|
-
editDisplayMode?: 'modal' | 'row' | 'cell' | 'table' | 'custom';
|
478
|
-
columnFilterDisplayMode?: 'subheader' | 'popover' | 'custom';
|
479
|
-
paginationDisplayMode?: 'default' | 'pages' | 'custom';
|
480
|
-
selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
|
483
|
+
editDisplayMode?: 'cell' | 'custom' | 'modal' | 'row' | 'table';
|
481
484
|
enableBottomToolbar?: boolean;
|
482
485
|
enableClickToCopy?: boolean;
|
483
486
|
enableColumnActions?: boolean;
|
@@ -486,7 +489,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
486
489
|
enableColumnOrdering?: boolean;
|
487
490
|
enableColumnVirtualization?: boolean;
|
488
491
|
enableDensityToggle?: boolean;
|
489
|
-
enableEditing?:
|
492
|
+
enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
|
490
493
|
enableExpandAll?: boolean;
|
491
494
|
enableFacetedValues?: boolean;
|
492
495
|
enableFilterMatchHighlighting?: boolean;
|
@@ -498,7 +501,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
498
501
|
enableRowDragging?: boolean;
|
499
502
|
enableRowNumbers?: boolean;
|
500
503
|
enableRowOrdering?: boolean;
|
501
|
-
enableRowSelection?:
|
504
|
+
enableRowSelection?: ((row: MRT_Row<TData>) => boolean) | boolean;
|
502
505
|
enableRowVirtualization?: boolean;
|
503
506
|
enableSelectAll?: boolean;
|
504
507
|
enableStickyFooter?: boolean;
|
@@ -516,7 +519,7 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
516
519
|
/**
|
517
520
|
* Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
|
518
521
|
*/
|
519
|
-
layoutMode?: '
|
522
|
+
layoutMode?: 'grid' | 'semantic';
|
520
523
|
/**
|
521
524
|
* Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.
|
522
525
|
*
|
@@ -531,143 +534,146 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
531
534
|
* @link https://www.material-react-table.com/docs/guides/memoize-components
|
532
535
|
*/
|
533
536
|
memoMode?: 'cells' | 'rows' | 'table-body';
|
534
|
-
muiBottomToolbarProps?:
|
537
|
+
muiBottomToolbarProps?: ((props: {
|
535
538
|
table: MRT_TableInstance<TData>;
|
536
|
-
}) => ToolbarProps);
|
537
|
-
|
539
|
+
}) => ToolbarProps) | ToolbarProps;
|
540
|
+
muiColumnActionsButtonProps?: ((props: {
|
541
|
+
column: MRT_Column<TData>;
|
538
542
|
table: MRT_TableInstance<TData>;
|
539
|
-
}) => IconButtonProps);
|
540
|
-
|
543
|
+
}) => IconButtonProps) | IconButtonProps;
|
544
|
+
muiColumnDragHandleProps?: ((props: {
|
545
|
+
column: MRT_Column<TData>;
|
541
546
|
table: MRT_TableInstance<TData>;
|
547
|
+
}) => IconButtonProps) | IconButtonProps;
|
548
|
+
muiCopyButtonProps?: ((props: {
|
549
|
+
cell: MRT_Cell<TData>;
|
550
|
+
column: MRT_Column<TData>;
|
542
551
|
row: MRT_Row<TData>;
|
543
|
-
}) => IconButtonProps);
|
544
|
-
muiLinearProgressProps?: LinearProgressProps | ((props: {
|
545
|
-
isTopToolbar: boolean;
|
546
|
-
table: MRT_TableInstance<TData>;
|
547
|
-
}) => LinearProgressProps);
|
548
|
-
muiSearchTextFieldProps?: TextFieldProps | ((props: {
|
549
552
|
table: MRT_TableInstance<TData>;
|
550
|
-
}) =>
|
551
|
-
|
553
|
+
}) => ButtonProps) | ButtonProps;
|
554
|
+
muiCreateRowModalProps?: ((props: {
|
555
|
+
row: MRT_Row<TData>;
|
552
556
|
table: MRT_TableInstance<TData>;
|
553
|
-
}) =>
|
554
|
-
|
557
|
+
}) => DialogProps) | DialogProps;
|
558
|
+
muiDetailPanelProps?: ((props: {
|
559
|
+
row: MRT_Row<TData>;
|
555
560
|
table: MRT_TableInstance<TData>;
|
561
|
+
}) => TableCellProps) | TableCellProps;
|
562
|
+
muiEditRowModalProps?: ((props: {
|
556
563
|
row: MRT_Row<TData>;
|
557
|
-
|
558
|
-
|
564
|
+
table: MRT_TableInstance<TData>;
|
565
|
+
}) => DialogProps) | DialogProps;
|
566
|
+
muiEditTextFieldProps?: ((props: {
|
559
567
|
cell: MRT_Cell<TData>;
|
560
568
|
column: MRT_Column<TData>;
|
561
569
|
row: MRT_Row<TData>;
|
562
570
|
table: MRT_TableInstance<TData>;
|
563
|
-
}) =>
|
564
|
-
|
565
|
-
|
566
|
-
|
571
|
+
}) => TextFieldProps) | TextFieldProps;
|
572
|
+
muiExpandAllButtonProps?: ((props: {
|
573
|
+
table: MRT_TableInstance<TData>;
|
574
|
+
}) => IconButtonProps) | IconButtonProps;
|
575
|
+
muiExpandButtonProps?: ((props: {
|
567
576
|
row: MRT_Row<TData>;
|
568
577
|
table: MRT_TableInstance<TData>;
|
569
|
-
}) =>
|
570
|
-
|
571
|
-
cell: MRT_Cell<TData>;
|
578
|
+
}) => IconButtonProps) | IconButtonProps;
|
579
|
+
muiFilterCheckboxProps?: ((props: {
|
572
580
|
column: MRT_Column<TData>;
|
573
|
-
row: MRT_Row<TData>;
|
574
581
|
table: MRT_TableInstance<TData>;
|
575
|
-
}) =>
|
576
|
-
|
577
|
-
cell: MRT_Cell<TData>;
|
582
|
+
}) => CheckboxProps) | CheckboxProps;
|
583
|
+
muiFilterSliderProps?: ((props: {
|
578
584
|
column: MRT_Column<TData>;
|
579
|
-
row: MRT_Row<TData>;
|
580
585
|
table: MRT_TableInstance<TData>;
|
581
|
-
}) =>
|
582
|
-
|
586
|
+
}) => SliderProps) | SliderProps;
|
587
|
+
muiFilterTextFieldProps?: ((props: {
|
588
|
+
column: MRT_Column<TData>;
|
589
|
+
rangeFilterIndex?: number;
|
583
590
|
table: MRT_TableInstance<TData>;
|
584
|
-
}) =>
|
585
|
-
|
591
|
+
}) => TextFieldProps) | TextFieldProps;
|
592
|
+
muiLinearProgressProps?: ((props: {
|
593
|
+
isTopToolbar: boolean;
|
586
594
|
table: MRT_TableInstance<TData>;
|
595
|
+
}) => LinearProgressProps) | LinearProgressProps;
|
596
|
+
muiRowDragHandleProps?: ((props: {
|
587
597
|
row: MRT_Row<TData>;
|
588
|
-
}) => IconButtonProps);
|
589
|
-
muiTableBodyRowProps?: TableRowProps | ((props: {
|
590
|
-
isDetailPanel?: boolean;
|
591
|
-
row: MRT_Row<TData>;
|
592
|
-
staticRowIndex: number;
|
593
598
|
table: MRT_TableInstance<TData>;
|
594
|
-
}) =>
|
595
|
-
|
599
|
+
}) => IconButtonProps) | IconButtonProps;
|
600
|
+
muiSearchTextFieldProps?: ((props: {
|
596
601
|
table: MRT_TableInstance<TData>;
|
597
|
-
}) =>
|
598
|
-
|
602
|
+
}) => TextFieldProps) | TextFieldProps;
|
603
|
+
muiSelectAllCheckboxProps?: ((props: {
|
599
604
|
table: MRT_TableInstance<TData>;
|
605
|
+
}) => CheckboxProps) | CheckboxProps;
|
606
|
+
muiSelectCheckboxProps?: ((props: {
|
600
607
|
row: MRT_Row<TData>;
|
601
|
-
}) => TableCellProps);
|
602
|
-
muiTableFooterCellProps?: TableCellProps | ((props: {
|
603
608
|
table: MRT_TableInstance<TData>;
|
609
|
+
}) => CheckboxProps | RadioProps) | (CheckboxProps | RadioProps);
|
610
|
+
muiSkeletonProps?: ((props: {
|
611
|
+
cell: MRT_Cell<TData>;
|
604
612
|
column: MRT_Column<TData>;
|
605
|
-
|
606
|
-
muiTableFooterProps?: TableFooterProps | ((props: {
|
607
|
-
table: MRT_TableInstance<TData>;
|
608
|
-
}) => TableFooterProps);
|
609
|
-
muiTableFooterRowProps?: TableRowProps | ((props: {
|
610
|
-
table: MRT_TableInstance<TData>;
|
611
|
-
footerGroup: MRT_HeaderGroup<TData>;
|
612
|
-
}) => TableRowProps);
|
613
|
-
muiColumnActionsButtonProps?: IconButtonProps | ((props: {
|
613
|
+
row: MRT_Row<TData>;
|
614
614
|
table: MRT_TableInstance<TData>;
|
615
|
+
}) => SkeletonProps) | SkeletonProps;
|
616
|
+
muiTableBodyCellProps?: ((props: {
|
617
|
+
cell: MRT_Cell<TData>;
|
615
618
|
column: MRT_Column<TData>;
|
616
|
-
|
617
|
-
muiColumnDragHandleProps?: IconButtonProps | ((props: {
|
619
|
+
row: MRT_Row<TData>;
|
618
620
|
table: MRT_TableInstance<TData>;
|
619
|
-
|
620
|
-
|
621
|
-
muiFilterCheckboxProps?: CheckboxProps | ((props: {
|
622
|
-
column: MRT_Column<TData>;
|
621
|
+
}) => TableCellProps) | TableCellProps;
|
622
|
+
muiTableBodyProps?: ((props: {
|
623
623
|
table: MRT_TableInstance<TData>;
|
624
|
-
}) =>
|
625
|
-
|
624
|
+
}) => TableBodyProps) | TableBodyProps;
|
625
|
+
muiTableBodyRowProps?: ((props: {
|
626
|
+
isDetailPanel?: boolean;
|
627
|
+
row: MRT_Row<TData>;
|
628
|
+
staticRowIndex: number;
|
626
629
|
table: MRT_TableInstance<TData>;
|
627
|
-
|
628
|
-
|
629
|
-
}) => TextFieldProps);
|
630
|
-
muiFilterSliderProps?: SliderProps | ((props: {
|
630
|
+
}) => TableRowProps) | TableRowProps;
|
631
|
+
muiTableContainerProps?: ((props: {
|
631
632
|
table: MRT_TableInstance<TData>;
|
633
|
+
}) => TableContainerProps) | TableContainerProps;
|
634
|
+
muiTableFooterCellProps?: ((props: {
|
632
635
|
column: MRT_Column<TData>;
|
633
|
-
}) => TextFieldProps);
|
634
|
-
muiCreateRowModalProps?: DialogProps | ((props: {
|
635
|
-
row: MRT_Row<TData>;
|
636
636
|
table: MRT_TableInstance<TData>;
|
637
|
-
}) =>
|
638
|
-
|
639
|
-
row: MRT_Row<TData>;
|
637
|
+
}) => TableCellProps) | TableCellProps;
|
638
|
+
muiTableFooterProps?: ((props: {
|
640
639
|
table: MRT_TableInstance<TData>;
|
641
|
-
}) =>
|
642
|
-
|
640
|
+
}) => TableFooterProps) | TableFooterProps;
|
641
|
+
muiTableFooterRowProps?: ((props: {
|
642
|
+
footerGroup: MRT_HeaderGroup<TData>;
|
643
643
|
table: MRT_TableInstance<TData>;
|
644
|
+
}) => TableRowProps) | TableRowProps;
|
645
|
+
muiTableHeadCellProps?: ((props: {
|
644
646
|
column: MRT_Column<TData>;
|
645
|
-
}) => TableCellProps);
|
646
|
-
muiTableHeadProps?: TableHeadProps | ((props: {
|
647
647
|
table: MRT_TableInstance<TData>;
|
648
|
-
}) =>
|
649
|
-
|
648
|
+
}) => TableCellProps) | TableCellProps;
|
649
|
+
muiTableHeadProps?: ((props: {
|
650
650
|
table: MRT_TableInstance<TData>;
|
651
|
+
}) => TableHeadProps) | TableHeadProps;
|
652
|
+
muiTableHeadRowProps?: ((props: {
|
651
653
|
headerGroup: MRT_HeaderGroup<TData>;
|
652
|
-
}) => TableRowProps);
|
653
|
-
muiTablePaginationProps?: Partial<Omit<TablePaginationProps, 'rowsPerPage'>> | ((props: {
|
654
654
|
table: MRT_TableInstance<TData>;
|
655
|
-
}) =>
|
656
|
-
|
655
|
+
}) => TableRowProps) | TableRowProps;
|
656
|
+
muiTablePaginationProps?: ((props: {
|
657
|
+
table: MRT_TableInstance<TData>;
|
658
|
+
}) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>) | Partial<Omit<TablePaginationProps, 'rowsPerPage'>>;
|
659
|
+
muiTablePaperProps?: ((props: {
|
657
660
|
table: MRT_TableInstance<TData>;
|
658
|
-
}) => PaperProps);
|
659
|
-
muiTableProps?:
|
661
|
+
}) => PaperProps) | PaperProps;
|
662
|
+
muiTableProps?: ((props: {
|
660
663
|
table: MRT_TableInstance<TData>;
|
661
|
-
}) => TableProps);
|
662
|
-
muiToolbarAlertBannerChipProps?:
|
664
|
+
}) => TableProps) | TableProps;
|
665
|
+
muiToolbarAlertBannerChipProps?: ((props: {
|
663
666
|
table: MRT_TableInstance<TData>;
|
664
|
-
}) => ChipProps);
|
665
|
-
muiToolbarAlertBannerProps?:
|
667
|
+
}) => ChipProps) | ChipProps;
|
668
|
+
muiToolbarAlertBannerProps?: ((props: {
|
666
669
|
table: MRT_TableInstance<TData>;
|
667
|
-
}) => AlertProps);
|
668
|
-
muiTopToolbarProps?:
|
670
|
+
}) => AlertProps) | AlertProps;
|
671
|
+
muiTopToolbarProps?: ((props: {
|
669
672
|
table: MRT_TableInstance<TData>;
|
670
|
-
}) => ToolbarProps);
|
673
|
+
}) => ToolbarProps) | ToolbarProps;
|
674
|
+
onColumnFilterFnsChange?: OnChangeFn<{
|
675
|
+
[key: string]: MRT_FilterOption;
|
676
|
+
}>;
|
671
677
|
onCreatingRowCancel?: (props: {
|
672
678
|
row: MRT_Row<TData>;
|
673
679
|
table: MRT_TableInstance<TData>;
|
@@ -679,9 +685,6 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
679
685
|
table: MRT_TableInstance<TData>;
|
680
686
|
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
681
687
|
}) => void;
|
682
|
-
onColumnFilterFnsChange?: OnChangeFn<{
|
683
|
-
[key: string]: MRT_FilterOption;
|
684
|
-
}>;
|
685
688
|
onDensityChange?: OnChangeFn<MRT_DensityState>;
|
686
689
|
onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
687
690
|
onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
@@ -698,42 +701,33 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
698
701
|
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
699
702
|
}) => Promise<void> | void;
|
700
703
|
onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
701
|
-
onHoveredColumnChange?: OnChangeFn<
|
704
|
+
onHoveredColumnChange?: OnChangeFn<{
|
702
705
|
id: string;
|
703
|
-
} | null>;
|
704
|
-
onHoveredRowChange?: OnChangeFn<
|
706
|
+
} | MRT_Column<TData> | null>;
|
707
|
+
onHoveredRowChange?: OnChangeFn<{
|
705
708
|
id: string;
|
706
|
-
} | null>;
|
709
|
+
} | MRT_Row<TData> | null>;
|
707
710
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
708
711
|
onShowAlertBannerChange?: OnChangeFn<boolean>;
|
709
712
|
onShowColumnFiltersChange?: OnChangeFn<boolean>;
|
710
713
|
onShowGlobalFilterChange?: OnChangeFn<boolean>;
|
711
714
|
onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
|
715
|
+
paginationDisplayMode?: 'custom' | 'default' | 'pages';
|
712
716
|
positionActionsColumn?: 'first' | 'last';
|
713
717
|
positionExpandColumn?: 'first' | 'last';
|
714
|
-
positionGlobalFilter?: 'left' | '
|
715
|
-
positionPagination?: '
|
716
|
-
positionToolbarAlertBanner?: 'bottom' | '
|
717
|
-
positionToolbarDropZone?: '
|
718
|
-
renderBottomToolbar?:
|
718
|
+
positionGlobalFilter?: 'left' | 'none' | 'right';
|
719
|
+
positionPagination?: 'both' | 'bottom' | 'none' | 'top';
|
720
|
+
positionToolbarAlertBanner?: 'bottom' | 'none' | 'top';
|
721
|
+
positionToolbarDropZone?: 'both' | 'bottom' | 'none' | 'top';
|
722
|
+
renderBottomToolbar?: ((props: {
|
719
723
|
table: MRT_TableInstance<TData>;
|
720
|
-
}) => ReactNode);
|
724
|
+
}) => ReactNode) | ReactNode;
|
721
725
|
renderBottomToolbarCustomActions?: (props: {
|
722
726
|
table: MRT_TableInstance<TData>;
|
723
727
|
}) => ReactNode;
|
724
|
-
renderCreateRowModalContent?: (props: {
|
725
|
-
internalEditComponents: ReactNode[];
|
726
|
-
row: MRT_Row<TData>;
|
727
|
-
table: MRT_TableInstance<TData>;
|
728
|
-
}) => ReactNode;
|
729
|
-
renderEditRowModalContent?: (props: {
|
730
|
-
internalEditComponents: ReactNode[];
|
731
|
-
row: MRT_Row<TData>;
|
732
|
-
table: MRT_TableInstance<TData>;
|
733
|
-
}) => ReactNode;
|
734
728
|
renderColumnActionsMenuItems?: (props: {
|
735
|
-
column: MRT_Column<TData>;
|
736
729
|
closeMenu: () => void;
|
730
|
+
column: MRT_Column<TData>;
|
737
731
|
internalColumnMenuItems: ReactNode[];
|
738
732
|
table: MRT_TableInstance<TData>;
|
739
733
|
}) => ReactNode[];
|
@@ -743,18 +737,28 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
743
737
|
onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
|
744
738
|
table: MRT_TableInstance<TData>;
|
745
739
|
}) => ReactNode[];
|
740
|
+
renderCreateRowModalContent?: (props: {
|
741
|
+
internalEditComponents: ReactNode[];
|
742
|
+
row: MRT_Row<TData>;
|
743
|
+
table: MRT_TableInstance<TData>;
|
744
|
+
}) => ReactNode;
|
746
745
|
renderDetailPanel?: (props: {
|
747
746
|
row: MRT_Row<TData>;
|
748
747
|
table: MRT_TableInstance<TData>;
|
749
748
|
}) => ReactNode;
|
749
|
+
renderEditRowModalContent?: (props: {
|
750
|
+
internalEditComponents: ReactNode[];
|
751
|
+
row: MRT_Row<TData>;
|
752
|
+
table: MRT_TableInstance<TData>;
|
753
|
+
}) => ReactNode;
|
754
|
+
renderEmptyRowsFallback?: (props: {
|
755
|
+
table: MRT_TableInstance<TData>;
|
756
|
+
}) => ReactNode;
|
750
757
|
renderGlobalFilterModeMenuItems?: (props: {
|
751
758
|
internalFilterOptions: MRT_InternalFilterOption[];
|
752
759
|
onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
|
753
760
|
table: MRT_TableInstance<TData>;
|
754
761
|
}) => ReactNode[];
|
755
|
-
renderEmptyRowsFallback?: (props: {
|
756
|
-
table: MRT_TableInstance<TData>;
|
757
|
-
}) => ReactNode;
|
758
762
|
renderRowActionMenuItems?: (props: {
|
759
763
|
closeMenu: () => void;
|
760
764
|
row: MRT_Row<TData>;
|
@@ -768,19 +772,21 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
|
|
768
772
|
renderToolbarInternalActions?: (props: {
|
769
773
|
table: MRT_TableInstance<TData>;
|
770
774
|
}) => ReactNode;
|
771
|
-
renderTopToolbar?:
|
775
|
+
renderTopToolbar?: ((props: {
|
772
776
|
table: MRT_TableInstance<TData>;
|
773
|
-
}) => ReactNode);
|
777
|
+
}) => ReactNode) | ReactNode;
|
774
778
|
renderTopToolbarCustomActions?: (props: {
|
775
779
|
table: MRT_TableInstance<TData>;
|
776
780
|
}) => ReactNode;
|
777
781
|
rowCount?: number;
|
778
782
|
rowNumberMode?: 'original' | 'static';
|
783
|
+
rowPinningDisplayMode?: 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom';
|
779
784
|
rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
|
780
|
-
rowVirtualizerOptions?:
|
785
|
+
rowVirtualizerOptions?: ((props: {
|
781
786
|
table: MRT_TableInstance<TData>;
|
782
|
-
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>)
|
787
|
+
}) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
|
783
788
|
selectAllMode?: 'all' | 'page';
|
789
|
+
selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
|
784
790
|
/**
|
785
791
|
* Manage state externally any way you want, then pass it back into MRT.
|
786
792
|
*/
|