material-react-table 0.6.0 → 0.6.3
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/MaterialReactTable.d.ts +18 -10
- package/dist/filtersFNs.d.ts +6 -10
- package/dist/material-react-table.cjs.development.js +231 -200
- 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 +232 -201
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +5 -0
- package/dist/toolbar/MRT_ToolbarTop.d.ts +11 -0
- package/dist/useMRT.d.ts +5 -1
- package/dist/utils.d.ts +2 -0
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +66 -52
- package/src/body/MRT_TableBody.tsx +3 -1
- package/src/filtersFNs.ts +6 -16
- package/src/inputs/MRT_FilterTextField.tsx +1 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +5 -4
- package/src/table/MRT_TableContainer.tsx +4 -28
- package/src/toolbar/MRT_LinearProgressBar.tsx +25 -0
- package/src/toolbar/MRT_TablePagination.tsx +1 -1
- package/src/toolbar/MRT_ToolbarBottom.tsx +18 -21
- package/src/toolbar/MRT_ToolbarTop.tsx +21 -10
- package/src/useMRT.tsx +53 -48
- package/src/utils.ts +17 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { useState, useMemo, useContext, createContext, Fragment,
|
|
1
|
+
import React, { useState, useCallback, useMemo, useContext, createContext, Fragment, useEffect } from 'react';
|
|
2
2
|
import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
|
|
3
|
+
import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, LinearProgress, Toolbar, TableContainer, Paper } from '@mui/material';
|
|
3
4
|
import { matchSorter } from 'match-sorter';
|
|
4
|
-
import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
|
|
5
5
|
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
|
|
6
6
|
import CancelIcon from '@mui/icons-material/Cancel';
|
|
7
7
|
import ClearAllIcon from '@mui/icons-material/ClearAll';
|
|
@@ -97,122 +97,35 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
97
97
|
return target;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
var
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
sorter: function sorter(rankedItems) {
|
|
104
|
-
return rankedItems;
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
fuzzyFilterFN.autoRemove = function (val) {
|
|
110
|
-
return !val;
|
|
111
|
-
};
|
|
100
|
+
var findLowestLevelCols = function findLowestLevelCols(columns) {
|
|
101
|
+
var lowestLevelColumns = columns;
|
|
102
|
+
var currentCols = columns;
|
|
112
103
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
containsFilterFN.autoRemove = function (val) {
|
|
120
|
-
return !val;
|
|
121
|
-
};
|
|
104
|
+
while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
|
|
105
|
+
return col.columns;
|
|
106
|
+
})) {
|
|
107
|
+
var _currentCols;
|
|
122
108
|
|
|
123
|
-
var
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
startsWithFilterFN.autoRemove = function (val) {
|
|
130
|
-
return !val;
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
|
|
134
|
-
return rows.filter(function (row) {
|
|
135
|
-
return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
|
|
136
|
-
});
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
endsWithFilterFN.autoRemove = function (val) {
|
|
140
|
-
return !val;
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
|
|
144
|
-
return rows.filter(function (row) {
|
|
145
|
-
return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
|
|
146
|
-
});
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
equalsFilterFN.autoRemove = function (val) {
|
|
150
|
-
return !val;
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
|
|
154
|
-
return rows.filter(function (row) {
|
|
155
|
-
return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
|
|
156
|
-
});
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
notEqualsFilterFN.autoRemove = function (val) {
|
|
160
|
-
return !val;
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
var greaterThanFilterFN = function greaterThanFilterFN(rows, id, filterValue) {
|
|
164
|
-
return rows.filter(function (row) {
|
|
165
|
-
return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
|
166
|
-
});
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
greaterThanFilterFN.autoRemove = function (val) {
|
|
170
|
-
return !val;
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
var lessThanFilterFN = function lessThanFilterFN(rows, id, filterValue) {
|
|
174
|
-
return rows.filter(function (row) {
|
|
175
|
-
return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
|
176
|
-
});
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
lessThanFilterFN.autoRemove = function (val) {
|
|
180
|
-
return !val;
|
|
181
|
-
};
|
|
109
|
+
var nextCols = currentCols.filter(function (col) {
|
|
110
|
+
return !!col.columns;
|
|
111
|
+
}).map(function (col) {
|
|
112
|
+
return col.columns;
|
|
113
|
+
}).flat();
|
|
182
114
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}
|
|
115
|
+
if (nextCols.every(function (col) {
|
|
116
|
+
return !(col != null && col.columns);
|
|
117
|
+
})) {
|
|
118
|
+
lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
|
|
119
|
+
}
|
|
188
120
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
};
|
|
121
|
+
currentCols = nextCols;
|
|
122
|
+
}
|
|
192
123
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
return !!row.values[id].toString().toLowerCase().trim();
|
|
124
|
+
return lowestLevelColumns.filter(function (col) {
|
|
125
|
+
return !col.columns;
|
|
196
126
|
});
|
|
197
127
|
};
|
|
198
128
|
|
|
199
|
-
notEmptyFilterFN.autoRemove = function (val) {
|
|
200
|
-
return !val;
|
|
201
|
-
};
|
|
202
|
-
|
|
203
|
-
var defaultFilterFNs = {
|
|
204
|
-
contains: containsFilterFN,
|
|
205
|
-
empty: emptyFilterFN,
|
|
206
|
-
endsWith: endsWithFilterFN,
|
|
207
|
-
greaterThan: greaterThanFilterFN,
|
|
208
|
-
lessThan: lessThanFilterFN,
|
|
209
|
-
equals: equalsFilterFN,
|
|
210
|
-
fuzzy: fuzzyFilterFN,
|
|
211
|
-
notEmpty: notEmptyFilterFN,
|
|
212
|
-
notEquals: notEqualsFilterFN,
|
|
213
|
-
startsWith: startsWithFilterFN
|
|
214
|
-
};
|
|
215
|
-
|
|
216
129
|
var MaterialReactTableContext = /*#__PURE__*/function () {
|
|
217
130
|
return createContext({});
|
|
218
131
|
}();
|
|
@@ -243,59 +156,46 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
243
156
|
showSearch = _useState5[0],
|
|
244
157
|
setShowSearch = _useState5[1];
|
|
245
158
|
|
|
246
|
-
var
|
|
247
|
-
return
|
|
248
|
-
}, [props.filterTypes]);
|
|
249
|
-
|
|
250
|
-
var getInitialFilterTypeState = function getInitialFilterTypeState() {
|
|
251
|
-
var lowestLevelColumns = props.columns;
|
|
252
|
-
var currentCols = props.columns;
|
|
253
|
-
|
|
254
|
-
while (!!currentCols.length && currentCols.some(function (col) {
|
|
255
|
-
return col.columns;
|
|
256
|
-
})) {
|
|
257
|
-
var nextCols = currentCols.filter(function (col) {
|
|
258
|
-
return !!col.columns;
|
|
259
|
-
}).map(function (col) {
|
|
260
|
-
return col.columns;
|
|
261
|
-
}).flat();
|
|
262
|
-
|
|
263
|
-
if (nextCols.every(function (col) {
|
|
264
|
-
return !col.columns;
|
|
265
|
-
})) {
|
|
266
|
-
lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
currentCols = nextCols;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
lowestLevelColumns = lowestLevelColumns.filter(function (col) {
|
|
273
|
-
return !col.columns;
|
|
274
|
-
});
|
|
275
|
-
return Object.assign.apply(Object, [{}].concat(lowestLevelColumns.map(function (c) {
|
|
159
|
+
var _useState6 = useState(function () {
|
|
160
|
+
return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
|
|
276
161
|
var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
|
|
277
162
|
|
|
278
163
|
return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!c.filterSelectOptions ? 'equals' : 'fuzzy', _ref2;
|
|
279
164
|
})));
|
|
280
|
-
};
|
|
281
|
-
|
|
282
|
-
var _useState6 = useState(function () {
|
|
283
|
-
return getInitialFilterTypeState();
|
|
284
165
|
}),
|
|
285
166
|
currentFilterTypes = _useState6[0],
|
|
286
167
|
setCurrentFilterTypes = _useState6[1];
|
|
287
168
|
|
|
288
|
-
var
|
|
289
|
-
return
|
|
290
|
-
column.
|
|
169
|
+
var applyFiltersToColumns = useCallback(function (cols) {
|
|
170
|
+
return cols.map(function (column) {
|
|
171
|
+
if (column.columns) {
|
|
172
|
+
applyFiltersToColumns(column.columns);
|
|
173
|
+
} else {
|
|
174
|
+
var _props$filterTypes;
|
|
175
|
+
|
|
176
|
+
column.filter = props == null ? void 0 : (_props$filterTypes = props.filterTypes) == null ? void 0 : _props$filterTypes[currentFilterTypes[column.accessor]];
|
|
177
|
+
}
|
|
178
|
+
|
|
291
179
|
return column;
|
|
292
180
|
});
|
|
293
|
-
}, [props.
|
|
294
|
-
var
|
|
295
|
-
|
|
181
|
+
}, [currentFilterTypes, props.filterTypes]);
|
|
182
|
+
var columns = useMemo(function () {
|
|
183
|
+
return applyFiltersToColumns(props.columns);
|
|
184
|
+
}, [props.columns, applyFiltersToColumns]);
|
|
185
|
+
var data = useMemo(function () {
|
|
186
|
+
return !props.isLoading || !!props.data.length ? props.data : [].concat(Array(10)).map(function (_) {
|
|
187
|
+
return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
|
|
188
|
+
var _ref3;
|
|
189
|
+
|
|
190
|
+
return _ref3 = {}, _ref3[c.accessor] = null, _ref3;
|
|
191
|
+
})));
|
|
192
|
+
});
|
|
193
|
+
}, [props.data, props.isLoading]);
|
|
194
|
+
var tableInstance = useTable.apply(void 0, [// @ts-ignore
|
|
195
|
+
_extends({}, props, {
|
|
296
196
|
// @ts-ignore
|
|
297
|
-
|
|
298
|
-
|
|
197
|
+
columns: columns,
|
|
198
|
+
data: data,
|
|
299
199
|
useControlledState: function useControlledState(state) {
|
|
300
200
|
return useMemo(function () {
|
|
301
201
|
return _extends({}, state, {
|
|
@@ -360,6 +260,124 @@ var MRT_FILTER_TYPE;
|
|
|
360
260
|
MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
|
|
361
261
|
})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
|
|
362
262
|
|
|
263
|
+
var fuzzyFilterFN = function fuzzyFilterFN(rows, columnIds, filterValue) {
|
|
264
|
+
return matchSorter(rows, filterValue.toString().trim(), {
|
|
265
|
+
keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
|
|
266
|
+
return "values." + c;
|
|
267
|
+
}) : ["values." + columnIds],
|
|
268
|
+
sorter: function sorter(rankedItems) {
|
|
269
|
+
return rankedItems;
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
};
|
|
273
|
+
|
|
274
|
+
fuzzyFilterFN.autoRemove = function (val) {
|
|
275
|
+
return !val;
|
|
276
|
+
};
|
|
277
|
+
|
|
278
|
+
var containsFilterFN = function containsFilterFN(rows, id, filterValue) {
|
|
279
|
+
return rows.filter(function (row) {
|
|
280
|
+
return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
|
|
281
|
+
});
|
|
282
|
+
};
|
|
283
|
+
|
|
284
|
+
containsFilterFN.autoRemove = function (val) {
|
|
285
|
+
return !val;
|
|
286
|
+
};
|
|
287
|
+
|
|
288
|
+
var startsWithFilterFN = function startsWithFilterFN(rows, id, filterValue) {
|
|
289
|
+
return rows.filter(function (row) {
|
|
290
|
+
return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
|
|
291
|
+
});
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
startsWithFilterFN.autoRemove = function (val) {
|
|
295
|
+
return !val;
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
|
|
299
|
+
return rows.filter(function (row) {
|
|
300
|
+
return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
|
|
301
|
+
});
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
endsWithFilterFN.autoRemove = function (val) {
|
|
305
|
+
return !val;
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
|
|
309
|
+
return rows.filter(function (row) {
|
|
310
|
+
return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
|
|
311
|
+
});
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
equalsFilterFN.autoRemove = function (val) {
|
|
315
|
+
return !val;
|
|
316
|
+
};
|
|
317
|
+
|
|
318
|
+
var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
|
|
319
|
+
return rows.filter(function (row) {
|
|
320
|
+
return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
|
|
321
|
+
});
|
|
322
|
+
};
|
|
323
|
+
|
|
324
|
+
notEqualsFilterFN.autoRemove = function (val) {
|
|
325
|
+
return !val;
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
var greaterThanFilterFN = function greaterThanFilterFN(rows, id, filterValue) {
|
|
329
|
+
return rows.filter(function (row) {
|
|
330
|
+
return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
|
331
|
+
});
|
|
332
|
+
};
|
|
333
|
+
|
|
334
|
+
greaterThanFilterFN.autoRemove = function (val) {
|
|
335
|
+
return !val;
|
|
336
|
+
};
|
|
337
|
+
|
|
338
|
+
var lessThanFilterFN = function lessThanFilterFN(rows, id, filterValue) {
|
|
339
|
+
return rows.filter(function (row) {
|
|
340
|
+
return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
|
341
|
+
});
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
lessThanFilterFN.autoRemove = function (val) {
|
|
345
|
+
return !val;
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
|
|
349
|
+
return rows.filter(function (row) {
|
|
350
|
+
return !row.values[id].toString().toLowerCase().trim();
|
|
351
|
+
});
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
emptyFilterFN.autoRemove = function (val) {
|
|
355
|
+
return !val;
|
|
356
|
+
};
|
|
357
|
+
|
|
358
|
+
var notEmptyFilterFN = function notEmptyFilterFN(rows, id, _filterValue) {
|
|
359
|
+
return rows.filter(function (row) {
|
|
360
|
+
return !!row.values[id].toString().toLowerCase().trim();
|
|
361
|
+
});
|
|
362
|
+
};
|
|
363
|
+
|
|
364
|
+
notEmptyFilterFN.autoRemove = function (val) {
|
|
365
|
+
return !val;
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
var defaultFilterFNs = {
|
|
369
|
+
contains: containsFilterFN,
|
|
370
|
+
empty: emptyFilterFN,
|
|
371
|
+
endsWith: endsWithFilterFN,
|
|
372
|
+
equals: equalsFilterFN,
|
|
373
|
+
fuzzy: fuzzyFilterFN,
|
|
374
|
+
greaterThan: greaterThanFilterFN,
|
|
375
|
+
lessThan: lessThanFilterFN,
|
|
376
|
+
notEmpty: notEmptyFilterFN,
|
|
377
|
+
notEquals: notEqualsFilterFN,
|
|
378
|
+
startsWith: startsWithFilterFN
|
|
379
|
+
};
|
|
380
|
+
|
|
363
381
|
var commonMenuItemStyles = {
|
|
364
382
|
py: '6px',
|
|
365
383
|
my: 0,
|
|
@@ -587,6 +605,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
587
605
|
arrow: true,
|
|
588
606
|
title: localization.changeFilterMode
|
|
589
607
|
}, React.createElement("span", null, React.createElement(IconButton, {
|
|
608
|
+
"aria-label": localization.changeFilterMode,
|
|
590
609
|
onClick: handleFilterMenuOpen,
|
|
591
610
|
size: "small",
|
|
592
611
|
sx: {
|
|
@@ -836,15 +855,16 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
836
855
|
setAnchorEl(null);
|
|
837
856
|
};
|
|
838
857
|
|
|
858
|
+
var handleShowAllColumns = function handleShowAllColumns() {
|
|
859
|
+
tableInstance.toggleHideAllColumns(false);
|
|
860
|
+
setAnchorEl(null);
|
|
861
|
+
};
|
|
862
|
+
|
|
839
863
|
var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
|
|
840
864
|
event.stopPropagation();
|
|
841
865
|
setFilterMenuAnchorEl(event.currentTarget);
|
|
842
866
|
};
|
|
843
867
|
|
|
844
|
-
var handleShowAllColumns = function handleShowAllColumns() {
|
|
845
|
-
tableInstance.toggleHideAllColumns(false);
|
|
846
|
-
};
|
|
847
|
-
|
|
848
868
|
var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
|
|
849
869
|
event.stopPropagation();
|
|
850
870
|
setShowHideColumnsMenuAnchorEl(event.currentTarget);
|
|
@@ -2406,9 +2426,7 @@ var MRT_TableBody = function MRT_TableBody() {
|
|
|
2406
2426
|
});
|
|
2407
2427
|
|
|
2408
2428
|
return React.createElement(TableBody, Object.assign({}, tableBodyProps, {
|
|
2409
|
-
sx: _extends({
|
|
2410
|
-
overflowY: 'hidden'
|
|
2411
|
-
}, tableBodyProps == null ? void 0 : tableBodyProps.sx)
|
|
2429
|
+
sx: _extends({}, tableBodyProps == null ? void 0 : tableBodyProps.sx)
|
|
2412
2430
|
}), rows.map(function (row) {
|
|
2413
2431
|
tableInstance.prepareRow(row);
|
|
2414
2432
|
return React.createElement(MRT_TableBodyRow, {
|
|
@@ -2768,7 +2786,7 @@ var MRT_TablePagination = function MRT_TablePagination() {
|
|
|
2768
2786
|
showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
|
|
2769
2787
|
}, tablePaginationProps, {
|
|
2770
2788
|
sx: _extends({
|
|
2771
|
-
|
|
2789
|
+
m: '0 0.5rem',
|
|
2772
2790
|
position: 'relative',
|
|
2773
2791
|
zIndex: 2
|
|
2774
2792
|
}, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
|
|
@@ -2830,6 +2848,34 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
|
|
|
2830
2848
|
}, selectMessage, groupedByMessage)));
|
|
2831
2849
|
};
|
|
2832
2850
|
|
|
2851
|
+
var MRT_LinearProgressBar = function MRT_LinearProgressBar() {
|
|
2852
|
+
var _useMRT = useMRT(),
|
|
2853
|
+
muiLinearProgressProps = _useMRT.muiLinearProgressProps,
|
|
2854
|
+
isFetching = _useMRT.isFetching,
|
|
2855
|
+
isLoading = _useMRT.isLoading,
|
|
2856
|
+
tableInstance = _useMRT.tableInstance;
|
|
2857
|
+
|
|
2858
|
+
var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
|
|
2859
|
+
return React.createElement(Collapse, {
|
|
2860
|
+
"in": isFetching || isLoading,
|
|
2861
|
+
unmountOnExit: true
|
|
2862
|
+
}, React.createElement(LinearProgress, Object.assign({
|
|
2863
|
+
"aria-label": "Loading",
|
|
2864
|
+
"aria-busy": "true"
|
|
2865
|
+
}, linearProgressProps)));
|
|
2866
|
+
};
|
|
2867
|
+
|
|
2868
|
+
var commonToolbarStyles = function commonToolbarStyles(theme, tableInstance) {
|
|
2869
|
+
return {
|
|
2870
|
+
backgroundColor: theme.palette.background["default"],
|
|
2871
|
+
backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
|
|
2872
|
+
display: 'grid',
|
|
2873
|
+
opacity: tableInstance.state.fullScreen ? 0.95 : 1,
|
|
2874
|
+
p: '0 !important',
|
|
2875
|
+
width: '100%',
|
|
2876
|
+
zIndex: 1
|
|
2877
|
+
};
|
|
2878
|
+
};
|
|
2833
2879
|
var MRT_ToolbarTop = function MRT_ToolbarTop() {
|
|
2834
2880
|
var _renderToolbarCustomA;
|
|
2835
2881
|
|
|
@@ -2850,15 +2896,9 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
|
|
|
2850
2896
|
}, toolbarProps, {
|
|
2851
2897
|
sx: function sx(theme) {
|
|
2852
2898
|
return _extends({
|
|
2853
|
-
backgroundColor: theme.palette.background["default"],
|
|
2854
|
-
backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
|
|
2855
|
-
display: 'grid',
|
|
2856
|
-
p: '0 !important',
|
|
2857
2899
|
position: tableInstance.state.fullScreen ? 'sticky' : undefined,
|
|
2858
|
-
top: tableInstance.state.fullScreen ? '0' : undefined
|
|
2859
|
-
|
|
2860
|
-
zIndex: 1
|
|
2861
|
-
}, toolbarProps == null ? void 0 : toolbarProps.sx);
|
|
2900
|
+
top: tableInstance.state.fullScreen ? '0' : undefined
|
|
2901
|
+
}, commonToolbarStyles(theme, tableInstance), toolbarProps == null ? void 0 : toolbarProps.sx);
|
|
2862
2902
|
}
|
|
2863
2903
|
}), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, null), React.createElement(Box, {
|
|
2864
2904
|
sx: {
|
|
@@ -2873,7 +2913,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
|
|
|
2873
2913
|
position: 'relative',
|
|
2874
2914
|
zIndex: 3
|
|
2875
2915
|
}
|
|
2876
|
-
}, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
|
|
2916
|
+
}, !disableGlobalFilter && React.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, null))), React.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)), React.createElement(MRT_LinearProgressBar, null));
|
|
2877
2917
|
};
|
|
2878
2918
|
|
|
2879
2919
|
var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
|
|
@@ -2892,53 +2932,37 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
|
|
|
2892
2932
|
}, toolbarProps, {
|
|
2893
2933
|
sx: function sx(theme) {
|
|
2894
2934
|
return _extends({
|
|
2895
|
-
backgroundColor: theme.palette.background["default"],
|
|
2896
|
-
backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
|
|
2897
2935
|
bottom: tableInstance.state.fullScreen ? '0' : undefined,
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
overflowY: 'hidden',
|
|
2901
|
-
p: '0 0.5rem !important',
|
|
2902
|
-
position: tableInstance.state.fullScreen ? 'fixed' : undefined,
|
|
2903
|
-
width: 'calc(100% - 1rem)',
|
|
2904
|
-
zIndex: 1
|
|
2905
|
-
}, toolbarProps == null ? void 0 : toolbarProps.sx);
|
|
2936
|
+
position: tableInstance.state.fullScreen ? 'fixed' : undefined
|
|
2937
|
+
}, commonToolbarStyles(theme, tableInstance), toolbarProps == null ? void 0 : toolbarProps.sx);
|
|
2906
2938
|
}
|
|
2907
|
-
}),
|
|
2939
|
+
}), React.createElement(MRT_LinearProgressBar, null), React.createElement(Box, {
|
|
2940
|
+
sx: {
|
|
2941
|
+
display: 'flex',
|
|
2942
|
+
justifyContent: 'space-between',
|
|
2943
|
+
width: '100%'
|
|
2944
|
+
}
|
|
2945
|
+
}, !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, null) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, null)));
|
|
2908
2946
|
};
|
|
2909
2947
|
|
|
2910
2948
|
var MRT_TableContainer = function MRT_TableContainer() {
|
|
2911
2949
|
var _useMRT = useMRT(),
|
|
2912
2950
|
hideToolbarBottom = _useMRT.hideToolbarBottom,
|
|
2913
2951
|
hideToolbarTop = _useMRT.hideToolbarTop,
|
|
2914
|
-
isFetching = _useMRT.isFetching,
|
|
2915
|
-
isLoading = _useMRT.isLoading,
|
|
2916
|
-
muiLinearProgressProps = _useMRT.muiLinearProgressProps,
|
|
2917
2952
|
muiTableContainerProps = _useMRT.muiTableContainerProps,
|
|
2918
2953
|
tableInstance = _useMRT.tableInstance;
|
|
2919
2954
|
|
|
2920
2955
|
var fullScreen = tableInstance.state.fullScreen;
|
|
2921
|
-
var originalBodyOverflowStyle = useRef();
|
|
2922
|
-
useEffect(function () {
|
|
2923
|
-
if (typeof window !== 'undefined') {
|
|
2924
|
-
var _document, _document$body, _document$body$style;
|
|
2925
|
-
|
|
2926
|
-
originalBodyOverflowStyle.current = (_document = document) == null ? void 0 : (_document$body = _document.body) == null ? void 0 : (_document$body$style = _document$body.style) == null ? void 0 : _document$body$style.overflow;
|
|
2927
|
-
}
|
|
2928
|
-
}, []);
|
|
2929
2956
|
useEffect(function () {
|
|
2930
2957
|
if (typeof window !== 'undefined') {
|
|
2931
2958
|
if (fullScreen) {
|
|
2932
2959
|
document.body.style.overflow = 'hidden';
|
|
2933
2960
|
} else {
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
document.body.style.overflow = (_originalBodyOverflow = originalBodyOverflowStyle.current) != null ? _originalBodyOverflow : 'auto';
|
|
2961
|
+
document.body.style.overflow = 'auto';
|
|
2937
2962
|
}
|
|
2938
2963
|
}
|
|
2939
2964
|
}, [fullScreen]);
|
|
2940
2965
|
var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
|
|
2941
|
-
var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
|
|
2942
2966
|
return React.createElement(TableContainer, Object.assign({
|
|
2943
2967
|
component: Paper
|
|
2944
2968
|
}, tableContainerProps, {
|
|
@@ -2947,6 +2971,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
|
|
|
2947
2971
|
height: fullScreen ? '100%' : undefined,
|
|
2948
2972
|
left: fullScreen ? '0' : undefined,
|
|
2949
2973
|
m: fullScreen ? '0' : undefined,
|
|
2974
|
+
overflowY: 'hidden',
|
|
2950
2975
|
position: fullScreen ? 'fixed' : undefined,
|
|
2951
2976
|
right: fullScreen ? '0' : undefined,
|
|
2952
2977
|
top: fullScreen ? '0' : undefined,
|
|
@@ -2954,10 +2979,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
|
|
|
2954
2979
|
width: fullScreen ? '100vw' : undefined,
|
|
2955
2980
|
zIndex: fullScreen ? 1200 : 1
|
|
2956
2981
|
}, tableContainerProps == null ? void 0 : tableContainerProps.sx)
|
|
2957
|
-
}), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(
|
|
2958
|
-
"in": isFetching || isLoading,
|
|
2959
|
-
unmountOnExit: true
|
|
2960
|
-
}, React.createElement(LinearProgress, Object.assign({}, linearProgressProps))), React.createElement(Box, {
|
|
2982
|
+
}), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Box, {
|
|
2961
2983
|
sx: {
|
|
2962
2984
|
maxWidth: '100%',
|
|
2963
2985
|
overflowX: 'auto'
|
|
@@ -3040,13 +3062,16 @@ var MRT_Default_Icons = {
|
|
|
3040
3062
|
VisibilityOffIcon: VisibilityOffIcon
|
|
3041
3063
|
};
|
|
3042
3064
|
|
|
3043
|
-
var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
|
|
3065
|
+
var _excluded = ["defaultColumn", "filterTypes", "globalFilter", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
|
|
3044
3066
|
var MaterialReactTable = (function (_ref) {
|
|
3045
3067
|
var _ref$defaultColumn = _ref.defaultColumn,
|
|
3046
3068
|
defaultColumn = _ref$defaultColumn === void 0 ? {
|
|
3047
3069
|
minWidth: 50,
|
|
3048
3070
|
maxWidth: 1000
|
|
3049
3071
|
} : _ref$defaultColumn,
|
|
3072
|
+
filterTypes = _ref.filterTypes,
|
|
3073
|
+
_ref$globalFilter = _ref.globalFilter,
|
|
3074
|
+
globalFilter = _ref$globalFilter === void 0 ? 'fuzzy' : _ref$globalFilter,
|
|
3050
3075
|
icons = _ref.icons,
|
|
3051
3076
|
localization = _ref.localization,
|
|
3052
3077
|
_ref$positionActionsC = _ref.positionActionsColumn,
|
|
@@ -3059,8 +3084,14 @@ var MaterialReactTable = (function (_ref) {
|
|
|
3059
3084
|
positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
|
|
3060
3085
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
3061
3086
|
|
|
3062
|
-
return React.createElement(MaterialReactTableProvider
|
|
3087
|
+
return React.createElement(MaterialReactTableProvider //@ts-ignore
|
|
3088
|
+
, Object.assign({
|
|
3089
|
+
//@ts-ignore
|
|
3063
3090
|
defaultColumn: defaultColumn,
|
|
3091
|
+
//@ts-ignore
|
|
3092
|
+
filterTypes: _extends({}, defaultFilterFNs, filterTypes),
|
|
3093
|
+
//@ts-ignore
|
|
3094
|
+
globalFilter: globalFilter,
|
|
3064
3095
|
icons: _extends({}, MRT_Default_Icons, icons),
|
|
3065
3096
|
localization: _extends({}, MRT_DefaultLocalization_EN, localization),
|
|
3066
3097
|
positionActionsColumn: positionActionsColumn,
|