material-react-table 1.2.10 → 1.3.0-beta.2
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/cjs/MaterialReactTable.d.ts +7 -3
- package/dist/cjs/column.utils.d.ts +29 -17
- package/dist/cjs/index.js +17 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/table/MRT_TableRoot.d.ts +1 -1
- package/dist/esm/MaterialReactTable.d.ts +7 -3
- package/dist/esm/column.utils.d.ts +29 -17
- package/dist/esm/material-react-table.esm.js +17 -4
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/table/MRT_TableRoot.d.ts +1 -1
- package/dist/index.d.ts +19 -4
- package/package.json +10 -9
- package/src/MaterialReactTable.tsx +11 -1
- package/src/body/MRT_TableBodyCell.tsx +2 -1
- package/src/column.utils.ts +30 -1
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +1 -1
- package/src/table/MRT_TableRoot.tsx +2 -1
|
@@ -18,8 +18,9 @@ import type { TableProps } from '@mui/material/Table';
|
|
|
18
18
|
import type { TableRowProps } from '@mui/material/TableRow';
|
|
19
19
|
import type { TextFieldProps } from '@mui/material/TextField';
|
|
20
20
|
import type { ToolbarProps } from '@mui/material/Toolbar';
|
|
21
|
-
import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
|
|
21
|
+
import type { AggregationFn, Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
|
|
22
22
|
import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
|
|
23
|
+
import { MRT_AggregationFns } from './aggregationFns';
|
|
23
24
|
import { MRT_FilterFns } from './filterFns';
|
|
24
25
|
import { MRT_Icons } from './icons';
|
|
25
26
|
import { MRT_SortingFns } from './sortingFns';
|
|
@@ -196,7 +197,7 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
|
|
|
196
197
|
showProgressBars: boolean;
|
|
197
198
|
showSkeletons: boolean;
|
|
198
199
|
};
|
|
199
|
-
export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
|
|
200
|
+
export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
|
|
200
201
|
AggregatedCell?: ({ cell, column, row, table, }: {
|
|
201
202
|
cell: MRT_Cell<TData>;
|
|
202
203
|
column: MRT_Column<TData>;
|
|
@@ -253,6 +254,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
|
253
254
|
* @example accessorKey: 'name.firstName' //deep key dot notation
|
|
254
255
|
*/
|
|
255
256
|
accessorKey?: DeepKeys<TData>;
|
|
257
|
+
aggregationFn?: MRT_AggregationFn<TData> | Array<MRT_AggregationFn<TData>>;
|
|
256
258
|
/**
|
|
257
259
|
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
|
258
260
|
* Leave this blank if you are just creating a normal data column.
|
|
@@ -378,6 +380,8 @@ export declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell
|
|
|
378
380
|
column: MRT_Column<TData>;
|
|
379
381
|
row: MRT_Row<TData>;
|
|
380
382
|
};
|
|
383
|
+
export declare type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
|
|
384
|
+
export declare type MRT_AggregationFn<TData extends Record<string, any> = {}> = AggregationFn<TData> | MRT_AggregationOption;
|
|
381
385
|
export declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
|
|
382
386
|
export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
|
|
383
387
|
export declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
|
|
@@ -609,7 +613,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
|
609
613
|
values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
|
610
614
|
}) => Promise<void> | void;
|
|
611
615
|
onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
|
612
|
-
|
|
616
|
+
onColumnFilterFnsChange?: OnChangeFn<{
|
|
613
617
|
[key: string]: MRT_FilterOption;
|
|
614
618
|
}>;
|
|
615
619
|
onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type { ColumnOrderState, GroupingState } from '@tanstack/react-table';
|
|
1
|
+
import type { ColumnOrderState, GroupingState, Row } from '@tanstack/react-table';
|
|
2
|
+
import { MRT_AggregationFns } from './aggregationFns';
|
|
2
3
|
import { MRT_FilterFns } from './filterFns';
|
|
3
4
|
import { MRT_SortingFns } from './sortingFns';
|
|
4
5
|
import type { TableCellProps } from '@mui/material/TableCell';
|
|
@@ -6,7 +7,18 @@ import type { Theme } from '@mui/material/styles';
|
|
|
6
7
|
import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
|
|
7
8
|
export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
|
|
8
9
|
export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
|
|
9
|
-
export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
|
|
10
|
+
export declare const prepareColumns: <TData extends Record<string, any> = {}>({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
|
|
11
|
+
aggregationFns: {
|
|
12
|
+
sum: import("@tanstack/table-core").AggregationFn<any>;
|
|
13
|
+
min: import("@tanstack/table-core").AggregationFn<any>;
|
|
14
|
+
max: import("@tanstack/table-core").AggregationFn<any>;
|
|
15
|
+
extent: import("@tanstack/table-core").AggregationFn<any>;
|
|
16
|
+
mean: import("@tanstack/table-core").AggregationFn<any>;
|
|
17
|
+
median: import("@tanstack/table-core").AggregationFn<any>;
|
|
18
|
+
unique: import("@tanstack/table-core").AggregationFn<any>;
|
|
19
|
+
uniqueCount: import("@tanstack/table-core").AggregationFn<any>;
|
|
20
|
+
count: import("@tanstack/table-core").AggregationFn<any>;
|
|
21
|
+
} & Record<string, import("@tanstack/table-core").AggregationFn<any>>;
|
|
10
22
|
columnDefs: MRT_ColumnDef<TData>[];
|
|
11
23
|
columnFilterFns: {
|
|
12
24
|
[key: string]: MRT_FilterOption;
|
|
@@ -14,59 +26,59 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>({
|
|
|
14
26
|
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
|
15
27
|
filterFns: {
|
|
16
28
|
between: {
|
|
17
|
-
<TData_1 extends Record<string, any> = {}>(row:
|
|
29
|
+
<TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
18
30
|
autoRemove(val: any): boolean;
|
|
19
31
|
};
|
|
20
32
|
betweenInclusive: {
|
|
21
|
-
<TData_2 extends Record<string, any> = {}>(row:
|
|
33
|
+
<TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
|
|
22
34
|
autoRemove(val: any): boolean;
|
|
23
35
|
};
|
|
24
36
|
contains: {
|
|
25
|
-
<TData_3 extends Record<string, any> = {}>(row:
|
|
37
|
+
<TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, filterValue: string | number): boolean;
|
|
26
38
|
autoRemove(val: any): boolean;
|
|
27
39
|
};
|
|
28
40
|
empty: {
|
|
29
|
-
<TData_4 extends Record<string, any> = {}>(row:
|
|
41
|
+
<TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, _filterValue: string | number): boolean;
|
|
30
42
|
autoRemove(val: any): boolean;
|
|
31
43
|
};
|
|
32
44
|
endsWith: {
|
|
33
|
-
<TData_5 extends Record<string, any> = {}>(row:
|
|
45
|
+
<TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, id: string, filterValue: string | number): boolean;
|
|
34
46
|
autoRemove(val: any): boolean;
|
|
35
47
|
};
|
|
36
48
|
equals: {
|
|
37
|
-
<TData_6 extends Record<string, any> = {}>(row:
|
|
49
|
+
<TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, id: string, filterValue: string | number): boolean;
|
|
38
50
|
autoRemove(val: any): boolean;
|
|
39
51
|
};
|
|
40
52
|
fuzzy: {
|
|
41
|
-
<TData_7 extends Record<string, any> = {}>(row:
|
|
53
|
+
<TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
|
|
42
54
|
autoRemove(val: any): boolean;
|
|
43
55
|
};
|
|
44
56
|
greaterThan: {
|
|
45
|
-
<TData_8 extends Record<string, any> = {}>(row:
|
|
57
|
+
<TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, filterValue: string | number): boolean;
|
|
46
58
|
autoRemove(val: any): boolean;
|
|
47
59
|
};
|
|
48
60
|
greaterThanOrEqualTo: {
|
|
49
|
-
<TData_9 extends Record<string, any> = {}>(row:
|
|
61
|
+
<TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
|
|
50
62
|
autoRemove(val: any): boolean;
|
|
51
63
|
};
|
|
52
64
|
lessThan: {
|
|
53
|
-
<TData_10 extends Record<string, any> = {}>(row:
|
|
65
|
+
<TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
|
|
54
66
|
autoRemove(val: any): boolean;
|
|
55
67
|
};
|
|
56
68
|
lessThanOrEqualTo: {
|
|
57
|
-
<TData_11 extends Record<string, any> = {}>(row:
|
|
69
|
+
<TData_11 extends Record<string, any> = {}>(row: Row<TData_11>, id: string, filterValue: string | number): boolean;
|
|
58
70
|
autoRemove(val: any): boolean;
|
|
59
71
|
};
|
|
60
72
|
notEmpty: {
|
|
61
|
-
<TData_12 extends Record<string, any> = {}>(row:
|
|
73
|
+
<TData_12 extends Record<string, any> = {}>(row: Row<TData_12>, id: string, _filterValue: string | number): boolean;
|
|
62
74
|
autoRemove(val: any): boolean;
|
|
63
75
|
};
|
|
64
76
|
notEquals: {
|
|
65
|
-
<TData_13 extends Record<string, any> = {}>(row:
|
|
77
|
+
<TData_13 extends Record<string, any> = {}>(row: Row<TData_13>, id: string, filterValue: string | number): boolean;
|
|
66
78
|
autoRemove(val: any): boolean;
|
|
67
79
|
};
|
|
68
80
|
startsWith: {
|
|
69
|
-
<TData_14 extends Record<string, any> = {}>(row:
|
|
81
|
+
<TData_14 extends Record<string, any> = {}>(row: Row<TData_14>, id: string, filterValue: string | number): boolean;
|
|
70
82
|
autoRemove(val: any): boolean;
|
|
71
83
|
};
|
|
72
84
|
includesString: import("@tanstack/table-core").FilterFn<any>;
|
|
@@ -79,7 +91,7 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>({
|
|
|
79
91
|
inNumberRange: import("@tanstack/table-core").FilterFn<any>;
|
|
80
92
|
} & Record<string, import("@tanstack/table-core").FilterFn<any>>;
|
|
81
93
|
sortingFns: {
|
|
82
|
-
fuzzy: <TData_15 extends Record<string, any> = {}>(rowA:
|
|
94
|
+
fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: Row<TData_15>, rowB: Row<TData_15>, columnId: string) => number;
|
|
83
95
|
alphanumeric: import("@tanstack/table-core").SortingFn<any>;
|
|
84
96
|
alphanumericCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
|
|
85
97
|
text: import("@tanstack/table-core").SortingFn<any>;
|
package/dist/cjs/index.js
CHANGED
|
@@ -201,18 +201,22 @@ const getAllLeafColumnDefs = (columns) => {
|
|
|
201
201
|
getLeafColumns(columns);
|
|
202
202
|
return allLeafColumnDefs;
|
|
203
203
|
};
|
|
204
|
-
const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
|
|
204
|
+
const prepareColumns = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
|
|
205
205
|
var _a, _b;
|
|
206
|
+
//assign columnId
|
|
206
207
|
if (!columnDef.id)
|
|
207
208
|
columnDef.id = getColumnId(columnDef);
|
|
208
209
|
if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
|
|
209
210
|
console.error('Column definitions must have a valid `accessorKey` or `id` property');
|
|
210
211
|
}
|
|
212
|
+
//assign columnDefType
|
|
211
213
|
if (!columnDef.columnDefType)
|
|
212
214
|
columnDef.columnDefType = 'data';
|
|
213
215
|
if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
|
|
214
216
|
columnDef.columnDefType = 'group';
|
|
217
|
+
//recursively prepare columns if this is a group column
|
|
215
218
|
columnDef.columns = prepareColumns({
|
|
219
|
+
aggregationFns,
|
|
216
220
|
columnDefs: columnDef.columns,
|
|
217
221
|
columnFilterFns,
|
|
218
222
|
defaultDisplayColumn,
|
|
@@ -221,12 +225,19 @@ const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, fil
|
|
|
221
225
|
});
|
|
222
226
|
}
|
|
223
227
|
else if (columnDef.columnDefType === 'data') {
|
|
228
|
+
//assign aggregationFns if multiple aggregationFns are provided
|
|
229
|
+
if (Array.isArray(columnDef.aggregationFn)) {
|
|
230
|
+
const aggFns = columnDef.aggregationFn;
|
|
231
|
+
columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
|
|
232
|
+
}
|
|
233
|
+
//assign filterFns
|
|
224
234
|
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
225
235
|
columnDef.filterFn =
|
|
226
236
|
(_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
|
|
227
237
|
columnDef._filterFn =
|
|
228
238
|
columnFilterFns[columnDef.id];
|
|
229
239
|
}
|
|
240
|
+
//assign sortingFns
|
|
230
241
|
if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
|
|
231
242
|
// @ts-ignore
|
|
232
243
|
columnDef.sortingFn = sortingFns[columnDef.sortingFn];
|
|
@@ -1508,7 +1519,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
|
1508
1519
|
const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
|
|
1509
1520
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1510
1521
|
React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
|
|
1511
|
-
React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-
|
|
1522
|
+
React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
|
|
1512
1523
|
opacity: 1,
|
|
1513
1524
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
1514
1525
|
? iconButtonProps.sx(theme)
|
|
@@ -2226,7 +2237,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
|
|
|
2226
2237
|
editingMode !== 'modal' &&
|
|
2227
2238
|
(editingMode === 'table' ||
|
|
2228
2239
|
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
|
|
2229
|
-
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id)
|
|
2240
|
+
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
|
|
2241
|
+
!row.getIsGrouped();
|
|
2230
2242
|
const handleDoubleClick = (event) => {
|
|
2231
2243
|
var _a;
|
|
2232
2244
|
(_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
|
|
@@ -2712,6 +2724,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2712
2724
|
const columnDefs = React.useMemo(() => {
|
|
2713
2725
|
var _a, _b, _c;
|
|
2714
2726
|
return prepareColumns({
|
|
2727
|
+
aggregationFns: props.aggregationFns,
|
|
2715
2728
|
columnDefs: [...displayColumns, ...props.columns],
|
|
2716
2729
|
columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
|
|
2717
2730
|
defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
|
|
@@ -2766,7 +2779,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2766
2779
|
tableHeadCellRefs,
|
|
2767
2780
|
tablePaperRef,
|
|
2768
2781
|
topToolbarRef,
|
|
2769
|
-
}, setColumnFilterFns: (_x = props.
|
|
2782
|
+
}, setColumnFilterFns: (_x = props.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
|
|
2770
2783
|
if (props.tableInstanceRef) {
|
|
2771
2784
|
props.tableInstanceRef.current = table;
|
|
2772
2785
|
}
|