@insticc/react-datagrid-2 1.0.14 → 1.0.16
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/build/index.js +4 -564
- package/build/wrapper/ActionButton.js +201 -0
- package/build/wrapper/ColumnFilter.js +105 -0
- package/build/wrapper/ExportActions.js +368 -0
- package/build/wrapper/index.js +567 -0
- package/build/wrapper/styles/styles.css +15 -0
- package/build/wrapper/utils/filters.js +63 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -1,567 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _propTypes = _interopRequireWildcard(require("prop-types"));
|
|
10
|
-
var _materialReactTable = require("material-react-table");
|
|
11
|
-
var _semanticUiReact = require("semantic-ui-react");
|
|
12
|
-
var _material = require("@mui/material");
|
|
13
|
-
var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
|
|
14
|
-
var _ExportActions = _interopRequireDefault(require("./ExportActions"));
|
|
15
|
-
var _ActionButton = _interopRequireDefault(require("./ActionButton"));
|
|
16
|
-
var _filters = require("./utils/filters");
|
|
17
|
-
require("./styles/styles.css");
|
|
3
|
+
var _index = _interopRequireDefault(require("./wrapper/index.js"));
|
|
18
4
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
24
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
25
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
26
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
27
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
28
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
29
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
30
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
31
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
32
|
-
var DataGrid = function DataGrid(_ref) {
|
|
33
|
-
var columns = _ref.columns,
|
|
34
|
-
createRows = _ref.createRows,
|
|
35
|
-
actions = _ref.actions,
|
|
36
|
-
_ref$hasExcelExport = _ref.hasExcelExport,
|
|
37
|
-
hasExcelExport = _ref$hasExcelExport === void 0 ? false : _ref$hasExcelExport,
|
|
38
|
-
_ref$excelOption = _ref.excelOption,
|
|
39
|
-
excelOption = _ref$excelOption === void 0 ? 'selectedRows' : _ref$excelOption,
|
|
40
|
-
_ref$hasPdfExport = _ref.hasPdfExport,
|
|
41
|
-
hasPdfExport = _ref$hasPdfExport === void 0 ? false : _ref$hasPdfExport,
|
|
42
|
-
_ref$pdfOption = _ref.pdfOption,
|
|
43
|
-
pdfOption = _ref$pdfOption === void 0 ? 'selectedRows' : _ref$pdfOption,
|
|
44
|
-
_ref$rowHeight = _ref.rowHeight,
|
|
45
|
-
rowHeight = _ref$rowHeight === void 0 ? 75 : _ref$rowHeight,
|
|
46
|
-
_ref$hasGlobalFilter = _ref.hasGlobalFilter,
|
|
47
|
-
hasGlobalFilter = _ref$hasGlobalFilter === void 0 ? true : _ref$hasGlobalFilter,
|
|
48
|
-
_ref$globalFilterFn = _ref.globalFilterFn,
|
|
49
|
-
globalFilterFn = _ref$globalFilterFn === void 0 ? 'contains' : _ref$globalFilterFn,
|
|
50
|
-
_ref$disableSelect = _ref.disableSelect,
|
|
51
|
-
disableSelect = _ref$disableSelect === void 0 ? false : _ref$disableSelect,
|
|
52
|
-
_ref$enableColumnFilt = _ref.enableColumnFilterModes,
|
|
53
|
-
enableColumnFilterModes = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
|
|
54
|
-
_ref$pagination = _ref.pagination,
|
|
55
|
-
pagination = _ref$pagination === void 0 ? 'both' : _ref$pagination,
|
|
56
|
-
_ref$itemsPerPage = _ref.itemsPerPage,
|
|
57
|
-
itemsPerPage = _ref$itemsPerPage === void 0 ? [10, 15, 20, 25] : _ref$itemsPerPage,
|
|
58
|
-
_ref$selectedIds = _ref.selectedIds,
|
|
59
|
-
selectedIds = _ref$selectedIds === void 0 ? [] : _ref$selectedIds,
|
|
60
|
-
selectData = _ref.selectData,
|
|
61
|
-
rowKey = _ref.rowKey,
|
|
62
|
-
_ref$pageSize = _ref.pageSize,
|
|
63
|
-
pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
|
|
64
|
-
_ref$enableMultiRowSe = _ref.enableMultiRowSelection,
|
|
65
|
-
enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
|
|
66
|
-
_ref$enableFullScreen = _ref.enableFullScreenToggle,
|
|
67
|
-
enableFullScreenToggle = _ref$enableFullScreen === void 0 ? false : _ref$enableFullScreen,
|
|
68
|
-
_ref$enableDensityTog = _ref.enableDensityToggle,
|
|
69
|
-
enableDensityToggle = _ref$enableDensityTog === void 0 ? false : _ref$enableDensityTog,
|
|
70
|
-
_ref$enableGlobalFilt = _ref.enableGlobalFilter,
|
|
71
|
-
enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? false : _ref$enableGlobalFilt,
|
|
72
|
-
_ref$hasSubRows = _ref.hasSubRows,
|
|
73
|
-
hasSubRows = _ref$hasSubRows === void 0 ? false : _ref$hasSubRows,
|
|
74
|
-
_ref$enableExpanding = _ref.enableExpanding,
|
|
75
|
-
enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
|
|
76
|
-
_ref$enablePagination = _ref.enablePagination,
|
|
77
|
-
enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
|
|
78
|
-
_ref$enableVirtualiza = _ref.enableVirtualization,
|
|
79
|
-
enableVirtualization = _ref$enableVirtualiza === void 0 ? false : _ref$enableVirtualiza;
|
|
80
|
-
var _useState = (0, _react.useState)(selectedIds.reduce(function (a, v) {
|
|
81
|
-
return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, v, true));
|
|
82
|
-
}, {})),
|
|
83
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
84
|
-
rowSelection = _useState2[0],
|
|
85
|
-
setRowSelection = _useState2[1];
|
|
86
|
-
var _useState3 = (0, _react.useState)(true),
|
|
87
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
88
|
-
isLoading = _useState4[0],
|
|
89
|
-
setIsLoading = _useState4[1];
|
|
90
|
-
var _useState5 = (0, _react.useState)([]),
|
|
91
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
92
|
-
sorting = _useState6[0],
|
|
93
|
-
setSorting = _useState6[1];
|
|
94
|
-
//optionally access the underlying virtualizer instance
|
|
95
|
-
var rowVirtualizerInstanceRef = (0, _react.useRef)(null);
|
|
96
|
-
|
|
97
|
-
// get the selected rows (if is a int that means that the row is selected if is a double that means that is a subrow)
|
|
98
|
-
// so if is a subrow we need to go to the parent row and get the id that is on the position after the .
|
|
99
|
-
// 308.1 this is a subrow so we need to get the 308 row and get the id of the subrow that is in the position 1 of the array
|
|
100
|
-
var getSelectedRows = function getSelectedRows(rows) {
|
|
101
|
-
var data = createRows;
|
|
102
|
-
return Object.keys(rows).filter(function (key) {
|
|
103
|
-
return rows[key];
|
|
104
|
-
}).map(function (key) {
|
|
105
|
-
if (key.toString().includes('.')) {
|
|
106
|
-
// This is a subrow
|
|
107
|
-
var _key$split = key.split('.'),
|
|
108
|
-
_key$split2 = _slicedToArray(_key$split, 2),
|
|
109
|
-
parentId = _key$split2[0],
|
|
110
|
-
subRowIndex = _key$split2[1];
|
|
111
|
-
var parentRow = data[parseInt(parentId, 10)];
|
|
112
|
-
if (parentRow && parentRow.subRows) {
|
|
113
|
-
return parentRow.subRows[parseInt(subRowIndex, 10)];
|
|
114
|
-
}
|
|
115
|
-
} else {
|
|
116
|
-
// This is a parent row
|
|
117
|
-
return data[parseInt(key, 10)];
|
|
118
|
-
}
|
|
119
|
-
return null;
|
|
120
|
-
}).filter(function (row) {
|
|
121
|
-
return row;
|
|
122
|
-
});
|
|
123
|
-
};
|
|
124
|
-
(0, _react.useEffect)(function () {
|
|
125
|
-
if (hasSubRows) {
|
|
126
|
-
if (Object.keys(rowSelection).length > 0) {
|
|
127
|
-
selectData(getSelectedRows(rowSelection));
|
|
128
|
-
}
|
|
129
|
-
} else {
|
|
130
|
-
selectData(table.getSelectedRowModel().rows.map(function (row) {
|
|
131
|
-
return row.original;
|
|
132
|
-
}));
|
|
133
|
-
}
|
|
134
|
-
}, [rowSelection]);
|
|
135
|
-
(0, _react.useEffect)(function () {
|
|
136
|
-
if (typeof window !== 'undefined') {
|
|
137
|
-
setIsLoading(false);
|
|
138
|
-
}
|
|
139
|
-
}, []);
|
|
140
|
-
(0, _react.useEffect)(function () {
|
|
141
|
-
//scroll to the top of the table when the sorting changes
|
|
142
|
-
try {
|
|
143
|
-
var _rowVirtualizerInstan, _rowVirtualizerInstan2;
|
|
144
|
-
(_rowVirtualizerInstan = rowVirtualizerInstanceRef.current) === null || _rowVirtualizerInstan === void 0 || (_rowVirtualizerInstan2 = _rowVirtualizerInstan.scrollToIndex) === null || _rowVirtualizerInstan2 === void 0 || _rowVirtualizerInstan2.call(_rowVirtualizerInstan, 0);
|
|
145
|
-
} catch (error) {
|
|
146
|
-
console.error(error);
|
|
147
|
-
}
|
|
148
|
-
}, [sorting]);
|
|
149
|
-
|
|
150
|
-
/**
|
|
151
|
-
* Creates the columns for the DataGrid and generates it's default properties.
|
|
152
|
-
* @param {Array} columns
|
|
153
|
-
* @returns the DataGrid columns.
|
|
154
|
-
*/
|
|
155
|
-
var createColumns = function createColumns(columns) {
|
|
156
|
-
return columns.map(function (column) {
|
|
157
|
-
return _objectSpread(_objectSpread({}, column), {}, {
|
|
158
|
-
enableSorting: column.enableSorting ? column.enableSorting : true,
|
|
159
|
-
enableColumnFilter: column.enableColumnFilter ? column.enableColumnFilter : true,
|
|
160
|
-
enableColumnFilterModes: column.enableColumnFilterModes ? column.enableColumnFilterModes : true,
|
|
161
|
-
filterFn: column.filterFn ? column.filterFn : 'contains',
|
|
162
|
-
enableResizing: column.enableResizing ? column.enableResizing : true,
|
|
163
|
-
grow: column.grow ? column.grow : true,
|
|
164
|
-
enableClickToCopy: column.enableClickToCopy ? column.enableClickToCopy : false,
|
|
165
|
-
enableColumnActions: column.enableColumnActions ? column.enableColumnActions : false,
|
|
166
|
-
Cell: function Cell(props) {
|
|
167
|
-
return column.cellClass ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
168
|
-
className: column.cellClass
|
|
169
|
-
}, column.Cell ? /*#__PURE__*/_react["default"].createElement(column.Cell, props) : props.cell.getValue()) : column.Cell ? /*#__PURE__*/_react["default"].createElement(column.Cell, props) : props.cell.getValue();
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
});
|
|
173
|
-
};
|
|
174
|
-
/**
|
|
175
|
-
* Generates all the table's properties.
|
|
176
|
-
*/
|
|
177
|
-
var table = (0, _materialReactTable.useMaterialReactTable)({
|
|
178
|
-
data: createRows,
|
|
179
|
-
columns: createColumns(columns),
|
|
180
|
-
enableRowSelection: !disableSelect,
|
|
181
|
-
enableSubRowSelection: hasSubRows,
|
|
182
|
-
enableMultiRowSelection: enableMultiRowSelection,
|
|
183
|
-
enableFullScreenToggle: enableFullScreenToggle,
|
|
184
|
-
enableDensityToggle: enableDensityToggle,
|
|
185
|
-
enableGlobalFilter: enableGlobalFilter,
|
|
186
|
-
enableGlobalFilterModes: false,
|
|
187
|
-
enableToolbarInternalActions: false,
|
|
188
|
-
positionToolbarAlertBanner: "none",
|
|
189
|
-
enableColumnPinning: true,
|
|
190
|
-
enableColumnResizing: true,
|
|
191
|
-
selectAllMode: 'all',
|
|
192
|
-
autoResetPageIndex: false,
|
|
193
|
-
enableColumnVirtualization: enableVirtualization,
|
|
194
|
-
enableRowVirtualization: enableVirtualization,
|
|
195
|
-
rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
|
|
196
|
-
//optional
|
|
197
|
-
rowVirtualizerOptions: {
|
|
198
|
-
overscan: 5
|
|
199
|
-
},
|
|
200
|
-
//optionally customize the row virtualizer
|
|
201
|
-
columnVirtualizerOptions: {
|
|
202
|
-
overscan: columns.length
|
|
203
|
-
},
|
|
204
|
-
//optionally customize the column virtualizer
|
|
205
|
-
state: {
|
|
206
|
-
isLoading: isLoading,
|
|
207
|
-
sorting: sorting,
|
|
208
|
-
showColumnFilters: true,
|
|
209
|
-
showGlobalFilter: hasGlobalFilter,
|
|
210
|
-
rowSelection: rowSelection
|
|
211
|
-
},
|
|
212
|
-
initialState: {
|
|
213
|
-
// showColumnFilters: true,
|
|
214
|
-
// showGlobalFilter: hasGlobalFilter,
|
|
215
|
-
pagination: {
|
|
216
|
-
pageSize: pageSize,
|
|
217
|
-
pageIndex: 0
|
|
218
|
-
}
|
|
219
|
-
},
|
|
220
|
-
columnResizeMode: 'onEnd',
|
|
221
|
-
// enableColumnFilterModes: enableColumnFilterModes,
|
|
222
|
-
globalFilterFn: globalFilterFn,
|
|
223
|
-
positionPagination: pagination,
|
|
224
|
-
paginationDisplayMode: 'pages',
|
|
225
|
-
muiPaginationProps: {
|
|
226
|
-
rowsPerPageOptions: itemsPerPage
|
|
227
|
-
},
|
|
228
|
-
layoutMode: 'grid',
|
|
229
|
-
enableStickyHeader: true,
|
|
230
|
-
filterFns: {
|
|
231
|
-
regex: function regex(row, id, filterValue) {
|
|
232
|
-
var regex = null;
|
|
233
|
-
try {
|
|
234
|
-
regex = new RegExp(filterValue, 'gi');
|
|
235
|
-
} catch (e) {
|
|
236
|
-
return regex;
|
|
237
|
-
}
|
|
238
|
-
return regex.test(row.getValue(id));
|
|
239
|
-
},
|
|
240
|
-
logical: function logical(row, id, filterValue) {
|
|
241
|
-
var result = (0, _filters.logicalFilter)(row, id, filterValue);
|
|
242
|
-
return result;
|
|
243
|
-
}
|
|
244
|
-
},
|
|
245
|
-
localization: {
|
|
246
|
-
filterRegex: 'Regex',
|
|
247
|
-
filterLogical: 'Logical'
|
|
248
|
-
},
|
|
249
|
-
renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref2) {
|
|
250
|
-
var internalFilterOptions = _ref2.internalFilterOptions,
|
|
251
|
-
onSelectFilterMode = _ref2.onSelectFilterMode;
|
|
252
|
-
return [/*#__PURE__*/_react["default"].createElement(_ColumnFilter["default"], {
|
|
253
|
-
key: "filters",
|
|
254
|
-
filterOptions: internalFilterOptions,
|
|
255
|
-
onSelectFilterMode: onSelectFilterMode
|
|
256
|
-
})];
|
|
257
|
-
},
|
|
258
|
-
renderTopToolbarCustomActions: function renderTopToolbarCustomActions(_ref3) {
|
|
259
|
-
var table = _ref3.table;
|
|
260
|
-
var selectedRows = table.getSelectedRowModel().flatRows;
|
|
261
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
262
|
-
style: {
|
|
263
|
-
display: 'flex',
|
|
264
|
-
flexDirection: 'column',
|
|
265
|
-
gap: '.5em',
|
|
266
|
-
width: '100%'
|
|
267
|
-
}
|
|
268
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
269
|
-
style: {
|
|
270
|
-
display: 'flex',
|
|
271
|
-
justifyContent: 'space-between'
|
|
272
|
-
}
|
|
273
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
274
|
-
style: {
|
|
275
|
-
display: 'flex',
|
|
276
|
-
flexDirection: 'row',
|
|
277
|
-
gap: '.5em',
|
|
278
|
-
flexWrap: 'wrap'
|
|
279
|
-
}
|
|
280
|
-
}, actions && actions.map(function (e) {
|
|
281
|
-
var isVisible = e.visible !== undefined ? e.visible : true;
|
|
282
|
-
if (isVisible) {
|
|
283
|
-
return /*#__PURE__*/_react["default"].createElement(_ActionButton["default"], {
|
|
284
|
-
table: table,
|
|
285
|
-
key: e.key || e.name,
|
|
286
|
-
name: e.name,
|
|
287
|
-
tooltip: e.tooltip,
|
|
288
|
-
onClick: e["function"],
|
|
289
|
-
icon: e.icon,
|
|
290
|
-
color: e.color,
|
|
291
|
-
selectionMode: e.selectionMode,
|
|
292
|
-
confirmMessage: e.confirmMessage,
|
|
293
|
-
hasConfirmMessage: e.hasConfirmMessage
|
|
294
|
-
});
|
|
295
|
-
}
|
|
296
|
-
}), /*#__PURE__*/_react["default"].createElement(_ExportActions["default"], {
|
|
297
|
-
table: table,
|
|
298
|
-
data: createRows,
|
|
299
|
-
columns: columns,
|
|
300
|
-
hasExcelExport: hasExcelExport,
|
|
301
|
-
hasPdfExport: hasPdfExport,
|
|
302
|
-
pdfOption: pdfOption,
|
|
303
|
-
excelOption: excelOption
|
|
304
|
-
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
305
|
-
style: {
|
|
306
|
-
display: 'flex',
|
|
307
|
-
flexDirection: 'row'
|
|
308
|
-
}
|
|
309
|
-
}, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
|
|
310
|
-
title: "Clear all rows selected",
|
|
311
|
-
arrow: true
|
|
312
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
|
|
313
|
-
disabled: selectedRows.length < 1,
|
|
314
|
-
onClick: function onClick() {
|
|
315
|
-
return table.resetRowSelection();
|
|
316
|
-
},
|
|
317
|
-
icon: "redo",
|
|
318
|
-
content: "Clear Selection",
|
|
319
|
-
primary: true,
|
|
320
|
-
basic: true,
|
|
321
|
-
style: {
|
|
322
|
-
display: 'flex',
|
|
323
|
-
height: '40px',
|
|
324
|
-
alignItems: 'center',
|
|
325
|
-
justifyContent: 'center'
|
|
326
|
-
}
|
|
327
|
-
}))), /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
|
|
328
|
-
title: "Clear Filters",
|
|
329
|
-
arrow: true
|
|
330
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
|
|
331
|
-
onClick: function onClick() {
|
|
332
|
-
return table.resetColumnFilters();
|
|
333
|
-
},
|
|
334
|
-
content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
|
|
335
|
-
style: {
|
|
336
|
-
margin: 0,
|
|
337
|
-
color: 'inherit'
|
|
338
|
-
},
|
|
339
|
-
name: "filter"
|
|
340
|
-
}), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
|
|
341
|
-
style: {
|
|
342
|
-
margin: 0,
|
|
343
|
-
color: 'inherit'
|
|
344
|
-
},
|
|
345
|
-
name: "close"
|
|
346
|
-
})),
|
|
347
|
-
inverted: true,
|
|
348
|
-
color: "orange",
|
|
349
|
-
style: {
|
|
350
|
-
display: 'flex',
|
|
351
|
-
height: '40px',
|
|
352
|
-
alignItems: 'center',
|
|
353
|
-
justifyContent: 'center'
|
|
354
|
-
}
|
|
355
|
-
}))))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
356
|
-
style: {
|
|
357
|
-
alignSelf: 'flex-end',
|
|
358
|
-
marginRight: '5px'
|
|
359
|
-
}
|
|
360
|
-
}, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
|
|
361
|
-
title: "Selected/Filtered/Total",
|
|
362
|
-
arrow: true
|
|
363
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, selectedRows.length, "/", table.getFilteredRowModel().rows.length, "/", createRows.length))));
|
|
364
|
-
},
|
|
365
|
-
muiTableHeadCellProps: {
|
|
366
|
-
sx: {
|
|
367
|
-
fontWeight: 'bold',
|
|
368
|
-
// fontSize: '11px',
|
|
369
|
-
fontSize: '14px',
|
|
370
|
-
borderRight: '1px solid #D7D7D7',
|
|
371
|
-
borderTop: '1px solid #D7D7D7',
|
|
372
|
-
padding: 'auto'
|
|
373
|
-
}
|
|
374
|
-
},
|
|
375
|
-
muiTableBodyCellProps: function muiTableBodyCellProps(_ref4) {
|
|
376
|
-
var row = _ref4.row;
|
|
377
|
-
return {
|
|
378
|
-
sx: {
|
|
379
|
-
fontWeight: row.getIsSelected() ? 'bold' : 'normal',
|
|
380
|
-
backgroundColor: row.depth == 1 ? 'lightgrey' : row.depth == 2 ? 'grey' : 'white',
|
|
381
|
-
borderRight: '1px solid #D7D7D7',
|
|
382
|
-
padding: 'auto',
|
|
383
|
-
height: rowHeight,
|
|
384
|
-
paddingLeft: row.depth ? "".concat(row.depth * 15, "px") : '12px',
|
|
385
|
-
// adjust the multiplier as needed
|
|
386
|
-
boxSizing: 'border-box'
|
|
387
|
-
}
|
|
388
|
-
};
|
|
389
|
-
},
|
|
390
|
-
muiTableBodyRowProps: function muiTableBodyRowProps(_ref5) {
|
|
391
|
-
var row = _ref5.row;
|
|
392
|
-
return {
|
|
393
|
-
style: {
|
|
394
|
-
backgroundColor: row.depth > 0 ? '#f0f0f0' : 'white'
|
|
395
|
-
}
|
|
396
|
-
};
|
|
397
|
-
},
|
|
398
|
-
muiTableContainerProps: {
|
|
399
|
-
sx: {
|
|
400
|
-
maxHeight: '600px'
|
|
401
|
-
}
|
|
402
|
-
},
|
|
403
|
-
defaultDisplayColumn: {
|
|
404
|
-
enableResizing: true
|
|
405
|
-
},
|
|
406
|
-
defaultColumn: {
|
|
407
|
-
maxSize: 800,
|
|
408
|
-
// minSize: 50,
|
|
409
|
-
minSize: 15,
|
|
410
|
-
muiFilterCheckboxProps: {
|
|
411
|
-
sx: {
|
|
412
|
-
minWidth: 50
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
},
|
|
416
|
-
displayColumnDefOptions: {
|
|
417
|
-
'mrt-row-select': {
|
|
418
|
-
size: 60,
|
|
419
|
-
minSize: 10,
|
|
420
|
-
header: '',
|
|
421
|
-
muiTableBodyCellProps: {
|
|
422
|
-
sx: {
|
|
423
|
-
justifyContent: 'center',
|
|
424
|
-
borderRight: '1px solid #D7D7D7'
|
|
425
|
-
}
|
|
426
|
-
},
|
|
427
|
-
muiTableHeadCellProps: {
|
|
428
|
-
sx: {
|
|
429
|
-
fontWeight: 'bold',
|
|
430
|
-
// fontSize: '11px',
|
|
431
|
-
fontSize: '14px',
|
|
432
|
-
borderRight: '1px solid #D7D7D7',
|
|
433
|
-
borderTop: '1px solid #D7D7D7',
|
|
434
|
-
padding: enableMultiRowSelection && '0 18px'
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
},
|
|
438
|
-
'mrt-row-expand': {
|
|
439
|
-
size: 25,
|
|
440
|
-
minSize: 10,
|
|
441
|
-
muiTableBodyCellProps: {
|
|
442
|
-
sx: {
|
|
443
|
-
justifyContent: 'center',
|
|
444
|
-
borderRight: '1px solid #D7D7D7'
|
|
445
|
-
}
|
|
446
|
-
},
|
|
447
|
-
muiTableHeadCellProps: {
|
|
448
|
-
sx: {
|
|
449
|
-
borderRight: '1px solid #D7D7D7',
|
|
450
|
-
borderTop: '1px solid #D7D7D7'
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
},
|
|
455
|
-
getRowId: function getRowId(originalRow) {
|
|
456
|
-
return originalRow[rowKey];
|
|
457
|
-
},
|
|
458
|
-
getRowProps: function getRowProps(row) {
|
|
459
|
-
var _row$original;
|
|
460
|
-
return {
|
|
461
|
-
style: {
|
|
462
|
-
backgroundColor: (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.isSubRow ? '#f0f0f0' : 'white'
|
|
463
|
-
}
|
|
464
|
-
};
|
|
465
|
-
},
|
|
466
|
-
onRowSelectionChange: setRowSelection,
|
|
467
|
-
onSortingChange: setSorting,
|
|
468
|
-
enablePagination: enablePagination,
|
|
469
|
-
enableBottomToolbar: false,
|
|
470
|
-
enableExpanding: enableExpanding,
|
|
471
|
-
// the subrow only affect the subrow checkbox and the parent row checkbox is not affected, the parent row checkbox is only affected by the parent row checkbox
|
|
472
|
-
muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref6) {
|
|
473
|
-
var row = _ref6.row;
|
|
474
|
-
return hasSubRows && {
|
|
475
|
-
checked: rowSelection[row.id] || false,
|
|
476
|
-
indeterminate: false,
|
|
477
|
-
onChange: function onChange() {
|
|
478
|
-
var rowId = row.id.toString();
|
|
479
|
-
setRowSelection(function (prev) {
|
|
480
|
-
var newSelection = _objectSpread({}, prev);
|
|
481
|
-
if (newSelection[rowId]) {
|
|
482
|
-
// If the row is already selected, deselect it
|
|
483
|
-
delete newSelection[rowId];
|
|
484
|
-
} else {
|
|
485
|
-
// If the row is not selected, select it
|
|
486
|
-
newSelection[rowId] = true;
|
|
487
|
-
}
|
|
488
|
-
return newSelection;
|
|
489
|
-
});
|
|
490
|
-
}
|
|
491
|
-
};
|
|
492
|
-
}
|
|
493
|
-
// renderToolbarAlertBannerContent: (e) => {
|
|
494
|
-
// console.log(e);
|
|
495
|
-
// return (
|
|
496
|
-
// <div>
|
|
497
|
-
// Hello
|
|
498
|
-
// </div>
|
|
499
|
-
// )}
|
|
500
|
-
});
|
|
501
|
-
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
|
|
502
|
-
table: table
|
|
503
|
-
}));
|
|
504
|
-
};
|
|
505
|
-
DataGrid.propTypes = {
|
|
506
|
-
columns: _propTypes["default"].array.isRequired,
|
|
507
|
-
// array of the data grid columns
|
|
508
|
-
createRows: _propTypes["default"].array.isRequired,
|
|
509
|
-
// array of the data grid data
|
|
510
|
-
actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
511
|
-
name: _propTypes["default"].string.isRequired,
|
|
512
|
-
"function": _propTypes["default"].func.isRequired,
|
|
513
|
-
tooltip: _propTypes["default"].string,
|
|
514
|
-
color: _propTypes["default"].oneOf(['blue', 'red', 'green', 'yellow', 'orange', 'black', 'grey', 'purple', 'teal', 'brown', 'violet', 'purple', 'olive', 'pink']),
|
|
515
|
-
icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]).isRequired,
|
|
516
|
-
selectionMode: _propTypes["default"].oneOf(['single', 'multi', 'always']),
|
|
517
|
-
confirmMessage: _propTypes["default"].string,
|
|
518
|
-
hasConfirmMessage: _propTypes["default"].bool
|
|
519
|
-
})),
|
|
520
|
-
// array of objects -> each object represents a single data grid action button
|
|
521
|
-
hasExcelExport: _propTypes["default"].bool,
|
|
522
|
-
// defines whether there is an export button for excel
|
|
523
|
-
excelOption: _propTypes["default"].oneOf(['all', 'allRows', 'pageRows', 'selectedRows']),
|
|
524
|
-
// defines the export excel option
|
|
525
|
-
hasPdfExport: _propTypes["default"].bool,
|
|
526
|
-
// defines whether there is an export button for pdf
|
|
527
|
-
pdfOption: _propTypes["default"].oneOf(['all', 'allRows', 'pageRows', 'selectedRows']),
|
|
528
|
-
// defines the export pdf option
|
|
529
|
-
rowHeight: _propTypes["default"].number,
|
|
530
|
-
// defines the row height
|
|
531
|
-
hasGlobalFilter: _propTypes["default"].bool,
|
|
532
|
-
// defines whether the data grid has a global filter
|
|
533
|
-
globalFilterFn: _propTypes["default"].oneOf(['contains', 'fuzzy', 'between', 'equals', 'greaterThan', 'lessThan', 'notEquals', 'lessThanOrEqualTo', 'greaterThanOrEqualTo', 'empty', 'notEmpty', 'startsWith', 'endsWith', 'endsWith', 'betweenInclusive']),
|
|
534
|
-
// defines the global filter option
|
|
535
|
-
disableSelect: _propTypes["default"].bool,
|
|
536
|
-
// defines whether the data grid has row selection (checkboxes)
|
|
537
|
-
enableColumnFilterModes: _propTypes["default"].bool,
|
|
538
|
-
// enables/disables column filtering modes
|
|
539
|
-
pagination: _propTypes["default"].oneOf(['top', 'bottom', 'both']),
|
|
540
|
-
// defines the pagination position
|
|
541
|
-
itemsPerPage: _propTypes["default"].arrayOf(_propTypes["default"].number),
|
|
542
|
-
// defines the number of rows per page
|
|
543
|
-
selectData: _propTypes["default"].func,
|
|
544
|
-
//
|
|
545
|
-
rowKey: _propTypes["default"].string,
|
|
546
|
-
//
|
|
547
|
-
pageSize: _propTypes["default"].number,
|
|
548
|
-
//
|
|
549
|
-
enableMultiRowSelection: _propTypes["default"].bool,
|
|
550
|
-
enableFullScreenToggle: _propTypes["default"].bool,
|
|
551
|
-
enableDensityToggle: _propTypes["default"].bool,
|
|
552
|
-
enableGlobalFilter: _propTypes["default"].bool,
|
|
553
|
-
enableVirtualization: _propTypes["default"].bool
|
|
554
|
-
};
|
|
555
|
-
var _default = exports["default"] = DataGrid; // DataGrid.defaultProps = {
|
|
556
|
-
// hasExcelExport: false,
|
|
557
|
-
// hasPdfExport: false,
|
|
558
|
-
// excelOption: 'allRows',
|
|
559
|
-
// pdfOption: 'allRows',
|
|
560
|
-
// hasGlobalFilter: true,
|
|
561
|
-
// globalFilterFn: 'contains',
|
|
562
|
-
// enableColumnFilterModes: true,
|
|
563
|
-
// disableSelect: false,
|
|
564
|
-
// pagination: 'both',
|
|
565
|
-
// itemsPerPage: [10, 15, 20, 25],
|
|
566
|
-
// rowHeight: 60,
|
|
567
|
-
// };
|
|
5
|
+
module.exports = {
|
|
6
|
+
DataGrid: _index["default"]
|
|
7
|
+
};
|