@insticc/react-datagrid-2 1.1.9 → 1.1.11

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.
@@ -1,675 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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 _xDatePickers = require("@mui/x-date-pickers");
12
- var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
13
- var _semanticUiReact = require("semantic-ui-react");
14
- var _material = require("@mui/material");
15
- var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
16
- var _ExportActions = _interopRequireDefault(require("./ExportActions"));
17
- var _ActionButton = _interopRequireDefault(require("./ActionButton"));
18
- var _GridHelper = _interopRequireDefault(require("./utils/GridHelper"));
19
- var _filters = require("./utils/filters");
20
- require("bootstrap/dist/css/bootstrap.min.css");
21
- require("semantic-ui-css/semantic.min.css");
22
- require("./styles/styles.css");
23
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
24
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
25
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
26
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
27
- 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; }
28
- 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; }
29
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
30
- 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); }
31
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
32
- 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."); }
33
- 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; } }
34
- 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; }
35
- 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; } }
36
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
37
- var DataGrid = function DataGrid(_ref) {
38
- var columns = _ref.columns,
39
- columnVisibilityState = _ref.columnVisibilityState,
40
- columnOrder = _ref.columnOrder,
41
- createRows = _ref.createRows,
42
- actions = _ref.actions,
43
- _ref$hasExcelExport = _ref.hasExcelExport,
44
- hasExcelExport = _ref$hasExcelExport === void 0 ? false : _ref$hasExcelExport,
45
- _ref$excelOption = _ref.excelOption,
46
- excelOption = _ref$excelOption === void 0 ? 'selectedRows' : _ref$excelOption,
47
- _ref$hasPdfExport = _ref.hasPdfExport,
48
- hasPdfExport = _ref$hasPdfExport === void 0 ? false : _ref$hasPdfExport,
49
- _ref$pdfOption = _ref.pdfOption,
50
- pdfOption = _ref$pdfOption === void 0 ? 'selectedRows' : _ref$pdfOption,
51
- _ref$rowHeight = _ref.rowHeight,
52
- rowHeight = _ref$rowHeight === void 0 ? 75 : _ref$rowHeight,
53
- _ref$globalFilterFn = _ref.globalFilterFn,
54
- globalFilterFn = _ref$globalFilterFn === void 0 ? 'contains' : _ref$globalFilterFn,
55
- _ref$disableSelect = _ref.disableSelect,
56
- disableSelect = _ref$disableSelect === void 0 ? false : _ref$disableSelect,
57
- _ref$enableColumnFilt = _ref.enableColumnFilterModes,
58
- enableColumnFilterModes = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
59
- _ref$pagination = _ref.pagination,
60
- pagination = _ref$pagination === void 0 ? 'both' : _ref$pagination,
61
- _ref$itemsPerPage = _ref.itemsPerPage,
62
- itemsPerPage = _ref$itemsPerPage === void 0 ? [50, 100, 150] : _ref$itemsPerPage,
63
- _ref$selectedIds = _ref.selectedIds,
64
- selectedIds = _ref$selectedIds === void 0 ? [] : _ref$selectedIds,
65
- selectData = _ref.selectData,
66
- rowKey = _ref.rowKey,
67
- _ref$pageSize = _ref.pageSize,
68
- pageSize = _ref$pageSize === void 0 ? 150 : _ref$pageSize,
69
- _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
70
- enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
71
- _ref$enableFullScreen = _ref.enableFullScreenToggle,
72
- enableFullScreenToggle = _ref$enableFullScreen === void 0 ? false : _ref$enableFullScreen,
73
- _ref$enableDensityTog = _ref.enableDensityToggle,
74
- enableDensityToggle = _ref$enableDensityTog === void 0 ? false : _ref$enableDensityTog,
75
- _ref$enableGlobalFilt = _ref.enableGlobalFilter,
76
- enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? false : _ref$enableGlobalFilt,
77
- _ref$hasSubRows = _ref.hasSubRows,
78
- hasSubRows = _ref$hasSubRows === void 0 ? false : _ref$hasSubRows,
79
- _ref$enableExpanding = _ref.enableExpanding,
80
- enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
81
- _ref$enablePagination = _ref.enablePagination,
82
- enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
83
- _ref$enableVirtualiza = _ref.enableVirtualization,
84
- enableVirtualization = _ref$enableVirtualiza === void 0 ? false : _ref$enableVirtualiza,
85
- _ref$gridHeight = _ref.gridHeight,
86
- gridHeight = _ref$gridHeight === void 0 ? 600 : _ref$gridHeight,
87
- _ref$gridHelper = _ref.gridHelper,
88
- gridHelper = _ref$gridHelper === void 0 ? null : _ref$gridHelper,
89
- _ref$disableRows = _ref.disableRows,
90
- disableRows = _ref$disableRows === void 0 ? [] : _ref$disableRows,
91
- _ref$selectAllMode = _ref.selectAllMode,
92
- selectAllMode = _ref$selectAllMode === void 0 ? 'page' : _ref$selectAllMode,
93
- _ref$hasClearFiltersB = _ref.hasClearFiltersBtn,
94
- hasClearFiltersBtn = _ref$hasClearFiltersB === void 0 ? true : _ref$hasClearFiltersB;
95
- var _useState = (0, _react.useState)(selectedIds.reduce(function (a, v) {
96
- return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, v, true));
97
- }, {})),
98
- _useState2 = _slicedToArray(_useState, 2),
99
- rowSelection = _useState2[0],
100
- setRowSelection = _useState2[1];
101
- var _useState3 = (0, _react.useState)(true),
102
- _useState4 = _slicedToArray(_useState3, 2),
103
- isLoading = _useState4[0],
104
- setIsLoading = _useState4[1];
105
- var _useState5 = (0, _react.useState)([]),
106
- _useState6 = _slicedToArray(_useState5, 2),
107
- sorting = _useState6[0],
108
- setSorting = _useState6[1];
109
- var _useState7 = (0, _react.useState)(false),
110
- _useState8 = _slicedToArray(_useState7, 2),
111
- open = _useState8[0],
112
- setOpen = _useState8[1];
113
- //optionally access the underlying virtualizer instance
114
- var rowVirtualizerInstanceRef = (0, _react.useRef)(null);
115
- if (gridHelper && (!gridHelper.content || !gridHelper.title)) {
116
- throw new Error("The 'gridHelper' prop object is expected to contain both 'title' and 'content' properties. Ensure that both are provided if 'gridHelper' is defined.");
117
- }
118
-
119
- // 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)
120
- // so if is a subrow we need to go to the parent row and get the id that is on the position after the .
121
- // 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
122
- var getSelectedRows = function getSelectedRows(rows) {
123
- var data = createRows;
124
- return Object.keys(rows).filter(function (key) {
125
- return rows[key];
126
- }).map(function (key) {
127
- if (key.toString().includes('.')) {
128
- // This is a subrow
129
- var _key$split = key.split('.'),
130
- _key$split2 = _slicedToArray(_key$split, 2),
131
- parentId = _key$split2[0],
132
- subRowIndex = _key$split2[1];
133
- var parentRow = data[parseInt(parentId, 10)];
134
- if (parentRow && parentRow.subRows) {
135
- return parentRow.subRows[parseInt(subRowIndex, 10)];
136
- }
137
- } else {
138
- // This is a parent row
139
- return data[parseInt(key, 10)];
140
- }
141
- return null;
142
- }).filter(function (row) {
143
- return row;
144
- });
145
- };
146
-
147
- // implemented to update selectedIds when props change
148
- (0, _react.useEffect)(function () {
149
- var currentSelectionIds = Object.keys(rowSelection);
150
- // Check if the lengths are different or if any `selectedIds` are not in `rowSelection`
151
- var isSelectionOutOfSync = selectedIds.length !== currentSelectionIds.length || selectedIds.some(function (id) {
152
- return !rowSelection[id];
153
- });
154
- if (isSelectionOutOfSync) {
155
- var newSelection = selectedIds.reduce(function (acc, id) {
156
- acc[id] = true; // Set true for each id in selectedIds
157
- return acc;
158
- }, {});
159
- setRowSelection(newSelection);
160
- }
161
- }, [selectedIds]);
162
- (0, _react.useEffect)(function () {
163
- if (hasSubRows) {
164
- if (Object.keys(rowSelection).length > 0) {
165
- selectData(getSelectedRows(rowSelection));
166
- }
167
- } else {
168
- // DEPRECATED:
169
- // selectData(table.getSelectedRowModel().rows.map(row => row.original));
170
-
171
- var selectedRowIds = Object.keys(table.getState().rowSelection);
172
- var selectedRows = selectedRowIds.map(function (rowId) {
173
- var matchingRow = table.getSelectedRowModel().rows.find(function (row) {
174
- return "".concat(row.id) === rowId;
175
- });
176
- return matchingRow ? matchingRow.original : null; // Return original if found
177
- }).filter(function (row) {
178
- return row !== null;
179
- }); // Filter out any null values
180
- selectData(selectedRows);
181
- }
182
- }, [rowSelection]);
183
- (0, _react.useEffect)(function () {
184
- if (typeof window !== 'undefined') {
185
- setIsLoading(false);
186
- }
187
- }, []);
188
- (0, _react.useEffect)(function () {
189
- //scroll to the top of the table when the sorting changes
190
- try {
191
- var _rowVirtualizerInstan, _rowVirtualizerInstan2;
192
- (_rowVirtualizerInstan = rowVirtualizerInstanceRef.current) === null || _rowVirtualizerInstan === void 0 || (_rowVirtualizerInstan2 = _rowVirtualizerInstan.scrollToIndex) === null || _rowVirtualizerInstan2 === void 0 || _rowVirtualizerInstan2.call(_rowVirtualizerInstan, 0);
193
- } catch (error) {
194
- console.error(error);
195
- }
196
- }, [sorting]);
197
-
198
- /**
199
- * Creates the columns for the DataGrid and generates it's default properties.
200
- * @param {Array} columns
201
- * @returns the DataGrid columns.
202
- */
203
- var createColumns = function createColumns(columns) {
204
- return columns.map(function (column) {
205
- var _column$enableSorting, _column$enableColumnF, _column$enableColumnF2, _column$filterFn, _column$enableResizin, _column$grow, _column$enableClickTo, _column$enableColumnA;
206
- return _objectSpread(_objectSpread({}, column), {}, {
207
- enableSorting: (_column$enableSorting = column.enableSorting) !== null && _column$enableSorting !== void 0 ? _column$enableSorting : true,
208
- enableColumnFilter: (_column$enableColumnF = column.enableColumnFilter) !== null && _column$enableColumnF !== void 0 ? _column$enableColumnF : true,
209
- enableColumnFilterModes: (_column$enableColumnF2 = column.enableColumnFilterModes) !== null && _column$enableColumnF2 !== void 0 ? _column$enableColumnF2 : true,
210
- filterFn: column.isDateColumn ? undefined : (_column$filterFn = column.filterFn) !== null && _column$filterFn !== void 0 ? _column$filterFn : 'contains',
211
- enableResizing: (_column$enableResizin = column.enableResizing) !== null && _column$enableResizin !== void 0 ? _column$enableResizin : true,
212
- grow: (_column$grow = column.grow) !== null && _column$grow !== void 0 ? _column$grow : true,
213
- enableClickToCopy: (_column$enableClickTo = column.enableClickToCopy) !== null && _column$enableClickTo !== void 0 ? _column$enableClickTo : false,
214
- enableColumnActions: (_column$enableColumnA = column.enableColumnActions) !== null && _column$enableColumnA !== void 0 ? _column$enableColumnA : false,
215
- // sortingFn: --> basic default, datetime for date
216
- sortingFn: column.sortingFn ? column.sortingFn : column.isDateColumn // Use custom sorting for date columns
217
- ? function (rowA, rowB, columnId) {
218
- var valueA = rowA.getValue(columnId);
219
- var valueB = rowB.getValue(columnId);
220
- // Parse values as timestamps or handle invalid dates
221
- var dateA = valueA && !isNaN(new Date(valueA).getTime()) ? new Date(valueA).getTime() : null;
222
- var dateB = valueB && !isNaN(new Date(valueB).getTime()) ? new Date(valueB).getTime() : null;
223
- if (dateA === null && dateB === null) return 0; // Both null, equal
224
- if (dateA === null) return 1; // Null values go last
225
- if (dateB === null) return -1; // Null values go last
226
- return dateA - dateB; // Compare by timestamp
227
- } : 'basic',
228
- // Use default sorting for non-date columns
229
- Cell: function Cell(props) {
230
- return column.cellClass ? /*#__PURE__*/_react["default"].createElement("div", {
231
- className: column.cellClass
232
- }, column.Cell ? /*#__PURE__*/_react["default"].createElement(column.Cell, props) : props.cell.getValue()) : column.Cell ? /*#__PURE__*/_react["default"].createElement(column.Cell, props) : props.cell.getValue();
233
- }
234
- });
235
- });
236
- };
237
- /**
238
- * Generates all the table's properties.
239
- */
240
- var table = (0, _materialReactTable.useMaterialReactTable)({
241
- data: createRows,
242
- columns: createColumns(columns),
243
- enableRowSelection: disableRows.length > 0 ? function (row) {
244
- return !disableRows.includes(row.original[rowKey]);
245
- } : !disableSelect,
246
- enableSubRowSelection: hasSubRows,
247
- enableMultiRowSelection: enableMultiRowSelection,
248
- enableFullScreenToggle: enableFullScreenToggle,
249
- enableDensityToggle: enableDensityToggle,
250
- enableGlobalFilter: enableGlobalFilter,
251
- enableGlobalFilterModes: false,
252
- enableToolbarInternalActions: false,
253
- positionToolbarAlertBanner: "none",
254
- enableColumnPinning: true,
255
- enableColumnResizing: true,
256
- selectAllMode: selectAllMode,
257
- autoResetPageIndex: false,
258
- enableColumnVirtualization: enableVirtualization,
259
- enableRowVirtualization: enableVirtualization,
260
- rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
261
- //optional
262
- rowVirtualizerOptions: {
263
- overscan: 5
264
- },
265
- //optionally customize the row virtualizer
266
- columnVirtualizerOptions: {
267
- overscan: columns.length
268
- },
269
- //optionally customize the column virtualizer
270
- state: {
271
- isLoading: isLoading,
272
- sorting: sorting,
273
- showColumnFilters: true,
274
- showGlobalFilter: enableGlobalFilter,
275
- rowSelection: rowSelection,
276
- columnVisibility: columnVisibilityState || {} // Add column visibility state
277
- },
278
- initialState: {
279
- // showColumnFilters: true,
280
- pagination: {
281
- pageSize: pageSize,
282
- pageIndex: 0
283
- },
284
- columnOrder: columnOrder || [] // Add column order to initial state
285
- },
286
- columnResizeMode: 'onEnd',
287
- enableColumnFilterModes: enableColumnFilterModes,
288
- globalFilterFn: globalFilterFn,
289
- positionPagination: pagination,
290
- paginationDisplayMode: 'pages',
291
- muiPaginationProps: {
292
- rowsPerPageOptions: itemsPerPage
293
- },
294
- layoutMode: 'grid',
295
- enableStickyHeader: true,
296
- filterFns: {
297
- regex: function regex(row, id, filterValue) {
298
- var regex = null;
299
- try {
300
- regex = new RegExp(filterValue, 'gi');
301
- } catch (e) {
302
- return regex;
303
- }
304
- return regex.test(row.getValue(id));
305
- },
306
- logical: function logical(row, id, filterValue) {
307
- var result = (0, _filters.logicalFilter)(row, id, filterValue);
308
- return result;
309
- }
310
- },
311
- localization: {
312
- filterRegex: 'Regex',
313
- filterLogical: 'Logical'
314
- },
315
- renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref2) {
316
- var internalFilterOptions = _ref2.internalFilterOptions,
317
- onSelectFilterMode = _ref2.onSelectFilterMode;
318
- return [/*#__PURE__*/_react["default"].createElement(_ColumnFilter["default"], {
319
- key: "filters",
320
- filterOptions: internalFilterOptions,
321
- onSelectFilterMode: onSelectFilterMode
322
- })];
323
- },
324
- renderTopToolbarCustomActions: function renderTopToolbarCustomActions(_ref3) {
325
- var table = _ref3.table;
326
- var selectedRows = table.getSelectedRowModel().flatRows;
327
- return /*#__PURE__*/_react["default"].createElement("div", {
328
- style: {
329
- display: 'flex',
330
- flexDirection: 'column',
331
- gap: '.5em',
332
- width: '100%'
333
- }
334
- }, /*#__PURE__*/_react["default"].createElement("div", {
335
- style: {
336
- display: 'flex',
337
- justifyContent: 'space-between'
338
- }
339
- }, /*#__PURE__*/_react["default"].createElement("div", {
340
- style: {
341
- display: 'flex',
342
- flexDirection: 'row',
343
- gap: '.5em',
344
- flexWrap: 'wrap'
345
- }
346
- }, actions && actions.map(function (e) {
347
- var isVisible = e.visible !== undefined ? e.visible : true;
348
- if (isVisible) {
349
- return /*#__PURE__*/_react["default"].createElement(_ActionButton["default"], {
350
- table: table,
351
- key: e.key || e.name,
352
- name: e.name,
353
- tooltip: e.tooltip,
354
- onClick: e["function"],
355
- icon: e.icon,
356
- color: e.color,
357
- selectionMode: e.selectionMode,
358
- confirmMessage: e.confirmMessage,
359
- hasConfirmMessage: e.hasConfirmMessage,
360
- disabled: e.disabled
361
- });
362
- }
363
- }), /*#__PURE__*/_react["default"].createElement(_ExportActions["default"], {
364
- table: table,
365
- data: createRows,
366
- columns: columns,
367
- hasExcelExport: hasExcelExport,
368
- hasPdfExport: hasPdfExport,
369
- pdfOption: pdfOption,
370
- excelOption: excelOption
371
- })), /*#__PURE__*/_react["default"].createElement("div", {
372
- style: {
373
- display: 'flex',
374
- flexDirection: 'row'
375
- }
376
- }, (!disableSelect || disableRows.length > 0) && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
377
- title: "Clear all rows selected",
378
- arrow: true
379
- }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
380
- circular: true,
381
- disabled: selectedRows.length < 1,
382
- onClick: function onClick() {
383
- return table.resetRowSelection();
384
- },
385
- content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
386
- style: {
387
- margin: 0,
388
- color: 'inherit'
389
- },
390
- name: "square outline"
391
- }), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
392
- style: {
393
- margin: 0,
394
- color: 'inherit'
395
- },
396
- name: "close"
397
- })),
398
- primary: true,
399
- basic: true
400
- // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
401
- }))), hasClearFiltersBtn && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
402
- title: "Clear Filters",
403
- arrow: true
404
- }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
405
- circular: true,
406
- onClick: function onClick() {
407
- return table.resetColumnFilters();
408
- },
409
- content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
410
- style: {
411
- margin: 0,
412
- color: 'inherit'
413
- },
414
- name: "filter"
415
- }), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
416
- style: {
417
- margin: 0,
418
- color: 'inherit'
419
- },
420
- name: "close"
421
- })),
422
- inverted: true,
423
- color: "orange"
424
- // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
425
- }))), gridHelper && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
426
- title: "Grid Help",
427
- arrow: true
428
- }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
429
- circular: true,
430
- onClick: function onClick() {
431
- return setOpen(true);
432
- },
433
- icon: "help",
434
- color: "blue"
435
- // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
436
- }))))), /*#__PURE__*/_react["default"].createElement("div", {
437
- style: {
438
- alignSelf: 'flex-end',
439
- marginRight: '5px'
440
- }
441
- }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
442
- title: "Selected/Filtered/Total",
443
- arrow: true
444
- }, /*#__PURE__*/_react["default"].createElement("span", null, selectedRows.length, "/", table.getFilteredRowModel().rows.length, "/", createRows.length))));
445
- },
446
- muiTableHeadCellProps: {
447
- sx: {
448
- fontWeight: 'bold',
449
- // fontSize: '11px',
450
- fontSize: '14px',
451
- borderRight: '1px solid #D7D7D7',
452
- borderTop: '1px solid #D7D7D7',
453
- padding: 'auto'
454
- }
455
- },
456
- muiTableBodyCellProps: function muiTableBodyCellProps(_ref4) {
457
- var row = _ref4.row;
458
- var isDisabled = disableRows.length > 0 ? disableRows.includes(row.original[rowKey]) : false;
459
- return {
460
- sx: {
461
- fontWeight: row.getIsSelected() ? "bold" : "normal",
462
- backgroundColor: isDisabled ? "#e3e3e3" : row.depth === 1 ? "lightgrey" : row.depth === 2 ? "grey" : "white",
463
- borderRight: "1px solid #D7D7D7",
464
- padding: "auto",
465
- height: rowHeight,
466
- paddingLeft: row.depth ? "".concat(row.depth * 15, "px") : "12px",
467
- boxSizing: "border-box"
468
- }
469
- };
470
- },
471
- muiTableBodyRowProps: function muiTableBodyRowProps(_ref5) {
472
- var row = _ref5.row;
473
- return {
474
- style: {
475
- backgroundColor: row.depth > 0 ? '#f0f0f0' : 'white'
476
- }
477
- };
478
- },
479
- muiTableContainerProps: {
480
- sx: {
481
- maxHeight: gridHeight
482
- }
483
- },
484
- defaultDisplayColumn: {
485
- enableResizing: true
486
- },
487
- defaultColumn: {
488
- maxSize: 800,
489
- // minSize: 50,
490
- minSize: 15,
491
- muiFilterCheckboxProps: {
492
- sx: {
493
- minWidth: 50
494
- }
495
- }
496
- },
497
- displayColumnDefOptions: {
498
- 'mrt-row-select': {
499
- size: 60,
500
- minSize: 10,
501
- header: '',
502
- muiTableBodyCellProps: {
503
- sx: {
504
- justifyContent: 'center',
505
- borderRight: '1px solid #D7D7D7'
506
- }
507
- },
508
- muiTableHeadCellProps: {
509
- sx: {
510
- fontWeight: 'bold',
511
- // fontSize: '11px',
512
- fontSize: '14px',
513
- borderRight: '1px solid #D7D7D7',
514
- borderTop: '1px solid #D7D7D7',
515
- padding: enableMultiRowSelection && '0 18px'
516
- }
517
- }
518
- },
519
- 'mrt-row-expand': {
520
- size: 25,
521
- minSize: 10,
522
- muiTableBodyCellProps: {
523
- sx: {
524
- justifyContent: 'center',
525
- borderRight: '1px solid #D7D7D7'
526
- }
527
- },
528
- muiTableHeadCellProps: {
529
- sx: {
530
- borderRight: '1px solid #D7D7D7',
531
- borderTop: '1px solid #D7D7D7'
532
- }
533
- }
534
- }
535
- },
536
- getRowId: function getRowId(originalRow) {
537
- return originalRow[rowKey];
538
- },
539
- getRowProps: function getRowProps(row) {
540
- var _row$original;
541
- return {
542
- style: {
543
- backgroundColor: (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.isSubRow ? '#f0f0f0' : 'white'
544
- }
545
- };
546
- },
547
- onRowSelectionChange: setRowSelection,
548
- onSortingChange: setSorting,
549
- enablePagination: enablePagination,
550
- enableBottomToolbar: false,
551
- enableExpanding: enableExpanding,
552
- // 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
553
- muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref6) {
554
- var row = _ref6.row;
555
- return hasSubRows && {
556
- checked: rowSelection[row.id] || false,
557
- indeterminate: false,
558
- onChange: function onChange() {
559
- var rowId = row.id.toString();
560
- setRowSelection(function (prev) {
561
- var newSelection = _objectSpread({}, prev);
562
- if (newSelection[rowId]) {
563
- // If the row is already selected, deselect it
564
- delete newSelection[rowId];
565
- } else {
566
- // If the row is not selected, select it
567
- newSelection[rowId] = true;
568
- }
569
- return newSelection;
570
- });
571
- }
572
- };
573
- },
574
- muiTableHeadProps: {
575
- className: 'grid-sticky-header'
576
- },
577
- muiTopToolbarProps: {
578
- className: 'grid-sticky-actions'
579
- }
580
- // renderToolbarAlertBannerContent: (e) => {
581
- // console.log(e);
582
- // return (
583
- // <div>
584
- // Hello
585
- // </div>
586
- // )}
587
- });
588
- return /*#__PURE__*/_react["default"].createElement(_xDatePickers.LocalizationProvider, {
589
- dateAdapter: _AdapterDateFns.AdapterDateFns
590
- }, open && /*#__PURE__*/_react["default"].createElement(_GridHelper["default"], {
591
- onClose: function onClose() {
592
- return setOpen(false);
593
- },
594
- open: open,
595
- title: gridHelper.title,
596
- content: gridHelper.content
597
- }), /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
598
- table: table
599
- }));
600
- };
601
- DataGrid.propTypes = {
602
- columns: _propTypes["default"].array.isRequired,
603
- // array of the data grid columns
604
- columnVisibilityState: _propTypes["default"].object,
605
- // object for column visibility state
606
- columnOrder: _propTypes["default"].array,
607
- // array for column order
608
- createRows: _propTypes["default"].array.isRequired,
609
- // array of the data grid data
610
- actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
611
- name: _propTypes["default"].string.isRequired,
612
- "function": _propTypes["default"].func.isRequired,
613
- tooltip: _propTypes["default"].string,
614
- color: _propTypes["default"].oneOf(['blue', 'red', 'green', 'yellow', 'orange', 'black', 'grey', 'teal', 'brown', 'violet', 'purple', 'olive', 'pink']),
615
- icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]).isRequired,
616
- selectionMode: _propTypes["default"].oneOf(['single', 'multi', 'always']),
617
- confirmMessage: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
618
- hasConfirmMessage: _propTypes["default"].bool
619
- })),
620
- // array of objects -> each object represents a single data grid action button
621
- hasExcelExport: _propTypes["default"].bool,
622
- // defines whether there is an export button for excel
623
- excelOption: _propTypes["default"].oneOf(['all', 'allRows', 'pageRows', 'selectedRows']),
624
- // defines the export excel option
625
- hasPdfExport: _propTypes["default"].bool,
626
- // defines whether there is an export button for pdf
627
- pdfOption: _propTypes["default"].oneOf(['all', 'allRows', 'pageRows', 'selectedRows']),
628
- // defines the export pdf option
629
- rowHeight: _propTypes["default"].number,
630
- // defines the row height
631
- globalFilterFn: _propTypes["default"].oneOf(['contains', 'fuzzy', 'between', 'equals', 'greaterThan', 'lessThan', 'notEquals', 'lessThanOrEqualTo', 'greaterThanOrEqualTo', 'empty', 'notEmpty', 'startsWith', 'endsWith', 'endsWith', 'betweenInclusive']),
632
- // defines the global filter option
633
- disableSelect: _propTypes["default"].bool,
634
- // defines whether the data grid has row selection (checkboxes)
635
- enableColumnFilterModes: _propTypes["default"].bool,
636
- // enables/disables column filtering modes
637
- pagination: _propTypes["default"].oneOf(['top', 'bottom', 'both']),
638
- // defines the pagination position
639
- itemsPerPage: _propTypes["default"].arrayOf(_propTypes["default"].number),
640
- // defines the number of rows per page
641
- selectData: _propTypes["default"].func,
642
- //
643
- rowKey: _propTypes["default"].string,
644
- //
645
- pageSize: _propTypes["default"].number,
646
- //
647
- enableMultiRowSelection: _propTypes["default"].bool,
648
- enableFullScreenToggle: _propTypes["default"].bool,
649
- enableDensityToggle: _propTypes["default"].bool,
650
- enableGlobalFilter: _propTypes["default"].bool,
651
- enableVirtualization: _propTypes["default"].bool,
652
- gridHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
653
- // defines the height of the grid content, can be a number like 600, or a string like '600px' or 'fit-content'
654
- gridHelper: _propTypes["default"].oneOfType([_propTypes["default"].shape({
655
- title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
656
- // title is required if gridHelper exists
657
- content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired // content is required if gridHelper exists
658
- }), _propTypes["default"].oneOf([null]) // Allow null as a valid value
659
- ]),
660
- disableRows: _propTypes["default"].array,
661
- selectAllMode: _propTypes["default"].string,
662
- hasClearFiltersBtn: _propTypes["default"].bool
663
- };
664
- var _default = exports["default"] = DataGrid; // DataGrid.defaultProps = {
665
- // hasExcelExport: false,
666
- // hasPdfExport: false,
667
- // excelOption: 'allRows',
668
- // pdfOption: 'allRows',
669
- // globalFilterFn: 'contains',
670
- // enableColumnFilterModes: true,
671
- // disableSelect: false,
672
- // pagination: 'both',
673
- // itemsPerPage: [10, 15, 20, 25],
674
- // rowHeight: 60,
675
- // };