material-react-table 0.3.3 → 0.3.4
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 +8 -5
- package/dist/buttons/MRT_ToggleSearchButton.d.ts +4 -0
- package/dist/inputs/{MRT_EditCellTextfield.d.ts → MRT_EditCellTextField.d.ts} +1 -1
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/material-react-table.cjs.development.js +250 -160
- 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 +253 -163
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +2 -2
- package/dist/menus/MRT_RowActionMenu.d.ts +1 -0
- package/dist/table/MRT_TableButtonCell.d.ts +3 -0
- package/dist/useMaterialReactTable.d.ts +2 -0
- package/dist/utils/localization.d.ts +2 -0
- package/dist/utils/useMRTCalcs.d.ts +1 -1
- package/package.json +8 -6
- package/src/@types/react-table-config.d.ts +33 -55
- package/src/MaterialReactTable.tsx +22 -54
- package/src/body/MRT_TableBody.tsx +1 -2
- package/src/body/MRT_TableBodyCell.tsx +7 -14
- package/src/body/MRT_TableBodyRow.tsx +7 -24
- package/src/body/MRT_TableDetailPanel.tsx +3 -12
- package/src/buttons/MRT_EditActionButtons.tsx +4 -10
- package/src/buttons/MRT_ExpandAllButton.tsx +7 -18
- package/src/buttons/MRT_ExpandButton.tsx +8 -15
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +2 -9
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +4 -8
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +42 -24
- package/src/buttons/MRT_ToggleSearchButton.tsx +29 -0
- package/src/footer/MRT_TableFooter.tsx +1 -4
- package/src/footer/MRT_TableFooterCell.tsx +2 -4
- package/src/footer/MRT_TableFooterRow.tsx +4 -10
- package/src/head/MRT_TableHead.tsx +2 -7
- package/src/head/MRT_TableHeadCell.tsx +15 -15
- package/src/head/MRT_TableHeadRow.tsx +2 -4
- package/src/inputs/MRT_DensePaddingSwitch.tsx +4 -2
- package/src/inputs/{MRT_EditCellTextfield.tsx → MRT_EditCellTextField.tsx} +21 -14
- package/src/inputs/MRT_FilterTextField.tsx +39 -16
- package/src/inputs/MRT_SearchTextField.tsx +40 -43
- package/src/inputs/MRT_SelectAllCheckbox.tsx +8 -13
- package/src/inputs/MRT_SelectCheckbox.tsx +9 -13
- package/src/menus/MRT_ColumnActionMenu.tsx +51 -35
- package/src/menus/MRT_RowActionMenu.tsx +6 -25
- package/src/table/MRT_Table.tsx +1 -2
- package/src/table/MRT_TableButtonCell.tsx +9 -0
- package/src/table/MRT_TableContainer.tsx +2 -7
- package/src/table/MRT_TableSpacerCell.tsx +1 -3
- package/src/toolbar/MRT_TablePagination.tsx +3 -6
- package/src/toolbar/MRT_ToolbarBottom.tsx +4 -6
- package/src/toolbar/MRT_ToolbarButtons.tsx +3 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +8 -17
- package/src/useMaterialReactTable.tsx +14 -21
- package/src/utils/localization.ts +10 -6
- package/src/utils/useMRTCalcs.tsx +1 -3
|
@@ -24,6 +24,7 @@ var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
|
|
|
24
24
|
var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
|
|
25
25
|
var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
|
|
26
26
|
var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
|
|
27
|
+
var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
|
|
27
28
|
|
|
28
29
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
29
30
|
try {
|
|
@@ -129,7 +130,7 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
|
|
|
129
130
|
}();
|
|
130
131
|
|
|
131
132
|
var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
132
|
-
var _props$defaultShowFil, _props$defaultDensePa;
|
|
133
|
+
var _props$defaultShowSea, _props$defaultShowFil, _props$defaultDensePa;
|
|
133
134
|
|
|
134
135
|
var hooks = [reactTable.useResizeColumns, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
|
|
135
136
|
if (props.enableColumnResizing) hooks.unshift(reactTable.useFlexLayout);
|
|
@@ -138,26 +139,32 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
138
139
|
tableInstance: tableInstance
|
|
139
140
|
});
|
|
140
141
|
|
|
141
|
-
var _useState = React.useState((_props$
|
|
142
|
-
|
|
143
|
-
|
|
142
|
+
var _useState = React.useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
|
|
143
|
+
showSearch = _useState[0],
|
|
144
|
+
setShowSearch = _useState[1];
|
|
144
145
|
|
|
145
|
-
var _useState2 = React.useState((_props$
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
var _useState2 = React.useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
|
|
147
|
+
showFilters = _useState2[0],
|
|
148
|
+
setShowFilters = _useState2[1];
|
|
148
149
|
|
|
149
|
-
var _useState3 = React.useState(null),
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
var _useState3 = React.useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
|
|
151
|
+
densePadding = _useState3[0],
|
|
152
|
+
setDensePadding = _useState3[1];
|
|
153
|
+
|
|
154
|
+
var _useState4 = React.useState(null),
|
|
155
|
+
currentEditingRow = _useState4[0],
|
|
156
|
+
setCurrentEditingRow = _useState4[1];
|
|
152
157
|
|
|
153
158
|
return React__default.createElement(MaterialReactTableContext.Provider, {
|
|
154
159
|
value: _extends({}, mrtCalcs, props, {
|
|
160
|
+
currentEditingRow: currentEditingRow,
|
|
155
161
|
densePadding: densePadding,
|
|
162
|
+
setCurrentEditingRow: setCurrentEditingRow,
|
|
156
163
|
setDensePadding: setDensePadding,
|
|
157
164
|
setShowFilters: setShowFilters,
|
|
158
|
-
|
|
159
|
-
setCurrentEditingRow: setCurrentEditingRow,
|
|
165
|
+
setShowSearch: setShowSearch,
|
|
160
166
|
showFilters: showFilters,
|
|
167
|
+
showSearch: showSearch,
|
|
161
168
|
// @ts-ignore
|
|
162
169
|
tableInstance: tableInstance
|
|
163
170
|
})
|
|
@@ -169,7 +176,9 @@ var useMaterialReactTable = function useMaterialReactTable() {
|
|
|
169
176
|
);
|
|
170
177
|
};
|
|
171
178
|
|
|
172
|
-
var
|
|
179
|
+
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
180
|
+
var _localization$filterT, _localization$filterT2, _localization$filterT3, _localization$filterT4;
|
|
181
|
+
|
|
173
182
|
var column = _ref.column;
|
|
174
183
|
|
|
175
184
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
@@ -189,14 +198,21 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
|
|
|
189
198
|
};
|
|
190
199
|
|
|
191
200
|
if (column.Filter) {
|
|
192
|
-
return React__default.createElement(React__default.Fragment, null, column.Filter({
|
|
201
|
+
return React__default.createElement(React__default.Fragment, null, column.Filter == null ? void 0 : column.Filter({
|
|
193
202
|
column: column
|
|
194
203
|
}));
|
|
195
204
|
}
|
|
196
205
|
|
|
197
206
|
return React__default.createElement(material.TextField, {
|
|
207
|
+
fullWidth: true,
|
|
208
|
+
id: "filter-" + column.id + "-column",
|
|
209
|
+
inputProps: {
|
|
210
|
+
style: {
|
|
211
|
+
textOverflow: 'ellipsis'
|
|
212
|
+
}
|
|
213
|
+
},
|
|
198
214
|
margin: "dense",
|
|
199
|
-
placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
|
|
215
|
+
placeholder: localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
|
|
200
216
|
onChange: function onChange(e) {
|
|
201
217
|
setFilterValue(e.target.value);
|
|
202
218
|
handleChange(e.target.value);
|
|
@@ -207,20 +223,25 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
|
|
|
207
223
|
value: filterValue != null ? filterValue : '',
|
|
208
224
|
variant: "standard",
|
|
209
225
|
InputProps: {
|
|
210
|
-
startAdornment: React__default.createElement(material.
|
|
226
|
+
startAdornment: React__default.createElement(material.Tooltip, {
|
|
227
|
+
arrow: true,
|
|
228
|
+
title: (_localization$filterT2 = localization == null ? void 0 : (_localization$filterT3 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT3.replace('{column}', String(column.Header))) != null ? _localization$filterT2 : ''
|
|
229
|
+
}, React__default.createElement(material.InputAdornment, {
|
|
211
230
|
position: "start"
|
|
212
|
-
}, React__default.createElement(FilterIcon, null)),
|
|
231
|
+
}, React__default.createElement(FilterIcon, null))),
|
|
213
232
|
endAdornment: React__default.createElement(material.InputAdornment, {
|
|
214
233
|
position: "end"
|
|
215
|
-
}, React__default.createElement(material.
|
|
234
|
+
}, React__default.createElement(material.Tooltip, {
|
|
235
|
+
arrow: true,
|
|
236
|
+
title: (_localization$filterT4 = localization == null ? void 0 : localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT4 : ''
|
|
237
|
+
}, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
|
|
216
238
|
"aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
|
|
217
239
|
disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
|
|
218
240
|
onClick: handleClear,
|
|
219
|
-
size: "small"
|
|
220
|
-
title: localization == null ? void 0 : localization.filterTextFieldClearButtonTitle
|
|
241
|
+
size: "small"
|
|
221
242
|
}, React__default.createElement(CloseIcon, {
|
|
222
243
|
fontSize: "small"
|
|
223
|
-
})))
|
|
244
|
+
})))))
|
|
224
245
|
}
|
|
225
246
|
});
|
|
226
247
|
};
|
|
@@ -230,6 +251,8 @@ var MenuItem = /*#__PURE__*/material.styled(material.MenuItem)({
|
|
|
230
251
|
gap: '0.75rem'
|
|
231
252
|
});
|
|
232
253
|
var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
254
|
+
var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
|
|
255
|
+
|
|
233
256
|
var anchorEl = _ref.anchorEl,
|
|
234
257
|
column = _ref.column,
|
|
235
258
|
setAnchorEl = _ref.setAnchorEl;
|
|
@@ -238,7 +261,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
238
261
|
disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
|
|
239
262
|
enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
|
|
240
263
|
disableSortBy = _useMaterialReactTabl.disableSortBy,
|
|
241
|
-
localization = _useMaterialReactTabl.localization
|
|
264
|
+
localization = _useMaterialReactTabl.localization,
|
|
265
|
+
disableFilters = _useMaterialReactTabl.disableFilters,
|
|
266
|
+
setShowFilters = _useMaterialReactTabl.setShowFilters;
|
|
242
267
|
|
|
243
268
|
var handleClearSort = function handleClearSort() {
|
|
244
269
|
column.clearSortBy();
|
|
@@ -265,6 +290,17 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
265
290
|
setAnchorEl(null);
|
|
266
291
|
};
|
|
267
292
|
|
|
293
|
+
var handleFilterByColumn = function handleFilterByColumn() {
|
|
294
|
+
setShowFilters(true);
|
|
295
|
+
setTimeout(function () {
|
|
296
|
+
var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
|
|
297
|
+
|
|
298
|
+
return (_document$getElementB = document.getElementById( // @ts-ignore
|
|
299
|
+
(_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "filter-" + column.id + "-column")) == null ? void 0 : _document$getElementB.focus();
|
|
300
|
+
}, 200);
|
|
301
|
+
setAnchorEl(null);
|
|
302
|
+
};
|
|
303
|
+
|
|
268
304
|
return React__default.createElement(material.Menu, {
|
|
269
305
|
anchorEl: anchorEl,
|
|
270
306
|
open: !!anchorEl,
|
|
@@ -279,7 +315,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
279
315
|
key: 2,
|
|
280
316
|
disabled: column.isSorted && !column.isSortedDesc,
|
|
281
317
|
onClick: handleSortAsc
|
|
282
|
-
}, React__default.createElement(SortIcon, null),
|
|
318
|
+
}, React__default.createElement(SortIcon, null), ' ', localization == null ? void 0 : (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React__default.createElement(MenuItem, {
|
|
283
319
|
key: 3,
|
|
284
320
|
disabled: column.isSorted && column.isSortedDesc,
|
|
285
321
|
onClick: handleSortDesc
|
|
@@ -287,25 +323,30 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
287
323
|
style: {
|
|
288
324
|
transform: 'rotate(180deg) scaleX(-1)'
|
|
289
325
|
}
|
|
290
|
-
}), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React__default.createElement(material.Divider, {
|
|
291
|
-
key:
|
|
292
|
-
})
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
}
|
|
298
|
-
|
|
326
|
+
}), ' ', localization == null ? void 0 : (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React__default.createElement(material.Divider, {
|
|
327
|
+
key: 0
|
|
328
|
+
}), React__default.createElement(MenuItem, {
|
|
329
|
+
key: 1,
|
|
330
|
+
onClick: handleFilterByColumn
|
|
331
|
+
}, React__default.createElement(FilterIcon, null), ' ', localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
|
|
332
|
+
key: 1
|
|
333
|
+
}), React__default.createElement(MenuItem, {
|
|
334
|
+
key: 2,
|
|
299
335
|
onClick: handleGroupByColumn
|
|
300
|
-
}, React__default.createElement(DynamicFeedIcon, null),
|
|
336
|
+
}, React__default.createElement(DynamicFeedIcon, null), ' ', localization == null ? void 0 : (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React__default.createElement(material.Divider, {
|
|
337
|
+
key: 0
|
|
338
|
+
}), React__default.createElement(MenuItem, {
|
|
339
|
+
key: 1,
|
|
340
|
+
onClick: handleHideColumn
|
|
341
|
+
}, React__default.createElement(VisibilityOffIcon, null), ' ', localization == null ? void 0 : (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
|
|
301
342
|
};
|
|
302
343
|
|
|
303
344
|
var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
|
|
304
345
|
opacity: 0.5,
|
|
305
346
|
transition: 'opacity 0.2s',
|
|
306
347
|
marginRight: '2px',
|
|
307
|
-
height: '
|
|
308
|
-
width: '
|
|
348
|
+
height: '1.6rem',
|
|
349
|
+
width: '1.6rem',
|
|
309
350
|
'&:hover': {
|
|
310
351
|
opacity: 1
|
|
311
352
|
}
|
|
@@ -328,9 +369,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
328
369
|
|
|
329
370
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton, {
|
|
330
371
|
"aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
|
|
331
|
-
title: localization == null ? void 0 : localization.columnActionMenuButtonTitle,
|
|
332
372
|
onClick: handleClick,
|
|
333
|
-
size: "small"
|
|
373
|
+
size: "small",
|
|
374
|
+
title: localization == null ? void 0 : localization.columnActionMenuButtonTitle
|
|
334
375
|
}, React__default.createElement(MoreVertIcon, null)), React__default.createElement(MRT_ColumnActionMenu, {
|
|
335
376
|
anchorEl: anchorEl,
|
|
336
377
|
column: column,
|
|
@@ -347,23 +388,27 @@ var StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
|
347
388
|
enableColumnResizing = _ref.enableColumnResizing;
|
|
348
389
|
return {
|
|
349
390
|
fontWeight: 'bold',
|
|
350
|
-
|
|
391
|
+
height: '100%',
|
|
351
392
|
padding: densePadding ? '0.5rem' : '1rem',
|
|
352
|
-
transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
|
|
393
|
+
transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
|
|
394
|
+
verticalAlign: 'text-top'
|
|
353
395
|
};
|
|
354
396
|
});
|
|
355
|
-
var
|
|
356
|
-
|
|
397
|
+
var TableCellWrapper = /*#__PURE__*/material.styled('div')({
|
|
398
|
+
alignContent: 'space-between',
|
|
399
|
+
display: 'grid',
|
|
400
|
+
height: '100%'
|
|
357
401
|
});
|
|
358
|
-
var
|
|
402
|
+
var TableCellTopContents = /*#__PURE__*/material.styled('div')({
|
|
359
403
|
width: '100%',
|
|
360
404
|
display: 'flex',
|
|
361
|
-
justifyContent: 'space-between'
|
|
405
|
+
justifyContent: 'space-between',
|
|
406
|
+
alignItems: 'flex-start'
|
|
362
407
|
});
|
|
363
408
|
var CellFlexItem = /*#__PURE__*/material.styled('span')({
|
|
409
|
+
alignItems: 'center',
|
|
364
410
|
display: 'flex',
|
|
365
|
-
flexWrap: 'nowrap'
|
|
366
|
-
alignItems: 'center'
|
|
411
|
+
flexWrap: 'nowrap'
|
|
367
412
|
});
|
|
368
413
|
var Divider = /*#__PURE__*/material.styled(material.Divider)({
|
|
369
414
|
borderRightWidth: '2px',
|
|
@@ -397,17 +442,14 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
|
|
|
397
442
|
align: isParentHeader ? 'center' : 'left',
|
|
398
443
|
densePadding: densePadding,
|
|
399
444
|
enableColumnResizing: enableColumnResizing
|
|
400
|
-
}, tableCellProps), React__default.createElement(
|
|
445
|
+
}, tableCellProps), React__default.createElement(TableCellWrapper, null, React__default.createElement(TableCellTopContents, {
|
|
401
446
|
style: {
|
|
402
447
|
justifyContent: isParentHeader ? 'center' : undefined
|
|
403
448
|
}
|
|
404
449
|
}, React__default.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React__default.createElement(material.TableSortLabel, {
|
|
405
450
|
"aria-label": column.isSorted ? column.sortDescFirst ? localization == null ? void 0 : localization.columnActionMenuItemClearSort : localization == null ? void 0 : localization.columnActionMenuItemSortDesc : localization == null ? void 0 : localization.columnActionMenuItemSortAsc,
|
|
406
451
|
active: column.isSorted,
|
|
407
|
-
direction: column.isSortedDesc ? 'desc' : 'asc'
|
|
408
|
-
style: {
|
|
409
|
-
margin: 0
|
|
410
|
-
}
|
|
452
|
+
direction: column.isSortedDesc ? 'desc' : 'asc'
|
|
411
453
|
})), React__default.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
|
|
412
454
|
column: column
|
|
413
455
|
}), enableColumnResizing && !isParentHeader && React__default.createElement(Divider, Object.assign({
|
|
@@ -418,34 +460,40 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
|
|
|
418
460
|
}
|
|
419
461
|
}, column.getResizerProps())))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
|
|
420
462
|
"in": showFilters
|
|
421
|
-
}, React__default.createElement(
|
|
463
|
+
}, React__default.createElement(MRT_FilterTextField, {
|
|
422
464
|
column: column
|
|
423
465
|
}))));
|
|
424
466
|
};
|
|
425
467
|
|
|
426
|
-
var
|
|
468
|
+
var MRT_TableButtonCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
427
469
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
428
470
|
return prop !== 'densePadding';
|
|
429
471
|
}
|
|
430
472
|
})(function (_ref) {
|
|
431
473
|
var densePadding = _ref.densePadding;
|
|
432
474
|
return {
|
|
433
|
-
padding: densePadding ? '
|
|
475
|
+
padding: densePadding ? '1px' : '0.6rem',
|
|
476
|
+
textAlign: 'center',
|
|
434
477
|
transition: 'all 0.2s ease-in-out'
|
|
435
478
|
};
|
|
436
479
|
});
|
|
480
|
+
|
|
437
481
|
var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
|
|
482
|
+
var _localization$selectA;
|
|
483
|
+
|
|
438
484
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
439
485
|
tableInstance = _useMaterialReactTabl.tableInstance,
|
|
440
486
|
disableSelectAll = _useMaterialReactTabl.disableSelectAll,
|
|
441
487
|
densePadding = _useMaterialReactTabl.densePadding,
|
|
442
488
|
localization = _useMaterialReactTabl.localization;
|
|
443
489
|
|
|
444
|
-
return React__default.createElement(
|
|
490
|
+
return React__default.createElement(MRT_TableButtonCell, {
|
|
445
491
|
densePadding: densePadding,
|
|
446
492
|
variant: "head"
|
|
447
493
|
}, !disableSelectAll ? React__default.createElement(material.Checkbox, Object.assign({
|
|
448
|
-
|
|
494
|
+
inputProps: {
|
|
495
|
+
'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
|
|
496
|
+
}
|
|
449
497
|
}, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
|
|
450
498
|
};
|
|
451
499
|
|
|
@@ -465,18 +513,12 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
|
465
513
|
tableInstance = _useMaterialReactTabl.tableInstance,
|
|
466
514
|
localization = _useMaterialReactTabl.localization,
|
|
467
515
|
anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
|
|
468
|
-
densePadding = _useMaterialReactTabl.densePadding
|
|
469
|
-
renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
|
|
516
|
+
densePadding = _useMaterialReactTabl.densePadding;
|
|
470
517
|
|
|
471
|
-
return React__default.createElement(
|
|
472
|
-
size: "small"
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
padding: densePadding ? '0' : '0.5rem 0.5rem',
|
|
476
|
-
transition: 'all 0.2s ease-in-out',
|
|
477
|
-
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
|
|
478
|
-
}
|
|
479
|
-
}), React__default.createElement(material.IconButton, {
|
|
518
|
+
return React__default.createElement(MRT_TableButtonCell, Object.assign({
|
|
519
|
+
size: "small",
|
|
520
|
+
densePadding: densePadding
|
|
521
|
+
}, tableInstance.getToggleAllRowsExpandedProps()), React__default.createElement(material.IconButton, {
|
|
480
522
|
"aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
|
|
481
523
|
title: localization == null ? void 0 : localization.expandAllButtonTitle
|
|
482
524
|
}, React__default.createElement(ArrowRightIcon, {
|
|
@@ -534,7 +576,11 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
534
576
|
style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
|
|
535
577
|
});
|
|
536
578
|
|
|
537
|
-
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(StyledTableHeadCell,
|
|
579
|
+
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(StyledTableHeadCell, {
|
|
580
|
+
style: {
|
|
581
|
+
textAlign: 'center'
|
|
582
|
+
}
|
|
583
|
+
}, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
|
|
538
584
|
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
|
|
539
585
|
}) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectAllCheckbox, null) : React__default.createElement(MRT_TableSpacerCell, {
|
|
540
586
|
width: "1rem"
|
|
@@ -562,51 +608,52 @@ var MRT_TableHead = function MRT_TableHead() {
|
|
|
562
608
|
}));
|
|
563
609
|
};
|
|
564
610
|
|
|
565
|
-
var
|
|
566
|
-
var _cell$column$muiTable
|
|
611
|
+
var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
612
|
+
var _cell$column$muiTable;
|
|
567
613
|
|
|
568
614
|
var cell = _ref.cell;
|
|
569
615
|
|
|
570
616
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
571
|
-
localization = _useMaterialReactTabl.localization,
|
|
572
617
|
currentEditingRow = _useMaterialReactTabl.currentEditingRow,
|
|
573
|
-
|
|
574
|
-
muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps
|
|
618
|
+
localization = _useMaterialReactTabl.localization,
|
|
619
|
+
muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps,
|
|
620
|
+
setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow;
|
|
575
621
|
|
|
576
622
|
var handleChange = function handleChange(event) {
|
|
577
623
|
if (currentEditingRow) {
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
setCurrentEditingRow(_extends({}, currentEditingRow, {
|
|
581
|
-
values: _extends({}, cell.row.values, (_extends2 = {}, _extends2[cell.column.id] = event.target.value, _extends2))
|
|
582
|
-
}));
|
|
624
|
+
cell.row.values[cell.column.id] = event.target.value;
|
|
625
|
+
setCurrentEditingRow(_extends({}, currentEditingRow));
|
|
583
626
|
}
|
|
627
|
+
|
|
628
|
+
cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
|
|
584
629
|
};
|
|
585
630
|
|
|
586
|
-
var
|
|
631
|
+
var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
|
|
632
|
+
var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
|
|
633
|
+
|
|
634
|
+
var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
|
|
587
635
|
style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
|
|
588
636
|
});
|
|
589
637
|
|
|
590
638
|
if (cell.column.editable && cell.column.Edit) {
|
|
591
639
|
return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
|
|
592
|
-
cell: cell
|
|
593
|
-
onChange: handleChange
|
|
640
|
+
cell: cell
|
|
594
641
|
})));
|
|
595
642
|
}
|
|
596
643
|
|
|
597
644
|
return React__default.createElement(material.TextField, Object.assign({
|
|
598
645
|
margin: "dense",
|
|
599
|
-
placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
|
|
600
646
|
onChange: handleChange,
|
|
601
647
|
onClick: function onClick(e) {
|
|
602
648
|
return e.stopPropagation();
|
|
603
649
|
},
|
|
604
|
-
|
|
650
|
+
placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
|
|
651
|
+
value: cell.value,
|
|
605
652
|
variant: "standard"
|
|
606
653
|
}, textFieldProps));
|
|
607
654
|
};
|
|
608
655
|
|
|
609
|
-
var TableCell
|
|
656
|
+
var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
610
657
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
611
658
|
return prop !== 'densePadding';
|
|
612
659
|
}
|
|
@@ -614,7 +661,8 @@ var TableCell$1 = /*#__PURE__*/material.styled(material.TableCell, {
|
|
|
614
661
|
var densePadding = _ref.densePadding;
|
|
615
662
|
return {
|
|
616
663
|
padding: densePadding ? '0.5rem' : '1rem',
|
|
617
|
-
transition: 'all 0.2s ease-in-out'
|
|
664
|
+
transition: 'all 0.2s ease-in-out',
|
|
665
|
+
whiteSpace: densePadding ? 'nowrap' : 'normal'
|
|
618
666
|
};
|
|
619
667
|
});
|
|
620
668
|
var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
|
|
@@ -635,17 +683,17 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
|
|
|
635
683
|
style: _extends({}, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {}, (_mcTableCellBodyProps = mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style) != null ? _mcTableCellBodyProps : {})
|
|
636
684
|
});
|
|
637
685
|
|
|
638
|
-
return React__default.createElement(TableCell
|
|
686
|
+
return React__default.createElement(TableCell, Object.assign({
|
|
639
687
|
densePadding: densePadding,
|
|
640
688
|
onClick: function onClick(event) {
|
|
641
689
|
return onCellClick == null ? void 0 : onCellClick(event, cell);
|
|
642
690
|
}
|
|
643
|
-
}, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(
|
|
691
|
+
}, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
|
|
644
692
|
cell: cell
|
|
645
693
|
}) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
|
|
646
694
|
};
|
|
647
695
|
|
|
648
|
-
var TableCell$
|
|
696
|
+
var TableCell$1 = /*#__PURE__*/material.styled(material.TableCell, {
|
|
649
697
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
650
698
|
return prop !== 'isExpanded';
|
|
651
699
|
}
|
|
@@ -684,7 +732,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
|
|
|
684
732
|
|
|
685
733
|
return React__default.createElement(material.TableRow, Object.assign({
|
|
686
734
|
hover: true
|
|
687
|
-
}, tableRowProps), React__default.createElement(TableCell$
|
|
735
|
+
}, tableRowProps), React__default.createElement(TableCell$1, Object.assign({
|
|
688
736
|
colSpan: tableInstance.visibleColumns.length + 10,
|
|
689
737
|
isExpanded: row.isExpanded,
|
|
690
738
|
onClick: function onClick(event) {
|
|
@@ -695,17 +743,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
|
|
|
695
743
|
}, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
|
|
696
744
|
};
|
|
697
745
|
|
|
698
|
-
var TableCell$
|
|
746
|
+
var TableCell$2 = /*#__PURE__*/material.styled(MRT_TableButtonCell, {
|
|
699
747
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
700
|
-
return prop !== '
|
|
748
|
+
return prop !== 'depth';
|
|
701
749
|
}
|
|
702
750
|
})(function (_ref) {
|
|
703
|
-
var
|
|
704
|
-
depth = _ref.depth;
|
|
751
|
+
var depth = _ref.depth;
|
|
705
752
|
return {
|
|
706
|
-
padding: densePadding ? '0' : '0.6rem',
|
|
707
753
|
paddingLeft: depth + 0.5 + "rem",
|
|
708
|
-
|
|
754
|
+
textAlign: 'left'
|
|
709
755
|
};
|
|
710
756
|
});
|
|
711
757
|
var ExpandMoreIcon = /*#__PURE__*/material.styled(MuiExpandMoreIcon, {
|
|
@@ -727,7 +773,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
|
|
|
727
773
|
densePadding = _useMaterialReactTabl.densePadding,
|
|
728
774
|
renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
|
|
729
775
|
|
|
730
|
-
return React__default.createElement(TableCell$
|
|
776
|
+
return React__default.createElement(TableCell$2, {
|
|
731
777
|
size: "small",
|
|
732
778
|
densePadding: densePadding,
|
|
733
779
|
depth: row.depth
|
|
@@ -741,24 +787,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
|
|
|
741
787
|
})));
|
|
742
788
|
};
|
|
743
789
|
|
|
744
|
-
var
|
|
745
|
-
|
|
746
|
-
return prop !== 'densePadding';
|
|
747
|
-
}
|
|
748
|
-
})(function (_ref) {
|
|
749
|
-
var densePadding = _ref.densePadding;
|
|
750
|
-
return {
|
|
751
|
-
padding: densePadding ? '0' : '0.6rem',
|
|
752
|
-
transition: 'all 0.2s ease-in-out'
|
|
753
|
-
};
|
|
754
|
-
});
|
|
755
|
-
var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
|
|
756
|
-
var row = _ref2.row;
|
|
790
|
+
var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
791
|
+
var row = _ref.row;
|
|
757
792
|
|
|
758
793
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
759
794
|
tableInstance = _useMaterialReactTabl.tableInstance,
|
|
760
795
|
onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
|
|
761
|
-
densePadding = _useMaterialReactTabl.densePadding
|
|
796
|
+
densePadding = _useMaterialReactTabl.densePadding,
|
|
797
|
+
localization = _useMaterialReactTabl.localization;
|
|
762
798
|
|
|
763
799
|
var onSelectChange = function onSelectChange(event) {
|
|
764
800
|
var _row$getToggleRowSele;
|
|
@@ -767,11 +803,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
|
|
|
767
803
|
onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
|
|
768
804
|
};
|
|
769
805
|
|
|
770
|
-
return React__default.createElement(
|
|
806
|
+
return React__default.createElement(MRT_TableButtonCell, {
|
|
771
807
|
densePadding: densePadding
|
|
772
|
-
}, React__default.createElement(material.Checkbox, Object.assign({
|
|
808
|
+
}, React__default.createElement(material.Checkbox, Object.assign({
|
|
809
|
+
inputProps: {
|
|
810
|
+
'aria-label': localization == null ? void 0 : localization.selectCheckboxTitle
|
|
811
|
+
},
|
|
773
812
|
onChange: onSelectChange
|
|
774
|
-
})));
|
|
813
|
+
}, row.getToggleRowSelectedProps())));
|
|
775
814
|
};
|
|
776
815
|
|
|
777
816
|
var MenuItem$1 = /*#__PURE__*/material.styled(material.MenuItem)({
|
|
@@ -783,20 +822,15 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
|
783
822
|
|
|
784
823
|
var anchorEl = _ref.anchorEl,
|
|
785
824
|
row = _ref.row,
|
|
825
|
+
handleEdit = _ref.handleEdit,
|
|
786
826
|
setAnchorEl = _ref.setAnchorEl;
|
|
787
827
|
|
|
788
828
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
789
829
|
enableRowEditing = _useMaterialReactTabl.enableRowEditing,
|
|
790
830
|
localization = _useMaterialReactTabl.localization,
|
|
791
831
|
renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
|
|
792
|
-
setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
|
|
793
832
|
tableInstance = _useMaterialReactTabl.tableInstance;
|
|
794
833
|
|
|
795
|
-
var handleEdit = function handleEdit() {
|
|
796
|
-
setCurrentEditingRow(_extends({}, row));
|
|
797
|
-
setAnchorEl(null);
|
|
798
|
-
};
|
|
799
|
-
|
|
800
834
|
return React__default.createElement(material.Menu, {
|
|
801
835
|
anchorEl: anchorEl,
|
|
802
836
|
open: !!anchorEl,
|
|
@@ -1586,6 +1620,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
|
|
|
1586
1620
|
currentEditingRow = _useMaterialReactTabl.currentEditingRow;
|
|
1587
1621
|
|
|
1588
1622
|
var handleCancel = function handleCancel() {
|
|
1623
|
+
row.values = row.original;
|
|
1589
1624
|
setCurrentEditingRow(null);
|
|
1590
1625
|
};
|
|
1591
1626
|
|
|
@@ -1641,11 +1676,17 @@ var IconButton$1 = /*#__PURE__*/material.styled(material.IconButton)({
|
|
|
1641
1676
|
}
|
|
1642
1677
|
});
|
|
1643
1678
|
var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
|
|
1679
|
+
var _localization$rowActi;
|
|
1680
|
+
|
|
1644
1681
|
var row = _ref.row;
|
|
1645
1682
|
|
|
1646
1683
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
1647
|
-
localization = _useMaterialReactTabl.localization,
|
|
1648
1684
|
currentEditingRow = _useMaterialReactTabl.currentEditingRow,
|
|
1685
|
+
densePadding = _useMaterialReactTabl.densePadding,
|
|
1686
|
+
localization = _useMaterialReactTabl.localization,
|
|
1687
|
+
renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
|
|
1688
|
+
enableRowEditing = _useMaterialReactTabl.enableRowEditing,
|
|
1689
|
+
setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
|
|
1649
1690
|
renderRowActions = _useMaterialReactTabl.renderRowActions,
|
|
1650
1691
|
tableInstance = _useMaterialReactTabl.tableInstance;
|
|
1651
1692
|
|
|
@@ -1659,26 +1700,32 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
|
|
|
1659
1700
|
setAnchorEl(event.currentTarget);
|
|
1660
1701
|
};
|
|
1661
1702
|
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
if (row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id)) {
|
|
1667
|
-
return React__default.createElement(MRT_EditActionButtons, {
|
|
1668
|
-
row: row
|
|
1669
|
-
});
|
|
1670
|
-
}
|
|
1703
|
+
var handleEdit = function handleEdit() {
|
|
1704
|
+
setCurrentEditingRow(_extends({}, row));
|
|
1705
|
+
setAnchorEl(null);
|
|
1706
|
+
};
|
|
1671
1707
|
|
|
1672
|
-
return React__default.createElement(
|
|
1708
|
+
return React__default.createElement(MRT_TableButtonCell, {
|
|
1709
|
+
densePadding: densePadding
|
|
1710
|
+
}, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
|
|
1711
|
+
row: row
|
|
1712
|
+
}) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
|
|
1713
|
+
placement: "right",
|
|
1714
|
+
arrow: true,
|
|
1715
|
+
title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionMenuItemEdit) != null ? _localization$rowActi : ''
|
|
1716
|
+
}, React__default.createElement(IconButton$1, {
|
|
1717
|
+
onClick: handleEdit
|
|
1718
|
+
}, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton$1, {
|
|
1673
1719
|
"aria-label": localization == null ? void 0 : localization.rowActionMenuButtonTitle,
|
|
1674
1720
|
title: localization == null ? void 0 : localization.rowActionMenuButtonTitle,
|
|
1675
1721
|
onClick: handleOpenRowActionMenu,
|
|
1676
1722
|
size: "small"
|
|
1677
1723
|
}, React__default.createElement(MoreHorizIcon, null)), React__default.createElement(MRT_RowActionMenu, {
|
|
1678
1724
|
anchorEl: anchorEl,
|
|
1725
|
+
handleEdit: handleEdit,
|
|
1679
1726
|
row: row,
|
|
1680
1727
|
setAnchorEl: setAnchorEl
|
|
1681
|
-
}));
|
|
1728
|
+
})) : null);
|
|
1682
1729
|
};
|
|
1683
1730
|
|
|
1684
1731
|
var TableRow = /*#__PURE__*/material.styled(material.TableRow, {
|
|
@@ -1718,9 +1765,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
|
|
|
1718
1765
|
onClick: function onClick(event) {
|
|
1719
1766
|
return onRowClick == null ? void 0 : onRowClick(event, row);
|
|
1720
1767
|
}
|
|
1721
|
-
}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(
|
|
1768
|
+
}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
|
1722
1769
|
row: row
|
|
1723
|
-
})
|
|
1770
|
+
}), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
|
|
1724
1771
|
row: row
|
|
1725
1772
|
}), enableSelection && React__default.createElement(MRT_SelectCheckbox, {
|
|
1726
1773
|
row: row
|
|
@@ -1729,9 +1776,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
|
|
|
1729
1776
|
key: cell.getCellProps().key,
|
|
1730
1777
|
cell: cell
|
|
1731
1778
|
});
|
|
1732
|
-
}), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(
|
|
1779
|
+
}), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
|
1733
1780
|
row: row
|
|
1734
|
-
}))
|
|
1781
|
+
})), renderDetailPanel && React__default.createElement(MRT_TableDetailPanel, {
|
|
1735
1782
|
row: row
|
|
1736
1783
|
}));
|
|
1737
1784
|
};
|
|
@@ -1762,7 +1809,7 @@ var MRT_TableBody = function MRT_TableBody() {
|
|
|
1762
1809
|
}));
|
|
1763
1810
|
};
|
|
1764
1811
|
|
|
1765
|
-
var TableCell$
|
|
1812
|
+
var TableCell$3 = /*#__PURE__*/material.styled(material.TableCell, {
|
|
1766
1813
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1767
1814
|
return prop !== 'densePadding' && prop !== 'enableColumnResizing';
|
|
1768
1815
|
}
|
|
@@ -1794,7 +1841,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
|
|
|
1794
1841
|
style: _extends({}, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {}, (_mcTableFooterCellPro = mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style) != null ? _mcTableFooterCellPro : {})
|
|
1795
1842
|
});
|
|
1796
1843
|
|
|
1797
|
-
return React__default.createElement(TableCell$
|
|
1844
|
+
return React__default.createElement(TableCell$3, Object.assign({
|
|
1798
1845
|
align: isParentHeader ? 'center' : 'left',
|
|
1799
1846
|
densePadding: densePadding,
|
|
1800
1847
|
enableColumnResizing: enableColumnResizing,
|
|
@@ -1873,10 +1920,11 @@ var TextField = /*#__PURE__*/material.styled(material.TextField)({
|
|
|
1873
1920
|
});
|
|
1874
1921
|
var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
1875
1922
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
1876
|
-
|
|
1877
|
-
muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
|
|
1923
|
+
showSearch = _useMaterialReactTabl.showSearch,
|
|
1878
1924
|
localization = _useMaterialReactTabl.localization,
|
|
1879
|
-
|
|
1925
|
+
muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
|
|
1926
|
+
onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange,
|
|
1927
|
+
tableInstance = _useMaterialReactTabl.tableInstance;
|
|
1880
1928
|
|
|
1881
1929
|
var _useState = React.useState(''),
|
|
1882
1930
|
searchValue = _useState[0],
|
|
@@ -1894,7 +1942,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1894
1942
|
tableInstance.setGlobalFilter(undefined);
|
|
1895
1943
|
};
|
|
1896
1944
|
|
|
1897
|
-
return React__default.createElement(
|
|
1945
|
+
return React__default.createElement(material.Collapse, {
|
|
1946
|
+
"in": showSearch,
|
|
1947
|
+
orientation: "horizontal"
|
|
1948
|
+
}, React__default.createElement(TextField, Object.assign({
|
|
1949
|
+
id: "global-search-text-field",
|
|
1898
1950
|
placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
|
|
1899
1951
|
onChange: function onChange(event) {
|
|
1900
1952
|
setSearchValue(event.target.value);
|
|
@@ -1920,7 +1972,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1920
1972
|
fontSize: "small"
|
|
1921
1973
|
})))
|
|
1922
1974
|
}
|
|
1923
|
-
}, muiSearchTextFieldProps));
|
|
1975
|
+
}, muiSearchTextFieldProps)));
|
|
1924
1976
|
};
|
|
1925
1977
|
|
|
1926
1978
|
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
|
|
@@ -2008,7 +2060,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
|
|
|
2008
2060
|
};
|
|
2009
2061
|
|
|
2010
2062
|
var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
|
|
2011
|
-
var _localization$toggleD;
|
|
2063
|
+
var _localization$toggleD, _localization$toggleD2;
|
|
2012
2064
|
|
|
2013
2065
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
2014
2066
|
densePadding = _useMaterialReactTabl.densePadding,
|
|
@@ -2019,6 +2071,9 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
|
|
|
2019
2071
|
arrow: true,
|
|
2020
2072
|
title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
|
|
2021
2073
|
}, React__default.createElement(material.Switch, {
|
|
2074
|
+
inputProps: {
|
|
2075
|
+
'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
|
|
2076
|
+
},
|
|
2022
2077
|
color: "default",
|
|
2023
2078
|
checked: densePadding,
|
|
2024
2079
|
size: "small",
|
|
@@ -2028,6 +2083,33 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
|
|
|
2028
2083
|
}));
|
|
2029
2084
|
};
|
|
2030
2085
|
|
|
2086
|
+
var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
|
|
2087
|
+
var _localization$toggleS;
|
|
2088
|
+
|
|
2089
|
+
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
2090
|
+
localization = _useMaterialReactTabl.localization,
|
|
2091
|
+
setShowSearch = _useMaterialReactTabl.setShowSearch,
|
|
2092
|
+
showSearch = _useMaterialReactTabl.showSearch,
|
|
2093
|
+
muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps;
|
|
2094
|
+
|
|
2095
|
+
var handleToggleSearch = function handleToggleSearch() {
|
|
2096
|
+
setShowSearch(!showSearch);
|
|
2097
|
+
setTimeout(function () {
|
|
2098
|
+
var _document$getElementB, _muiSearchTextFieldPr;
|
|
2099
|
+
|
|
2100
|
+
return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
|
|
2101
|
+
}, 200);
|
|
2102
|
+
};
|
|
2103
|
+
|
|
2104
|
+
return React__default.createElement(material.Tooltip, {
|
|
2105
|
+
arrow: true,
|
|
2106
|
+
title: (_localization$toggleS = localization == null ? void 0 : localization.toggleSearchButtonTitle) != null ? _localization$toggleS : ''
|
|
2107
|
+
}, React__default.createElement(material.IconButton, {
|
|
2108
|
+
size: "small",
|
|
2109
|
+
onClick: handleToggleSearch
|
|
2110
|
+
}, showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
|
|
2111
|
+
};
|
|
2112
|
+
|
|
2031
2113
|
var ToolbarButtonsContainer = /*#__PURE__*/material.styled('div')({
|
|
2032
2114
|
display: 'flex',
|
|
2033
2115
|
gap: '0.5rem',
|
|
@@ -2037,9 +2119,10 @@ var MRT_ToolbarButtons = function MRT_ToolbarButtons() {
|
|
|
2037
2119
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
2038
2120
|
disableFilters = _useMaterialReactTabl.disableFilters,
|
|
2039
2121
|
disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
|
|
2040
|
-
disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle
|
|
2122
|
+
disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle,
|
|
2123
|
+
disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter;
|
|
2041
2124
|
|
|
2042
|
-
return React__default.createElement(ToolbarButtonsContainer, null, !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null));
|
|
2125
|
+
return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null));
|
|
2043
2126
|
};
|
|
2044
2127
|
|
|
2045
2128
|
var MRT_TablePagination = function MRT_TablePagination() {
|
|
@@ -2064,12 +2147,16 @@ var MRT_TablePagination = function MRT_TablePagination() {
|
|
|
2064
2147
|
page: tableInstance.state.pageIndex,
|
|
2065
2148
|
rowsPerPage: tableInstance.state.pageSize,
|
|
2066
2149
|
showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
|
|
2067
|
-
showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
|
|
2150
|
+
showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
|
|
2151
|
+
style: {
|
|
2152
|
+
padding: 0
|
|
2153
|
+
}
|
|
2068
2154
|
}, tablePaginationProps));
|
|
2069
2155
|
};
|
|
2070
2156
|
|
|
2071
2157
|
var Toolbar = /*#__PURE__*/material.styled(material.Toolbar)({
|
|
2072
|
-
display: 'grid'
|
|
2158
|
+
display: 'grid',
|
|
2159
|
+
padding: '0.5rem !important'
|
|
2073
2160
|
});
|
|
2074
2161
|
var ToolbarTopRow = /*#__PURE__*/material.styled('div')({
|
|
2075
2162
|
padding: '0.5rem',
|
|
@@ -2081,27 +2168,25 @@ var ToolbarActionsContainer = /*#__PURE__*/material.styled('div')({
|
|
|
2081
2168
|
gap: '0.5rem'
|
|
2082
2169
|
});
|
|
2083
2170
|
var MRT_ToolbarTop = function MRT_ToolbarTop() {
|
|
2171
|
+
var _renderToolbarActions;
|
|
2172
|
+
|
|
2084
2173
|
var _useMaterialReactTabl = useMaterialReactTable(),
|
|
2085
2174
|
disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
|
|
2086
2175
|
hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
|
|
2087
2176
|
manualPagination = _useMaterialReactTabl.manualPagination,
|
|
2088
|
-
muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
|
|
2089
2177
|
muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
|
|
2090
2178
|
positionPagination = _useMaterialReactTabl.positionPagination,
|
|
2091
2179
|
positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
|
|
2092
|
-
|
|
2093
|
-
|
|
2180
|
+
renderToolbarActions = _useMaterialReactTabl.renderToolbarActions,
|
|
2181
|
+
tableInstance = _useMaterialReactTabl.tableInstance;
|
|
2094
2182
|
|
|
2095
2183
|
var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
|
|
2096
2184
|
return React__default.createElement(Toolbar, Object.assign({
|
|
2097
2185
|
variant: "dense"
|
|
2098
|
-
}, toolbarProps), React__default.createElement(ToolbarTopRow, null,
|
|
2099
|
-
variant: "h5"
|
|
2100
|
-
}, muiTableTitleProps), title) : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
|
|
2186
|
+
}, toolbarProps), React__default.createElement(ToolbarTopRow, null, (_renderToolbarActions = renderToolbarActions == null ? void 0 : renderToolbarActions(tableInstance)) != null ? _renderToolbarActions : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
|
|
2101
2187
|
};
|
|
2102
2188
|
|
|
2103
2189
|
var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)({
|
|
2104
|
-
padding: 0,
|
|
2105
2190
|
display: 'flex',
|
|
2106
2191
|
justifyContent: 'space-between'
|
|
2107
2192
|
});
|
|
@@ -2116,6 +2201,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
|
|
|
2116
2201
|
|
|
2117
2202
|
var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
|
|
2118
2203
|
return React__default.createElement(Toolbar$1, Object.assign({
|
|
2204
|
+
style: {
|
|
2205
|
+
padding: 0
|
|
2206
|
+
},
|
|
2119
2207
|
variant: "dense"
|
|
2120
2208
|
}, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarButtons, null) : React__default.createElement("span", null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
|
|
2121
2209
|
};
|
|
@@ -2153,26 +2241,28 @@ var defaultLocalization = {
|
|
|
2153
2241
|
actionsHeadColumnTitle: 'Actions',
|
|
2154
2242
|
columnActionMenuButtonTitle: 'Column Actions',
|
|
2155
2243
|
columnActionMenuItemClearSort: 'Clear sorting',
|
|
2156
|
-
columnActionMenuItemGroupBy: 'Group by column',
|
|
2157
|
-
columnActionMenuItemHideColumn: 'Hide column',
|
|
2158
|
-
columnActionMenuItemSortAsc: 'Sort ascending',
|
|
2159
|
-
columnActionMenuItemSortDesc: 'Sort descending',
|
|
2160
|
-
columnActionMenuItemUnGroupBy: 'Ungroup column',
|
|
2244
|
+
columnActionMenuItemGroupBy: 'Group by {column}',
|
|
2245
|
+
columnActionMenuItemHideColumn: 'Hide {column} column',
|
|
2246
|
+
columnActionMenuItemSortAsc: 'Sort by {column} ascending',
|
|
2247
|
+
columnActionMenuItemSortDesc: 'Sort by {column} descending',
|
|
2248
|
+
columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
|
|
2161
2249
|
expandAllButtonTitle: 'Expand all',
|
|
2162
2250
|
expandButtonTitle: 'Expand',
|
|
2163
2251
|
filterTextFieldClearButtonTitle: 'Clear filter',
|
|
2164
|
-
filterTextFieldPlaceholder: 'Filter',
|
|
2252
|
+
filterTextFieldPlaceholder: 'Filter by {column}',
|
|
2165
2253
|
rowActionButtonCancel: 'Cancel',
|
|
2166
2254
|
rowActionButtonSave: 'Save',
|
|
2167
2255
|
rowActionMenuButtonTitle: 'Row Actions',
|
|
2168
2256
|
rowActionMenuItemEdit: 'Edit',
|
|
2257
|
+
selectCheckboxTitle: 'Select row',
|
|
2169
2258
|
rowActionsColumnTitle: 'Actions',
|
|
2170
2259
|
searchTextFieldClearButtonTitle: 'Clear search',
|
|
2171
2260
|
searchTextFieldPlaceholder: 'Search',
|
|
2172
2261
|
selectAllCheckboxTitle: 'Select all',
|
|
2173
2262
|
showHideColumnsButtonTitle: 'Show/Hide columns',
|
|
2174
2263
|
toggleDensePaddingSwitchTitle: 'Toggle dense padding',
|
|
2175
|
-
toggleFilterButtonTitle: 'Toggle filters'
|
|
2264
|
+
toggleFilterButtonTitle: 'Toggle filters',
|
|
2265
|
+
toggleSearchButtonTitle: 'Toggle search'
|
|
2176
2266
|
};
|
|
2177
2267
|
|
|
2178
2268
|
var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];
|