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.
Files changed (39) hide show
  1. package/README.md +13 -11
  2. package/dist/MaterialReactTable.d.ts +18 -16
  3. package/dist/{utils.d.ts → column.utils.d.ts} +3 -3
  4. package/dist/filtersFns.d.ts +22 -54
  5. package/dist/localization.d.ts +3 -0
  6. package/dist/material-react-table.cjs.development.js +251 -175
  7. package/dist/material-react-table.cjs.development.js.map +1 -1
  8. package/dist/material-react-table.cjs.production.min.js +1 -1
  9. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  10. package/dist/material-react-table.esm.js +251 -175
  11. package/dist/material-react-table.esm.js.map +1 -1
  12. package/dist/table/MRT_TableRoot.d.ts +1 -1
  13. package/package.json +3 -3
  14. package/src/MaterialReactTable.tsx +29 -24
  15. package/src/body/MRT_TableBodyCell.tsx +6 -2
  16. package/src/body/MRT_TableBodyRow.tsx +3 -1
  17. package/src/body/MRT_TableDetailPanel.tsx +5 -3
  18. package/src/buttons/MRT_CopyButton.tsx +5 -3
  19. package/src/buttons/MRT_ExpandButton.tsx +5 -3
  20. package/src/{utils.ts → column.utils.ts} +2 -1
  21. package/src/filtersFns.ts +47 -13
  22. package/src/footer/MRT_TableFooterCell.tsx +3 -1
  23. package/src/head/MRT_TableHeadCell.tsx +32 -30
  24. package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +5 -3
  25. package/src/head/MRT_TableHeadCellGrabHandle.tsx +1 -1
  26. package/src/inputs/MRT_FilterTextField.tsx +12 -6
  27. package/src/inputs/MRT_SelectCheckbox.tsx +18 -21
  28. package/src/localization.ts +6 -0
  29. package/src/menus/MRT_ColumnActionMenu.tsx +16 -15
  30. package/src/menus/MRT_FilterOptionMenu.tsx +105 -72
  31. package/src/menus/MRT_ShowHideColumnsMenu.tsx +1 -1
  32. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -1
  33. package/src/table/MRT_Table.tsx +5 -3
  34. package/src/table/MRT_TableContainer.tsx +5 -3
  35. package/src/table/MRT_TableRoot.tsx +57 -40
  36. package/src/toolbar/MRT_TablePagination.tsx +5 -3
  37. package/src/toolbar/MRT_ToolbarAlertBanner.tsx +5 -3
  38. package/src/toolbar/MRT_ToolbarBottom.tsx +3 -1
  39. 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 Actions
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 (work in progress)
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 and multiple built-in filter modes
70
- - [x] Full Screen mode
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] Remote/Server-side sorting and filtering supported
77
- - [x] Row Actions
76
+ - [x] Row Actions (Your Custom Action Buttons)
78
77
  - [x] Row Numbers
79
- - [x] Row Selection (checkboxes)
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?: LiteralUnion<string & keyof TData>;
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> = {}> = MRT_TableOptions<TData> & {
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>) => string[];
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[];
@@ -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
- <TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValue: string | number): boolean;
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
- <TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, _filterValue: string | number): boolean;
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
- <TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, filterValue: string | number): boolean;
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
- <TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, filterValue: string | number): boolean;
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
- <TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
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
- <TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, id: string, filterValue: string | number): boolean;
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
- <TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, id: string, filterValue: string | number): boolean;
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
- <TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, _filterValue: string | number): boolean;
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
- <TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
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
- <TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
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>;
@@ -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;