material-react-table 0.23.5 → 0.24.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.
- package/dist/MaterialReactTable.d.ts +46 -15
- package/dist/body/MRT_TableBodyCell.d.ts +2 -1
- package/dist/body/MRT_TableBodyRowGrabHandle.d.ts +9 -0
- package/dist/buttons/MRT_GrabHandleButton.d.ts +4 -2
- package/dist/head/MRT_TableHeadCellGrabHandle.d.ts +9 -0
- package/dist/localization.d.ts +1 -0
- package/dist/material-react-table.cjs.development.js +287 -167
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +288 -168
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +1 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +69 -14
- package/src/body/MRT_TableBodyCell.tsx +17 -3
- package/src/body/MRT_TableBodyRow.tsx +37 -3
- package/src/body/MRT_TableBodyRowGrabHandle.tsx +48 -0
- package/src/buttons/MRT_GrabHandleButton.tsx +12 -8
- package/src/head/MRT_TableHeadCell.tsx +14 -31
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +77 -0
- package/src/localization.ts +2 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +1 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +3 -3
- package/src/table/MRT_TableRoot.tsx +25 -6
- package/src/utils.ts +9 -8
@@ -1,7 +1,7 @@
|
|
1
|
-
import { ChangeEvent, Dispatch, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
|
2
|
-
import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
|
3
|
-
import { Cell, Column, ColumnDef, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
|
4
|
-
import { Options as VirtualizerOptions } from 'react-virtual';
|
1
|
+
import { ChangeEvent, Dispatch, DragEvent, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
|
2
|
+
import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
|
3
|
+
import type { Cell, Column, ColumnDef, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
|
4
|
+
import type { Options as VirtualizerOptions } from 'react-virtual';
|
5
5
|
import { MRT_Localization } from './localization';
|
6
6
|
import { MRT_Icons } from './icons';
|
7
7
|
import { MRT_FilterFns } from './filtersFns';
|
@@ -43,6 +43,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
|
|
43
43
|
localization: MRT_Localization;
|
44
44
|
};
|
45
45
|
setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
46
|
+
setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
|
46
47
|
setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
47
48
|
setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
48
49
|
setCurrentFilterFns: Dispatch<SetStateAction<{
|
@@ -50,6 +51,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
|
|
50
51
|
}>>;
|
51
52
|
setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
|
52
53
|
setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
|
54
|
+
setCurrentHoveredRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
53
55
|
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
54
56
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
55
57
|
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
@@ -58,11 +60,13 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
|
|
58
60
|
};
|
59
61
|
export declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
|
60
62
|
currentDraggingColumn: MRT_Column<TData> | null;
|
63
|
+
currentDraggingRow: MRT_Row<TData> | null;
|
61
64
|
currentEditingCell: MRT_Cell<TData> | null;
|
62
65
|
currentEditingRow: MRT_Row<TData> | null;
|
63
66
|
currentFilterFns: Record<string, MRT_FilterOption>;
|
64
67
|
currentGlobalFilterFn: Record<string, MRT_FilterOption>;
|
65
68
|
currentHoveredColumn: MRT_Column<TData> | null;
|
69
|
+
currentHoveredRow: MRT_Row<TData> | null;
|
66
70
|
density: 'comfortable' | 'compact' | 'spacious';
|
67
71
|
isFullScreen: boolean;
|
68
72
|
isLoading: boolean;
|
@@ -123,6 +127,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
123
127
|
columns?: MRT_ColumnDef<TData>[];
|
124
128
|
enableClickToCopy?: boolean;
|
125
129
|
enableColumnActions?: boolean;
|
130
|
+
enableColumnDragging?: boolean;
|
126
131
|
enableColumnFilterChangeMode?: boolean;
|
127
132
|
enableColumnOrdering?: boolean;
|
128
133
|
enableEditing?: boolean;
|
@@ -170,6 +175,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
170
175
|
table: MRT_TableInstance<TData>;
|
171
176
|
column: MRT_Column<TData>;
|
172
177
|
}) => IconButtonProps);
|
178
|
+
muiTableHeadCellDragHandleProps?: IconButtonProps | (({ table, column, }: {
|
179
|
+
table: MRT_TableInstance<TData>;
|
180
|
+
column: MRT_Column<TData>;
|
181
|
+
}) => IconButtonProps);
|
173
182
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
|
174
183
|
table: MRT_TableInstance<TData>;
|
175
184
|
column: MRT_Column<TData>;
|
@@ -206,11 +215,10 @@ export declare type MRT_Header<TData extends Record<string, any> = {}> = Omit<He
|
|
206
215
|
export declare type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<HeaderGroup<TData>, 'headers'> & {
|
207
216
|
headers: MRT_Header<TData>[];
|
208
217
|
};
|
209
|
-
export declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>, 'getVisibleCells' | 'getAllCells' | 'subRows' | '
|
218
|
+
export declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>, 'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'> & {
|
210
219
|
getAllCells: () => MRT_Cell<TData>[];
|
211
220
|
getVisibleCells: () => MRT_Cell<TData>[];
|
212
221
|
subRows?: MRT_Row<TData>[];
|
213
|
-
original: TData;
|
214
222
|
_valuesCache?: TData;
|
215
223
|
};
|
216
224
|
export declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
|
@@ -221,10 +229,20 @@ export declare type MRT_SortingOption = keyof typeof MRT_SortingFns;
|
|
221
229
|
export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
|
222
230
|
export declare type MRT_FilterOption = keyof typeof MRT_FilterFns;
|
223
231
|
export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
|
232
|
+
/**
|
233
|
+
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
234
|
+
*
|
235
|
+
* See more info on creating columns and data on the official docs site:
|
236
|
+
* @link https://www.material-react-table.com/docs/usage
|
237
|
+
*
|
238
|
+
* See the full props list on the official docs site:
|
239
|
+
* @link https://www.material-react-table.com/docs/api/props
|
240
|
+
*/
|
224
241
|
export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = MRT_TableOptions<TData> & {
|
225
242
|
editingMode?: 'table' | 'row' | 'cell';
|
226
243
|
enableClickToCopy?: boolean;
|
227
244
|
enableColumnActions?: boolean;
|
245
|
+
enableColumnDragging?: boolean;
|
228
246
|
enableColumnFilterChangeMode?: boolean;
|
229
247
|
enableColumnOrdering?: boolean;
|
230
248
|
enableDensityToggle?: boolean;
|
@@ -235,7 +253,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
235
253
|
enableGlobalFilterRankedResults?: boolean;
|
236
254
|
enablePagination?: boolean;
|
237
255
|
enableRowActions?: boolean;
|
256
|
+
enableRowDragging?: boolean;
|
238
257
|
enableRowNumbers?: boolean;
|
258
|
+
enableRowOrdering?: boolean;
|
239
259
|
enableRowVirtualization?: boolean;
|
240
260
|
enableSelectAll?: boolean;
|
241
261
|
enableStickyHeader?: boolean;
|
@@ -285,6 +305,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
285
305
|
table: MRT_TableInstance<TData>;
|
286
306
|
cell: MRT_Cell<TData>;
|
287
307
|
}) => SkeletonProps);
|
308
|
+
muiTableBodyRowDragHandleProps?: IconButtonProps | (({ table, row, }: {
|
309
|
+
table: MRT_TableInstance<TData>;
|
310
|
+
row: MRT_Row<TData>;
|
311
|
+
}) => IconButtonProps);
|
288
312
|
muiTableBodyProps?: TableBodyProps | (({ table }: {
|
289
313
|
table: MRT_TableInstance<TData>;
|
290
314
|
}) => TableBodyProps);
|
@@ -314,6 +338,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
314
338
|
table: MRT_TableInstance<TData>;
|
315
339
|
column: MRT_Column<TData>;
|
316
340
|
}) => IconButtonProps);
|
341
|
+
muiTableHeadCellDragHandleProps?: IconButtonProps | (({ table, column, }: {
|
342
|
+
table: MRT_TableInstance<TData>;
|
343
|
+
column: MRT_Column<TData>;
|
344
|
+
}) => IconButtonProps);
|
317
345
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
|
318
346
|
table: MRT_TableInstance<TData>;
|
319
347
|
column: MRT_Column<TData>;
|
@@ -357,7 +385,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
357
385
|
cell: MRT_Cell<TData>;
|
358
386
|
table: MRT_TableInstance<TData>;
|
359
387
|
}) => void;
|
388
|
+
onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
|
389
|
+
event: DragEvent<HTMLButtonElement>;
|
390
|
+
draggedColumn: MRT_Column<TData>;
|
391
|
+
targetColumn: MRT_Column<TData> | null;
|
392
|
+
}) => void;
|
360
393
|
onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
394
|
+
onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
361
395
|
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
362
396
|
onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
363
397
|
onCurrentFilterFnsChange?: OnChangeFn<{
|
@@ -365,12 +399,18 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
365
399
|
}>;
|
366
400
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
367
401
|
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
402
|
+
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
368
403
|
onEditRowSubmit?: ({ row, table, }: {
|
369
404
|
row: MRT_Row<TData>;
|
370
405
|
table: MRT_TableInstance<TData>;
|
371
406
|
}) => Promise<void> | void;
|
372
407
|
onDensityChange?: OnChangeFn<boolean>;
|
373
408
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
409
|
+
onRowDrop?: ({ event, draggedRow, targetRow, }: {
|
410
|
+
event: DragEvent<HTMLButtonElement>;
|
411
|
+
draggedRow: MRT_Row<TData>;
|
412
|
+
targetRow: MRT_Row<TData> | null;
|
413
|
+
}) => void;
|
374
414
|
onShowAlertBannerChange?: OnChangeFn<boolean>;
|
375
415
|
onShowFiltersChange?: OnChangeFn<boolean>;
|
376
416
|
onShowGlobalFilterChange?: OnChangeFn<boolean>;
|
@@ -422,13 +462,4 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
422
462
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
|
423
463
|
};
|
424
464
|
declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
425
|
-
/**
|
426
|
-
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
427
|
-
*
|
428
|
-
* See more info on creating columns and data on the official docs site:
|
429
|
-
* @link https://www.material-react-table.com/docs/usage
|
430
|
-
*
|
431
|
-
* See the full props list on the official docs site:
|
432
|
-
* @link https://www.material-react-table.com/docs/api/props
|
433
|
-
*/
|
434
465
|
export default _default;
|
@@ -1,9 +1,10 @@
|
|
1
|
-
import { FC } from 'react';
|
1
|
+
import { FC, RefObject } from 'react';
|
2
2
|
import type { MRT_Cell, MRT_TableInstance } from '..';
|
3
3
|
interface Props {
|
4
4
|
cell: MRT_Cell;
|
5
5
|
enableHover?: boolean;
|
6
6
|
rowIndex: number;
|
7
|
+
rowRef: RefObject<HTMLTableRowElement>;
|
7
8
|
table: MRT_TableInstance;
|
8
9
|
}
|
9
10
|
export declare const MRT_TableBodyCell: FC<Props>;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { FC, RefObject } from 'react';
|
2
|
+
import { MRT_Cell, MRT_TableInstance } from '..';
|
3
|
+
interface Props {
|
4
|
+
cell: MRT_Cell;
|
5
|
+
rowRef: RefObject<HTMLTableRowElement>;
|
6
|
+
table: MRT_TableInstance;
|
7
|
+
}
|
8
|
+
export declare const MRT_TableBodyRowGrabHandle: FC<Props>;
|
9
|
+
export {};
|
@@ -1,8 +1,10 @@
|
|
1
|
+
import { IconButtonProps } from '@mui/material';
|
1
2
|
import { DragEventHandler, FC } from 'react';
|
2
3
|
import { MRT_TableInstance } from '..';
|
3
4
|
interface Props {
|
4
|
-
|
5
|
-
|
5
|
+
iconButtonProps?: IconButtonProps;
|
6
|
+
onDragStart: DragEventHandler<HTMLButtonElement>;
|
7
|
+
onDragEnd: DragEventHandler<HTMLButtonElement>;
|
6
8
|
table: MRT_TableInstance;
|
7
9
|
}
|
8
10
|
export declare const MRT_GrabHandleButton: FC<Props>;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { FC, RefObject } from 'react';
|
2
|
+
import type { MRT_Column, MRT_TableInstance } from '..';
|
3
|
+
interface Props {
|
4
|
+
column: MRT_Column;
|
5
|
+
table: MRT_TableInstance;
|
6
|
+
tableHeadCellRef: RefObject<HTMLTableCellElement>;
|
7
|
+
}
|
8
|
+
export declare const MRT_TableHeadCellGrabHandle: FC<Props>;
|
9
|
+
export {};
|