material-react-table 0.40.11 → 0.40.12
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 +15 -13
- package/dist/cjs/MaterialReactTable.d.ts +4 -2
- package/dist/cjs/column.utils.d.ts +81 -76
- package/dist/cjs/index.js +24 -26
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/MaterialReactTable.d.ts +4 -2
- package/dist/esm/column.utils.d.ts +81 -76
- package/dist/esm/material-react-table.esm.js +24 -26
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/index.d.ts +4 -2
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +19 -1
- package/src/column.utils.ts +18 -25
- package/src/table/MRT_TableRoot.tsx +12 -12
package/README.md
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
# Material React Table
|
|
2
2
|
|
|
3
|
-
__Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
|
|
4
|
-
|
|
5
|
-
_Quickly Create React Data Tables with Material Design_
|
|
6
|
-
|
|
7
3
|
<a href="https://npmjs.com/package/material-react-table" target="_blank">
|
|
8
4
|
<img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" />
|
|
9
5
|
</a>
|
|
@@ -25,12 +21,9 @@ _Quickly Create React Data Tables with Material Design_
|
|
|
25
21
|
|
|
26
22
|
## About
|
|
27
23
|
|
|
28
|
-
|
|
24
|
+
__Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
|
|
29
25
|
|
|
30
|
-
|
|
31
|
-
- Inspired by material-table and the MUI X DataGrid
|
|
32
|
-
- Written from the ground up in TypeScript
|
|
33
|
-
- All internal Material UI components are easily customizable
|
|
26
|
+
_Quickly Create React Data Tables with Material Design_
|
|
34
27
|
|
|
35
28
|
Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
|
|
36
29
|
|
|
@@ -114,7 +107,7 @@ npm install material-react-table
|
|
|
114
107
|
> Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
|
|
115
108
|
|
|
116
109
|
```jsx
|
|
117
|
-
import React, { useMemo, useState, useEffect } from 'react';
|
|
110
|
+
import React, { useMemo, useRef, useState, useEffect } from 'react';
|
|
118
111
|
import MaterialReactTable from 'material-react-table';
|
|
119
112
|
|
|
120
113
|
export default function App() {
|
|
@@ -129,7 +122,7 @@ export default function App() {
|
|
|
129
122
|
accessorFn: (row) => row.age, //alternate way
|
|
130
123
|
id: 'age', //id required if you use accessorFn instead of accessorKey
|
|
131
124
|
header: 'Age',
|
|
132
|
-
Header: <i
|
|
125
|
+
Header: <i>Age</i>, //optional custom markup
|
|
133
126
|
},
|
|
134
127
|
],
|
|
135
128
|
[],
|
|
@@ -156,15 +149,24 @@ export default function App() {
|
|
|
156
149
|
//do something when the row selection changes
|
|
157
150
|
}, [rowSelection]);
|
|
158
151
|
|
|
152
|
+
//Or, optionally, you can get a reference to the underlying table instance
|
|
153
|
+
const tableInstanceRef = useRef(null);
|
|
154
|
+
|
|
155
|
+
const someEventHandler = () => {
|
|
156
|
+
//read the table state during an event from the table instance ref
|
|
157
|
+
console.log(tableInstanceRef.current.getState().sorting);
|
|
158
|
+
}
|
|
159
|
+
|
|
159
160
|
return (
|
|
160
161
|
<MaterialReactTable
|
|
161
162
|
columns={columns}
|
|
162
163
|
data={data}
|
|
163
164
|
enableColumnOrdering //enable some features
|
|
164
165
|
enableRowSelection
|
|
165
|
-
|
|
166
|
+
enablePagination={false} //disable a default feature
|
|
166
167
|
onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
|
|
167
168
|
state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
|
|
169
|
+
tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
|
|
168
170
|
/>
|
|
169
171
|
);
|
|
170
172
|
}
|
|
@@ -178,4 +180,4 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-exa
|
|
|
178
180
|
<img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" />
|
|
179
181
|
</a>
|
|
180
182
|
|
|
181
|
-
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first!
|
|
183
|
+
PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
|
|
@@ -231,7 +231,8 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
|
231
231
|
}) => ReactNode[];
|
|
232
232
|
sortingFn?: MRT_SortingFn;
|
|
233
233
|
};
|
|
234
|
-
export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
|
|
234
|
+
export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
|
|
235
|
+
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
|
235
236
|
id: string;
|
|
236
237
|
_filterFn: MRT_FilterOption;
|
|
237
238
|
};
|
|
@@ -283,6 +284,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
|
283
284
|
columns: MRT_ColumnDef<TData>[];
|
|
284
285
|
data: TData[];
|
|
285
286
|
defaultColumn?: Partial<MRT_ColumnDef<TData>>;
|
|
287
|
+
defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
|
|
286
288
|
displayColumnDefOptions?: Partial<{
|
|
287
289
|
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
|
288
290
|
}>;
|
|
@@ -532,5 +534,5 @@ export declare type Virtualizer = {
|
|
|
532
534
|
scrollToIndex: (index: number, options?: any | undefined) => void;
|
|
533
535
|
measure: () => void;
|
|
534
536
|
};
|
|
535
|
-
declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
|
537
|
+
declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
|
|
536
538
|
export default _default;
|
|
@@ -2,85 +2,90 @@ import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
|
|
|
2
2
|
import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
|
|
3
3
|
import { MRT_FilterFns } from './filterFns';
|
|
4
4
|
import { MRT_SortingFns } from './sortingFns';
|
|
5
|
-
export declare const defaultDisplayColumnDefOptions: Partial<MRT_ColumnDef<{}>>;
|
|
6
5
|
export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
|
|
7
6
|
export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
|
|
8
|
-
export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
13
|
-
autoRemove(val: any): boolean;
|
|
7
|
+
export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
|
|
8
|
+
columnDefs: MRT_ColumnDef<TData>[];
|
|
9
|
+
columnFilterFns: {
|
|
10
|
+
[key: string]: MRT_FilterOption;
|
|
14
11
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
12
|
+
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
|
13
|
+
filterFns: {
|
|
14
|
+
between: {
|
|
15
|
+
<TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
16
|
+
autoRemove(val: any): boolean;
|
|
17
|
+
};
|
|
18
|
+
betweenInclusive: {
|
|
19
|
+
<TData_2 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
20
|
+
autoRemove(val: any): boolean;
|
|
21
|
+
};
|
|
22
|
+
contains: {
|
|
23
|
+
<TData_3 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_3>, id: string, filterValue: string | number): boolean;
|
|
24
|
+
autoRemove(val: any): boolean;
|
|
25
|
+
};
|
|
26
|
+
empty: {
|
|
27
|
+
<TData_4 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_4>, id: string, _filterValue: string | number): boolean;
|
|
28
|
+
autoRemove(val: any): boolean;
|
|
29
|
+
};
|
|
30
|
+
endsWith: {
|
|
31
|
+
<TData_5 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_5>, id: string, filterValue: string | number): boolean;
|
|
32
|
+
autoRemove(val: any): boolean;
|
|
33
|
+
};
|
|
34
|
+
equals: {
|
|
35
|
+
<TData_6 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_6>, id: string, filterValue: string | number): boolean;
|
|
36
|
+
autoRemove(val: any): boolean;
|
|
37
|
+
};
|
|
38
|
+
fuzzy: {
|
|
39
|
+
<TData_7 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
|
|
40
|
+
autoRemove(val: any): boolean;
|
|
41
|
+
};
|
|
42
|
+
greaterThan: {
|
|
43
|
+
<TData_8 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_8>, id: string, filterValue: string | number): boolean;
|
|
44
|
+
autoRemove(val: any): boolean;
|
|
45
|
+
};
|
|
46
|
+
greaterThanOrEqualTo: {
|
|
47
|
+
<TData_9 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_9>, id: string, filterValue: string | number): boolean;
|
|
48
|
+
autoRemove(val: any): boolean;
|
|
49
|
+
};
|
|
50
|
+
lessThan: {
|
|
51
|
+
<TData_10 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_10>, id: string, filterValue: string | number): boolean;
|
|
52
|
+
autoRemove(val: any): boolean;
|
|
53
|
+
};
|
|
54
|
+
lessThanOrEqualTo: {
|
|
55
|
+
<TData_11 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_11>, id: string, filterValue: string | number): boolean;
|
|
56
|
+
autoRemove(val: any): boolean;
|
|
57
|
+
};
|
|
58
|
+
notEmpty: {
|
|
59
|
+
<TData_12 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_12>, id: string, _filterValue: string | number): boolean;
|
|
60
|
+
autoRemove(val: any): boolean;
|
|
61
|
+
};
|
|
62
|
+
notEquals: {
|
|
63
|
+
<TData_13 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_13>, id: string, filterValue: string | number): boolean;
|
|
64
|
+
autoRemove(val: any): boolean;
|
|
65
|
+
};
|
|
66
|
+
startsWith: {
|
|
67
|
+
<TData_14 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_14>, id: string, filterValue: string | number): boolean;
|
|
68
|
+
autoRemove(val: any): boolean;
|
|
69
|
+
};
|
|
70
|
+
includesString: import("@tanstack/table-core").FilterFn<any>;
|
|
71
|
+
includesStringSensitive: import("@tanstack/table-core").FilterFn<any>;
|
|
72
|
+
equalsString: import("@tanstack/table-core").FilterFn<any>;
|
|
73
|
+
arrIncludes: import("@tanstack/table-core").FilterFn<any>;
|
|
74
|
+
arrIncludesAll: import("@tanstack/table-core").FilterFn<any>;
|
|
75
|
+
arrIncludesSome: import("@tanstack/table-core").FilterFn<any>;
|
|
76
|
+
weakEquals: import("@tanstack/table-core").FilterFn<any>;
|
|
77
|
+
inNumberRange: import("@tanstack/table-core").FilterFn<any>;
|
|
78
|
+
} & Record<string, import("@tanstack/table-core").FilterFn<any>>;
|
|
79
|
+
sortingFns: {
|
|
80
|
+
fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: import("@tanstack/table-core").Row<TData_15>, rowB: import("@tanstack/table-core").Row<TData_15>, columnId: string) => number;
|
|
81
|
+
alphanumeric: import("@tanstack/table-core").SortingFn<any>;
|
|
82
|
+
alphanumericCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
|
|
83
|
+
text: import("@tanstack/table-core").SortingFn<any>;
|
|
84
|
+
textCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
|
|
85
|
+
datetime: import("@tanstack/table-core").SortingFn<any>;
|
|
86
|
+
basic: import("@tanstack/table-core").SortingFn<any>;
|
|
87
|
+
} & Record<string, import("@tanstack/table-core").SortingFn<any>>;
|
|
88
|
+
}) => MRT_DefinedColumnDef<TData>[];
|
|
84
89
|
export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
|
|
85
90
|
export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: GroupingState) => boolean;
|
|
86
91
|
export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
|
package/dist/cjs/index.js
CHANGED
|
@@ -492,20 +492,6 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
|
|
|
492
492
|
React__default["default"].createElement(DragHandleIcon, null))));
|
|
493
493
|
};
|
|
494
494
|
|
|
495
|
-
const defaultDisplayColumnDefOptions = {
|
|
496
|
-
columnDefType: 'display',
|
|
497
|
-
enableClickToCopy: false,
|
|
498
|
-
enableColumnActions: false,
|
|
499
|
-
enableColumnDragging: false,
|
|
500
|
-
enableColumnFilter: false,
|
|
501
|
-
enableColumnOrdering: false,
|
|
502
|
-
enableEditing: false,
|
|
503
|
-
enableGlobalFilter: false,
|
|
504
|
-
enableGrouping: false,
|
|
505
|
-
enableHiding: false,
|
|
506
|
-
enableResizing: false,
|
|
507
|
-
enableSorting: false,
|
|
508
|
-
};
|
|
509
495
|
const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
|
|
510
496
|
const getAllLeafColumnDefs = (columns) => {
|
|
511
497
|
let lowestLevelColumns = columns;
|
|
@@ -522,7 +508,7 @@ const getAllLeafColumnDefs = (columns) => {
|
|
|
522
508
|
}
|
|
523
509
|
return lowestLevelColumns.filter((col) => !col.columns);
|
|
524
510
|
};
|
|
525
|
-
const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => columnDefs.map((columnDef) => {
|
|
511
|
+
const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
|
|
526
512
|
var _a, _b;
|
|
527
513
|
if (!columnDef.id)
|
|
528
514
|
columnDef.id = getColumnId(columnDef);
|
|
@@ -533,7 +519,13 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
|
|
|
533
519
|
columnDef.columnDefType = 'data';
|
|
534
520
|
if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
535
521
|
columnDef.columnDefType = 'group';
|
|
536
|
-
columnDef.columns = prepareColumns(
|
|
522
|
+
columnDef.columns = prepareColumns({
|
|
523
|
+
columnDefs: columnDef.columns,
|
|
524
|
+
columnFilterFns,
|
|
525
|
+
defaultDisplayColumn,
|
|
526
|
+
filterFns,
|
|
527
|
+
sortingFns,
|
|
528
|
+
});
|
|
537
529
|
}
|
|
538
530
|
else if (columnDef.columnDefType === 'data') {
|
|
539
531
|
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
@@ -548,7 +540,7 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
|
|
|
548
540
|
}
|
|
549
541
|
}
|
|
550
542
|
else if (columnDef.columnDefType === 'display') {
|
|
551
|
-
columnDef = Object.assign(Object.assign({},
|
|
543
|
+
columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
|
|
552
544
|
}
|
|
553
545
|
return columnDef;
|
|
554
546
|
});
|
|
@@ -2444,12 +2436,12 @@ const MRT_TableRoot = (props) => {
|
|
|
2444
2436
|
const displayColumns = React.useMemo(() => {
|
|
2445
2437
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
2446
2438
|
return [
|
|
2447
|
-
columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 },
|
|
2448
|
-
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 },
|
|
2439
|
+
columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
|
|
2440
|
+
columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
|
|
2449
2441
|
columnOrder.includes('mrt-row-expand') &&
|
|
2450
|
-
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 },
|
|
2451
|
-
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 },
|
|
2452
|
-
columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 },
|
|
2442
|
+
showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
|
|
2443
|
+
columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, props.defaultDisplayColumn), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
|
|
2444
|
+
columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
|
|
2453
2445
|
].filter(Boolean);
|
|
2454
2446
|
}, [
|
|
2455
2447
|
columnOrder,
|
|
@@ -2474,8 +2466,14 @@ const MRT_TableRoot = (props) => {
|
|
|
2474
2466
|
props.renderDetailPanel,
|
|
2475
2467
|
]);
|
|
2476
2468
|
const columnDefs = React.useMemo(() => {
|
|
2477
|
-
var _a, _b;
|
|
2478
|
-
return prepareColumns(
|
|
2469
|
+
var _a, _b, _c;
|
|
2470
|
+
return prepareColumns({
|
|
2471
|
+
columnDefs: [...displayColumns, ...props.columns],
|
|
2472
|
+
columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
|
|
2473
|
+
defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
|
|
2474
|
+
filterFns: props.filterFns,
|
|
2475
|
+
sortingFns: props.sortingFns,
|
|
2476
|
+
});
|
|
2479
2477
|
}, [
|
|
2480
2478
|
columnFilterFns,
|
|
2481
2479
|
displayColumns,
|
|
@@ -2534,8 +2532,8 @@ const MRT_TableRoot = (props) => {
|
|
|
2534
2532
|
};
|
|
2535
2533
|
|
|
2536
2534
|
var MaterialReactTable = (_a) => {
|
|
2537
|
-
var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
|
|
2538
|
-
return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
|
|
2535
|
+
var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
|
|
2536
|
+
return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, defaultDisplayColumn: Object.assign({ columnDefType: 'display', enableClickToCopy: false, enableColumnActions: false, enableColumnDragging: false, enableColumnFilter: false, enableColumnOrdering: false, enableEditing: false, enableGlobalFilter: false, enableGrouping: false, enableHiding: false, enableResizing: false, enableSorting: false }, defaultDisplayColumn), editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
|
|
2539
2537
|
};
|
|
2540
2538
|
|
|
2541
2539
|
exports.MRT_CopyButton = MRT_CopyButton;
|