material-react-table 0.24.1 → 0.26.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +13 -11
- package/dist/MaterialReactTable.d.ts +18 -16
- package/dist/{utils.d.ts → column.utils.d.ts} +3 -3
- package/dist/filtersFns.d.ts +22 -54
- package/dist/localization.d.ts +3 -0
- package/dist/material-react-table.cjs.development.js +251 -175
- 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 +251 -175
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/table/MRT_TableRoot.d.ts +1 -1
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +29 -24
- package/src/body/MRT_TableBodyCell.tsx +6 -2
- package/src/body/MRT_TableBodyRow.tsx +3 -1
- package/src/body/MRT_TableDetailPanel.tsx +5 -3
- package/src/buttons/MRT_CopyButton.tsx +5 -3
- package/src/buttons/MRT_ExpandButton.tsx +5 -3
- package/src/{utils.ts → column.utils.ts} +2 -1
- package/src/filtersFns.ts +47 -13
- package/src/footer/MRT_TableFooterCell.tsx +3 -1
- package/src/head/MRT_TableHeadCell.tsx +32 -30
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +5 -3
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +1 -1
- package/src/inputs/MRT_FilterTextField.tsx +12 -6
- package/src/inputs/MRT_SelectCheckbox.tsx +18 -21
- package/src/localization.ts +6 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +16 -15
- package/src/menus/MRT_FilterOptionMenu.tsx +105 -72
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +1 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -1
- package/src/table/MRT_Table.tsx +5 -3
- package/src/table/MRT_TableContainer.tsx +5 -3
- package/src/table/MRT_TableRoot.tsx +57 -40
- package/src/toolbar/MRT_TablePagination.tsx +5 -3
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +5 -3
- package/src/toolbar/MRT_ToolbarBottom.tsx +3 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +3 -1
package/README.md
CHANGED
@@ -55,30 +55,30 @@ _All features can easily be enabled/disabled_
|
|
55
55
|
- [x] < 35kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
|
56
56
|
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
|
57
57
|
- [x] Click To Copy Cell Values
|
58
|
-
- [x] Column
|
59
|
-
- [x] Column Grouping (Group By and Aggregates)
|
58
|
+
- [x] Column Action Dropdown Menu
|
59
|
+
- [x] Column/Row Grouping (Group By and Aggregates)
|
60
60
|
- [x] Column Hiding
|
61
61
|
- [x] Column Ordering via Drag'n'Drop
|
62
|
-
- [x] Column Pinning
|
63
|
-
- [x] Column Resizing
|
62
|
+
- [x] Column Pinning (Freeze Columns)
|
63
|
+
- [x] Column Resizing
|
64
64
|
- [x] Customize Icons
|
65
65
|
- [x] Customize Styling of internal Mui Components
|
66
66
|
- [x] Data Editing (3 different editing modes)
|
67
67
|
- [x] Density Toggle
|
68
|
-
- [x] Detail Panels
|
69
|
-
- [x] Filtering
|
70
|
-
- [x] Full Screen
|
68
|
+
- [x] Detail Panels (Expansion)
|
69
|
+
- [x] Filtering (supports client-side and server-side)
|
70
|
+
- [x] Full Screen Mode
|
71
71
|
- [x] Global Filtering (Search across all columns, rank by best match)
|
72
72
|
- [x] Header Groups & Footers
|
73
73
|
- [x] Localization (i18n) support
|
74
74
|
- [x] Manage your own state
|
75
75
|
- [x] Pagination (supports client-side and server-side)
|
76
|
-
- [x]
|
77
|
-
- [x] Row Actions
|
76
|
+
- [x] Row Actions (Your Custom Action Buttons)
|
78
77
|
- [x] Row Numbers
|
79
|
-
- [x] Row
|
78
|
+
- [x] Row Ordering via Drag'n'Drop
|
79
|
+
- [x] Row Selection (Checkboxes)
|
80
80
|
- [x] SSR compatible
|
81
|
-
- [x] Sorting
|
81
|
+
- [x] Sorting (supports client-side and server-side)
|
82
82
|
- [x] Theming (Respects your Material UI Theme)
|
83
83
|
- [x] Toolbars (Add your own action buttons)
|
84
84
|
- [x] Tree Data / Expanding Sub-rows
|
@@ -90,6 +90,8 @@ _All features can easily be enabled/disabled_
|
|
90
90
|
|
91
91
|
### Installation
|
92
92
|
|
93
|
+
View the full [Installation Docs](https://www.material-react-table.com/docs/install)
|
94
|
+
|
93
95
|
1. Install Peer Dependencies (Material UI V5)
|
94
96
|
|
95
97
|
```bash
|
@@ -7,13 +7,6 @@ import { MRT_Icons } from './icons';
|
|
7
7
|
import { MRT_FilterFns } from './filtersFns';
|
8
8
|
import { MRT_SortingFns } from './sortingFns';
|
9
9
|
declare type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
10
|
-
export declare type MRT_TableOptions<TData extends Record<string, any> = {}> = Partial<Omit<TableOptions<TData>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'>> & {
|
11
|
-
columns: MRT_ColumnDef<TData>[];
|
12
|
-
data: TData[];
|
13
|
-
expandRowsFn?: (dataRow: TData) => TData[];
|
14
|
-
initialState?: Partial<MRT_TableState<TData>>;
|
15
|
-
state?: Partial<MRT_TableState<TData>>;
|
16
|
-
};
|
17
10
|
export interface MRT_RowModel<TData extends Record<string, any> = {}> {
|
18
11
|
flatRows: MRT_Row<TData>[];
|
19
12
|
rows: MRT_Row<TData>[];
|
@@ -114,7 +107,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
114
107
|
*
|
115
108
|
* @example accessorKey: 'username'
|
116
109
|
*/
|
117
|
-
accessorKey?:
|
110
|
+
accessorKey?: string & keyof TData;
|
118
111
|
/**
|
119
112
|
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
120
113
|
* Leave this blank if you are just creating a normal data column.
|
@@ -229,6 +222,7 @@ export declare type MRT_SortingOption = keyof typeof MRT_SortingFns;
|
|
229
222
|
export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
|
230
223
|
export declare type MRT_FilterOption = keyof typeof MRT_FilterFns;
|
231
224
|
export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
|
225
|
+
export declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-row-expand' | 'mrt-row-select' | 'mrt-row-numbers';
|
232
226
|
/**
|
233
227
|
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
234
228
|
*
|
@@ -238,7 +232,12 @@ export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = Filte
|
|
238
232
|
* See the full props list on the official docs site:
|
239
233
|
* @link https://www.material-react-table.com/docs/api/props
|
240
234
|
*/
|
241
|
-
export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
235
|
+
export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'> & {
|
236
|
+
displayColumnDefOptions?: Partial<{
|
237
|
+
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
238
|
+
}>;
|
239
|
+
columns: MRT_ColumnDef<TData>[];
|
240
|
+
data: TData[];
|
242
241
|
editingMode?: 'table' | 'row' | 'cell';
|
243
242
|
enableClickToCopy?: boolean;
|
244
243
|
enableColumnActions?: boolean;
|
@@ -266,7 +265,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
266
265
|
enableToolbarTop?: boolean;
|
267
266
|
enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
|
268
267
|
enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
|
268
|
+
expandRowsFn?: (dataRow: TData) => TData[];
|
269
269
|
icons?: Partial<MRT_Icons>;
|
270
|
+
initialState?: Partial<MRT_TableState<TData>>;
|
270
271
|
localization?: Partial<MRT_Localization>;
|
271
272
|
muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
|
272
273
|
table: MRT_TableInstance<TData>;
|
@@ -305,13 +306,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
305
306
|
table: MRT_TableInstance<TData>;
|
306
307
|
cell: MRT_Cell<TData>;
|
307
308
|
}) => SkeletonProps);
|
309
|
+
muiTableBodyProps?: TableBodyProps | (({ table }: {
|
310
|
+
table: MRT_TableInstance<TData>;
|
311
|
+
}) => TableBodyProps);
|
308
312
|
muiTableBodyRowDragHandleProps?: IconButtonProps | (({ table, row, }: {
|
309
313
|
table: MRT_TableInstance<TData>;
|
310
314
|
row: MRT_Row<TData>;
|
311
315
|
}) => IconButtonProps);
|
312
|
-
muiTableBodyProps?: TableBodyProps | (({ table }: {
|
313
|
-
table: MRT_TableInstance<TData>;
|
314
|
-
}) => TableBodyProps);
|
315
316
|
muiTableBodyRowProps?: TableRowProps | (({ table, row, }: {
|
316
317
|
table: MRT_TableInstance<TData>;
|
317
318
|
row: MRT_Row<TData>;
|
@@ -400,11 +401,11 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
400
401
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
401
402
|
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
402
403
|
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
404
|
+
onDensityChange?: OnChangeFn<boolean>;
|
403
405
|
onEditRowSubmit?: ({ row, table, }: {
|
404
406
|
row: MRT_Row<TData>;
|
405
407
|
table: MRT_TableInstance<TData>;
|
406
408
|
}) => Promise<void> | void;
|
407
|
-
onDensityChange?: OnChangeFn<boolean>;
|
408
409
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
409
410
|
onRowDrop?: ({ event, draggedRow, targetRow, }: {
|
410
411
|
event: DragEvent<HTMLButtonElement>;
|
@@ -434,9 +435,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
434
435
|
renderToolbarBottomCustomActions?: ({ table, }: {
|
435
436
|
table: MRT_TableInstance<TData>;
|
436
437
|
}) => ReactNode;
|
437
|
-
renderToolbarTopCustomActions?: ({ table, }: {
|
438
|
-
table: MRT_TableInstance<TData>;
|
439
|
-
}) => ReactNode;
|
440
438
|
renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
|
441
439
|
table: MRT_TableInstance<TData>;
|
442
440
|
MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
|
@@ -455,9 +453,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
455
453
|
table: MRT_TableInstance<TData>;
|
456
454
|
}>;
|
457
455
|
}) => ReactNode;
|
456
|
+
renderToolbarTopCustomActions?: ({ table, }: {
|
457
|
+
table: MRT_TableInstance<TData>;
|
458
|
+
}) => ReactNode;
|
458
459
|
rowCount?: number;
|
459
460
|
rowNumberMode?: 'original' | 'static';
|
460
461
|
selectAllMode?: 'all' | 'page';
|
462
|
+
state?: Partial<MRT_TableState<TData>>;
|
461
463
|
tableId?: string;
|
462
464
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
|
463
465
|
};
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import { ColumnOrderState } from '@tanstack/react-table';
|
2
|
-
import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_FilterOption } from '.';
|
2
|
+
import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
|
3
3
|
export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
|
4
4
|
export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], currentFilterFns: {
|
5
|
-
[key: string]: "between" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "lessThan" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
|
5
|
+
[key: string]: "between" | "betweenInclusive" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "greaterThanOrEqualTo" | "lessThan" | "lessThanOrEqualTo" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
|
6
6
|
}) => MRT_DefinedColumnDef<TData>[];
|
7
7
|
export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
|
8
|
-
export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) =>
|
8
|
+
export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
|
9
9
|
export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
|
10
10
|
export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
|
package/dist/filtersFns.d.ts
CHANGED
@@ -1,92 +1,60 @@
|
|
1
1
|
import { RankingInfo } from '@tanstack/match-sorter-utils';
|
2
2
|
import { Row } from '@tanstack/react-table';
|
3
|
-
export declare const fuzzy: {
|
4
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
|
5
|
-
autoRemove(val: any): boolean;
|
6
|
-
};
|
7
|
-
export declare const contains: {
|
8
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
9
|
-
autoRemove(val: any): boolean;
|
10
|
-
};
|
11
|
-
export declare const startsWith: {
|
12
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
13
|
-
autoRemove(val: any): boolean;
|
14
|
-
};
|
15
|
-
export declare const endsWith: {
|
16
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
17
|
-
autoRemove(val: any): boolean;
|
18
|
-
};
|
19
|
-
export declare const equals: {
|
20
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
21
|
-
autoRemove(val: any): boolean;
|
22
|
-
};
|
23
|
-
export declare const notEquals: {
|
24
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
25
|
-
autoRemove(val: any): boolean;
|
26
|
-
};
|
27
|
-
export declare const greaterThan: {
|
28
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
29
|
-
autoRemove(val: any): boolean;
|
30
|
-
};
|
31
|
-
export declare const lessThan: {
|
32
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
|
33
|
-
autoRemove(val: any): boolean;
|
34
|
-
};
|
35
|
-
export declare const between: {
|
36
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
|
37
|
-
autoRemove(val: any): boolean;
|
38
|
-
};
|
39
|
-
export declare const empty: {
|
40
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, _filterValue: string | number): boolean;
|
41
|
-
autoRemove(val: any): boolean;
|
42
|
-
};
|
43
|
-
export declare const notEmpty: {
|
44
|
-
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, _filterValue: string | number): boolean;
|
45
|
-
autoRemove(val: any): boolean;
|
46
|
-
};
|
47
3
|
export declare const MRT_FilterFns: {
|
48
4
|
between: {
|
49
5
|
<TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
|
50
6
|
autoRemove(val: any): boolean;
|
51
7
|
};
|
8
|
+
betweenInclusive: {
|
9
|
+
<TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
|
10
|
+
autoRemove(val: any): boolean;
|
11
|
+
};
|
52
12
|
contains: {
|
53
|
-
<
|
13
|
+
<TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, filterValue: string | number): boolean;
|
54
14
|
autoRemove(val: any): boolean;
|
55
15
|
};
|
56
16
|
empty: {
|
57
|
-
<
|
17
|
+
<TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, _filterValue: string | number): boolean;
|
58
18
|
autoRemove(val: any): boolean;
|
59
19
|
};
|
60
20
|
endsWith: {
|
61
|
-
<
|
21
|
+
<TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, filterValue: string | number): boolean;
|
62
22
|
autoRemove(val: any): boolean;
|
63
23
|
};
|
64
24
|
equals: {
|
65
|
-
<
|
25
|
+
<TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, id: string, filterValue: string | number): boolean;
|
66
26
|
autoRemove(val: any): boolean;
|
67
27
|
};
|
68
28
|
fuzzy: {
|
69
|
-
<
|
29
|
+
<TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
|
70
30
|
autoRemove(val: any): boolean;
|
71
31
|
};
|
72
32
|
greaterThan: {
|
73
|
-
<
|
33
|
+
<TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, id: string, filterValue: string | number): boolean;
|
34
|
+
autoRemove(val: any): boolean;
|
35
|
+
};
|
36
|
+
greaterThanOrEqualTo: {
|
37
|
+
<TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, filterValue: string | number): boolean;
|
74
38
|
autoRemove(val: any): boolean;
|
75
39
|
};
|
76
40
|
lessThan: {
|
77
|
-
<
|
41
|
+
<TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
|
42
|
+
autoRemove(val: any): boolean;
|
43
|
+
};
|
44
|
+
lessThanOrEqualTo: {
|
45
|
+
<TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
|
78
46
|
autoRemove(val: any): boolean;
|
79
47
|
};
|
80
48
|
notEmpty: {
|
81
|
-
<
|
49
|
+
<TData_11 extends Record<string, any> = {}>(row: Row<TData_11>, id: string, _filterValue: string | number): boolean;
|
82
50
|
autoRemove(val: any): boolean;
|
83
51
|
};
|
84
52
|
notEquals: {
|
85
|
-
<
|
53
|
+
<TData_12 extends Record<string, any> = {}>(row: Row<TData_12>, id: string, filterValue: string | number): boolean;
|
86
54
|
autoRemove(val: any): boolean;
|
87
55
|
};
|
88
56
|
startsWith: {
|
89
|
-
<
|
57
|
+
<TData_13 extends Record<string, any> = {}>(row: Row<TData_13>, id: string, filterValue: string | number): boolean;
|
90
58
|
autoRemove(val: any): boolean;
|
91
59
|
};
|
92
60
|
includesString: import("@tanstack/table-core").FilterFn<any>;
|
package/dist/localization.d.ts
CHANGED
@@ -14,6 +14,7 @@ export interface MRT_Localization {
|
|
14
14
|
expand: string;
|
15
15
|
expandAll: string;
|
16
16
|
filterBetween: string;
|
17
|
+
filterBetweenInclusive: string;
|
17
18
|
filterByColumn: string;
|
18
19
|
filterContains: string;
|
19
20
|
filterEmpty: string;
|
@@ -21,7 +22,9 @@ export interface MRT_Localization {
|
|
21
22
|
filterEquals: string;
|
22
23
|
filterFuzzy: string;
|
23
24
|
filterGreaterThan: string;
|
25
|
+
filterGreaterThanOrEqualTo: string;
|
24
26
|
filterLessThan: string;
|
27
|
+
filterLessThanOrEqualTo: string;
|
25
28
|
filterMode: string;
|
26
29
|
filterNotEmpty: string;
|
27
30
|
filterNotEquals: string;
|