material-react-table 0.23.4 → 0.24.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +48 -16
- 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 +293 -172
- 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 +294 -173
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -1
- package/dist/utils.d.ts +1 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +71 -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/toolbar/MRT_LinearProgressBar.tsx +5 -5
- package/src/toolbar/MRT_ToolbarBottom.tsx +1 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +1 -1
- 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;
|
@@ -255,7 +275,8 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
255
275
|
table: MRT_TableInstance<TData>;
|
256
276
|
row: MRT_Row<TData>;
|
257
277
|
}) => IconButtonProps);
|
258
|
-
muiLinearProgressProps?: LinearProgressProps | (({ table, }: {
|
278
|
+
muiLinearProgressProps?: LinearProgressProps | (({ isTopToolbar, table, }: {
|
279
|
+
isTopToolbar: boolean;
|
259
280
|
table: MRT_TableInstance<TData>;
|
260
281
|
}) => LinearProgressProps);
|
261
282
|
muiSearchTextFieldProps?: TextFieldProps | (({ table }: {
|
@@ -284,6 +305,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
284
305
|
table: MRT_TableInstance<TData>;
|
285
306
|
cell: MRT_Cell<TData>;
|
286
307
|
}) => SkeletonProps);
|
308
|
+
muiTableBodyRowDragHandleProps?: IconButtonProps | (({ table, row, }: {
|
309
|
+
table: MRT_TableInstance<TData>;
|
310
|
+
row: MRT_Row<TData>;
|
311
|
+
}) => IconButtonProps);
|
287
312
|
muiTableBodyProps?: TableBodyProps | (({ table }: {
|
288
313
|
table: MRT_TableInstance<TData>;
|
289
314
|
}) => TableBodyProps);
|
@@ -313,6 +338,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
313
338
|
table: MRT_TableInstance<TData>;
|
314
339
|
column: MRT_Column<TData>;
|
315
340
|
}) => IconButtonProps);
|
341
|
+
muiTableHeadCellDragHandleProps?: IconButtonProps | (({ table, column, }: {
|
342
|
+
table: MRT_TableInstance<TData>;
|
343
|
+
column: MRT_Column<TData>;
|
344
|
+
}) => IconButtonProps);
|
316
345
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
|
317
346
|
table: MRT_TableInstance<TData>;
|
318
347
|
column: MRT_Column<TData>;
|
@@ -356,7 +385,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
356
385
|
cell: MRT_Cell<TData>;
|
357
386
|
table: MRT_TableInstance<TData>;
|
358
387
|
}) => void;
|
388
|
+
onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
|
389
|
+
event: DragEvent<HTMLButtonElement>;
|
390
|
+
draggedColumn: MRT_Column<TData>;
|
391
|
+
targetColumn: MRT_Column<TData> | null;
|
392
|
+
}) => void;
|
359
393
|
onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
394
|
+
onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
360
395
|
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
|
361
396
|
onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
362
397
|
onCurrentFilterFnsChange?: OnChangeFn<{
|
@@ -364,12 +399,18 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
364
399
|
}>;
|
365
400
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
366
401
|
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
402
|
+
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
367
403
|
onEditRowSubmit?: ({ row, table, }: {
|
368
404
|
row: MRT_Row<TData>;
|
369
405
|
table: MRT_TableInstance<TData>;
|
370
406
|
}) => Promise<void> | void;
|
371
407
|
onDensityChange?: OnChangeFn<boolean>;
|
372
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;
|
373
414
|
onShowAlertBannerChange?: OnChangeFn<boolean>;
|
374
415
|
onShowFiltersChange?: OnChangeFn<boolean>;
|
375
416
|
onShowGlobalFilterChange?: OnChangeFn<boolean>;
|
@@ -421,13 +462,4 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
421
462
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
|
422
463
|
};
|
423
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;
|
424
|
-
/**
|
425
|
-
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
426
|
-
*
|
427
|
-
* See more info on creating columns and data on the official docs site:
|
428
|
-
* @link https://www.material-react-table.com/docs/usage
|
429
|
-
*
|
430
|
-
* See the full props list on the official docs site:
|
431
|
-
* @link https://www.material-react-table.com/docs/api/props
|
432
|
-
*/
|
433
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 {};
|