@insticc/react-datagrid-2 1.1.15 → 1.1.17

package/build/wrapper/index.js

@@ -0,0 +1,931 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _materialReactTable = require("material-react-table");
+var _xDatePickers = require("@mui/x-date-pickers");
+var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+var _semanticUiReact = require("semantic-ui-react");
+var _material = require("@mui/material");
+var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
+var _ExportActions = _interopRequireDefault(require("./ExportActions"));
+var _ActionButton = _interopRequireWildcard(require("./ActionButton"));
+var _GridHelper = _interopRequireDefault(require("./utils/GridHelper"));
+var _gridFixedHeader = _interopRequireDefault(require("./utils/gridFixedHeader"));
+var _filters = require("./utils/filters");
+require("bootstrap/dist/css/bootstrap.min.css");
+require("semantic-ui-css/semantic.min.css");
+require("./styles/styles.css");
+var _DefaultCellTypes = require("./utils/DefaultCellTypes");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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."); }
+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; } }
+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; }
+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; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var DataGrid = function DataGrid(_ref) {
+  var columns = _ref.columns,
+    columnVisibilityState = _ref.columnVisibilityState,
+    columnOrder = _ref.columnOrder,
+    createRows = _ref.createRows,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? null : _ref$actions,
+    _ref$extraActions = _ref.extraActions,
+    extraActions = _ref$extraActions === void 0 ? null : _ref$extraActions,
+    _ref$hasExcelExport = _ref.hasExcelExport,
+    hasExcelExport = _ref$hasExcelExport === void 0 ? false : _ref$hasExcelExport,
+    _ref$hasPdfExport = _ref.hasPdfExport,
+    hasPdfExport = _ref$hasPdfExport === void 0 ? false : _ref$hasPdfExport,
+    _ref$rowHeight = _ref.rowHeight,
+    rowHeight = _ref$rowHeight === void 0 ? 75 : _ref$rowHeight,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
+    _ref$globalFilterFn = _ref.globalFilterFn,
+    globalFilterFn = _ref$globalFilterFn === void 0 ? 'contains' : _ref$globalFilterFn,
+    _ref$disableSelect = _ref.disableSelect,
+    disableSelect = _ref$disableSelect === void 0 ? false : _ref$disableSelect,
+    _ref$enableColumnFilt = _ref.enableColumnFilterModes,
+    enableColumnFilterModes = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? 'both' : _ref$pagination,
+    _ref$itemsPerPage = _ref.itemsPerPage,
+    itemsPerPage = _ref$itemsPerPage === void 0 ? [50, 100, 150] : _ref$itemsPerPage,
+    _ref$selectedIds = _ref.selectedIds,
+    selectedIds = _ref$selectedIds === void 0 ? [] : _ref$selectedIds,
+    selectData = _ref.selectData,
+    rowKey = _ref.rowKey,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 150 : _ref$pageSize,
+    _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
+    enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
+    _ref$enableFullScreen = _ref.enableFullScreenToggle,
+    enableFullScreenToggle = _ref$enableFullScreen === void 0 ? false : _ref$enableFullScreen,
+    _ref$enableDensityTog = _ref.enableDensityToggle,
+    enableDensityToggle = _ref$enableDensityTog === void 0 ? false : _ref$enableDensityTog,
+    _ref$enableGlobalFilt = _ref.enableGlobalFilter,
+    enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? false : _ref$enableGlobalFilt,
+    _ref$hasSubRows = _ref.hasSubRows,
+    hasSubRows = _ref$hasSubRows === void 0 ? false : _ref$hasSubRows,
+    _ref$enableExpanding = _ref.enableExpanding,
+    enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
+    _ref$enablePagination = _ref.enablePagination,
+    enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
+    _ref$enableTopToolbar = _ref.enableTopToolbar,
+    enableTopToolbar = _ref$enableTopToolbar === void 0 ? true : _ref$enableTopToolbar,
+    _ref$enableBottomTool = _ref.enableBottomToolbar,
+    enableBottomToolbar = _ref$enableBottomTool === void 0 ? false : _ref$enableBottomTool,
+    _ref$enableVirtualiza = _ref.enableVirtualization,
+    enableVirtualization = _ref$enableVirtualiza === void 0 ? false : _ref$enableVirtualiza,
+    _ref$enableFixedHeade = _ref.enableFixedHeader,
+    enableFixedHeader = _ref$enableFixedHeade === void 0 ? true : _ref$enableFixedHeade,
+    _ref$enableFixedActio = _ref.enableFixedActions,
+    enableFixedActions = _ref$enableFixedActio === void 0 ? false : _ref$enableFixedActio,
+    _ref$gridHeight = _ref.gridHeight,
+    gridHeight = _ref$gridHeight === void 0 ? 600 : _ref$gridHeight,
+    onVisibleRowsChange = _ref.onVisibleRowsChange,
+    updateCache = _ref.updateCache,
+    cacheUpdateText = _ref.cacheUpdateText,
+    cacheUpdating = _ref.cacheUpdating,
+    getRowStyle = _ref.getRowStyle,
+    _ref$gridHelper = _ref.gridHelper,
+    gridHelper = _ref$gridHelper === void 0 ? null : _ref$gridHelper,
+    _ref$disableRows = _ref.disableRows,
+    disableRows = _ref$disableRows === void 0 ? [] : _ref$disableRows,
+    _ref$selectAllMode = _ref.selectAllMode,
+    selectAllMode = _ref$selectAllMode === void 0 ? 'page' : _ref$selectAllMode,
+    _ref$hasClearFiltersB = _ref.hasClearFiltersBtn,
+    hasClearFiltersBtn = _ref$hasClearFiltersB === void 0 ? true : _ref$hasClearFiltersB,
+    _ref$hasClearSelectio = _ref.hasClearSelectionBtn,
+    hasClearSelectionBtn = _ref$hasClearSelectio === void 0 ? true : _ref$hasClearSelectio,
+    _ref$disableAllAction = _ref.disableAllActions,
+    disableAllActions = _ref$disableAllAction === void 0 ? false : _ref$disableAllAction,
+    _ref$disableSideActio = _ref.disableSideActions,
+    disableSideActions = _ref$disableSideActio === void 0 ? false : _ref$disableSideActio,
+    _ref$enableCompactSty = _ref.enableCompactStyleMode,
+    enableCompactStyleMode = _ref$enableCompactSty === void 0 ? false : _ref$enableCompactSty;
+  var _useState = (0, _react.useState)(selectedIds.reduce(function (a, v) {
+      return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, v, true));
+    }, {})),
+    _useState2 = _slicedToArray(_useState, 2),
+    rowSelection = _useState2[0],
+    setRowSelection = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sorting = _useState6[0],
+    setSorting = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    open = _useState8[0],
+    setOpen = _useState8[1];
+  //optionally access the underlying virtualizer instance
+  var rowVirtualizerInstanceRef = (0, _react.useRef)(null);
+  if (gridHelper && (!gridHelper.content || !gridHelper.title)) {
+    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.");
+  }
+
+  // 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) 
+  // so if is a subrow we need to go to the parent row and get the id that is on the position after the . 
+  // 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
+  var getSelectedRows = function getSelectedRows(rows) {
+    var data = createRows;
+    return Object.keys(rows).filter(function (key) {
+      return rows[key];
+    }).map(function (key) {
+      if (key.toString().includes('.')) {
+        // This is a subrow
+        var _key$split = key.split('.'),
+          _key$split2 = _slicedToArray(_key$split, 2),
+          parentId = _key$split2[0],
+          subRowIndex = _key$split2[1];
+        var parentRow = data[parseInt(parentId, 10)];
+        if (parentRow && parentRow.subRows) {
+          return parentRow.subRows[parseInt(subRowIndex, 10)];
+        }
+      } else {
+        // This is a parent row
+        return data[parseInt(key, 10)];
+      }
+      return null;
+    }).filter(function (row) {
+      return row;
+    });
+  };
+
+  // implemented to update selectedIds when props change
+  (0, _react.useEffect)(function () {
+    var currentSelectionIds = Object.keys(rowSelection);
+    // Check if the lengths are different or if any `selectedIds` are not in `rowSelection`
+    var isSelectionOutOfSync = selectedIds.length !== currentSelectionIds.length || selectedIds.some(function (id) {
+      return !rowSelection[id];
+    });
+    if (isSelectionOutOfSync) {
+      var newSelection = selectedIds.reduce(function (acc, id) {
+        acc[id] = true; // Set true for each id in selectedIds
+        return acc;
+      }, {});
+      setRowSelection(newSelection);
+    }
+  }, [selectedIds]);
+  (0, _react.useEffect)(function () {
+    if (hasSubRows) {
+      if (Object.keys(rowSelection).length > 0) {
+        selectData(getSelectedRows(rowSelection));
+      }
+    } else {
+      // DEPRECATED:
+      // selectData(table.getSelectedRowModel().rows.map(row => row.original));
+
+      var selectedRowIds = Object.keys(table.getState().rowSelection);
+      var selectedRows = selectedRowIds.map(function (rowId) {
+        var matchingRow = table.getSelectedRowModel().rows.find(function (row) {
+          return "".concat(row.id) === rowId;
+        });
+        return matchingRow ? matchingRow.original : null; // Return original if found
+      }).filter(function (row) {
+        return row !== null;
+      }); // Filter out any null values
+      selectData(selectedRows);
+    }
+  }, [rowSelection]);
+  (0, _react.useEffect)(function () {
+    if (typeof window !== 'undefined') {
+      setIsLoading(false);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    //scroll to the top of the table when the sorting changes
+    try {
+      var _rowVirtualizerInstan, _rowVirtualizerInstan2;
+      (_rowVirtualizerInstan = rowVirtualizerInstanceRef.current) === null || _rowVirtualizerInstan === void 0 || (_rowVirtualizerInstan2 = _rowVirtualizerInstan.scrollToIndex) === null || _rowVirtualizerInstan2 === void 0 || _rowVirtualizerInstan2.call(_rowVirtualizerInstan, 0);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [sorting]);
+
+  /**
+   * Creates the columns for the DataGrid and generates it's default properties.
+   * @param {Array} columns
+   * @returns the DataGrid columns.
+   */
+  var createColumns = function createColumns(columns) {
+    return columns.map(function (column) {
+      var _column$enableSorting, _column$enableColumnF, _column$enableColumnF2, _column$filterFn, _column$enableResizin, _column$grow, _column$enableClickTo, _column$enableColumnA;
+      return _objectSpread(_objectSpread({}, column), {}, {
+        enableSorting: (_column$enableSorting = column.enableSorting) !== null && _column$enableSorting !== void 0 ? _column$enableSorting : true,
+        enableColumnFilter: (_column$enableColumnF = column.enableColumnFilter) !== null && _column$enableColumnF !== void 0 ? _column$enableColumnF : true,
+        enableColumnFilterModes: (_column$enableColumnF2 = column.enableColumnFilterModes) !== null && _column$enableColumnF2 !== void 0 ? _column$enableColumnF2 : true,
+        filterFn: column.isDateColumn ? undefined : (_column$filterFn = column.filterFn) !== null && _column$filterFn !== void 0 ? _column$filterFn : 'contains',
+        enableResizing: (_column$enableResizin = column.enableResizing) !== null && _column$enableResizin !== void 0 ? _column$enableResizin : true,
+        grow: (_column$grow = column.grow) !== null && _column$grow !== void 0 ? _column$grow : true,
+        enableClickToCopy: (_column$enableClickTo = column.enableClickToCopy) !== null && _column$enableClickTo !== void 0 ? _column$enableClickTo : false,
+        enableColumnActions: (_column$enableColumnA = column.enableColumnActions) !== null && _column$enableColumnA !== void 0 ? _column$enableColumnA : false,
+        // sortingFn: --> basic default, datetime for date
+        sortingFn: column.sortingFn ? column.sortingFn : column.isDateColumn // Use custom sorting for date columns
+        ? function (rowA, rowB, columnId) {
+          var valueA = rowA.getValue(columnId);
+          var valueB = rowB.getValue(columnId);
+          // Parse values as timestamps or handle invalid dates
+          var dateA = valueA && !isNaN(new Date(valueA).getTime()) ? new Date(valueA).getTime() : null;
+          var dateB = valueB && !isNaN(new Date(valueB).getTime()) ? new Date(valueB).getTime() : null;
+          if (dateA === null && dateB === null) return 0; // Both null, equal
+          if (dateA === null) return 1; // Null values go last
+          if (dateB === null) return -1; // Null values go last
+          return dateA - dateB; // Compare by timestamp
+        } : 'basic',
+        // Use default sorting for non-date columns
+        Cell: function Cell(props) {
+          var content = props.cell.getValue();
+          var cellClass = column.cellClass,
+            CustomCell = column.Cell,
+            type = column.type;
+          var typeValue = type && _DefaultCellTypes.DEFAULT_CELL_TYPES[type] ? _DefaultCellTypes.DEFAULT_CELL_TYPES[type](props) : null;
+          if (typeValue) content = typeValue;
+          if (CustomCell) content = /*#__PURE__*/_react["default"].createElement(CustomCell, _extends({}, props, {
+            typeValue: typeValue
+          }));
+          if (cellClass) content = /*#__PURE__*/_react["default"].createElement("div", {
+            className: cellClass
+          }, content);
+          return content;
+        }
+      });
+    });
+  };
+  var renderTopToolbarCustomActions = function renderTopToolbarCustomActions(_ref2) {
+    var table = _ref2.table;
+    var selectedRows = table.getSelectedRowModel().flatRows;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '.5em',
+        width: '100%'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '.5em',
+        flexWrap: 'wrap'
+      }
+    }, (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actions.map(function (e) {
+      var isVisible = e.visible !== undefined ? e.visible : true;
+      if (isVisible) {
+        return /*#__PURE__*/_react["default"].createElement(_ActionButton["default"], {
+          table: table,
+          key: e.key || e.name,
+          toggle: e.toggle,
+          active: e.active,
+          name: e.name,
+          tooltip: e.tooltip,
+          onClick: e["function"],
+          icon: e.icon,
+          color: e.color,
+          selectionMode: e.selectionMode,
+          confirmMessage: e.confirmMessage,
+          hasConfirmMessage: e.hasConfirmMessage,
+          disabled: e.disabled
+        });
+      }
+    })), !disableSideActions && /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignSelf: 'flex-end',
+        justifyContent: 'end',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 3
+      }
+    }, (extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) > 0 && extraActions.map(function (a, idx) {
+      var _ref3 = a || {},
+        fnc = _ref3["function"],
+        content = _ref3.content,
+        _ref3$tooltip = _ref3.tooltip,
+        tooltip = _ref3$tooltip === void 0 ? '' : _ref3$tooltip,
+        icon = _ref3.icon,
+        _ref3$style = _ref3.style,
+        style = _ref3$style === void 0 ? {} : _ref3$style,
+        propsButton = _ref3.propsButton;
+      var defaultStyle = {
+        display: 'flex',
+        height: '36px',
+        alignItems: 'center',
+        justifyContent: 'center'
+      };
+      return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        key: "extraActions" + idx,
+        title: tooltip || content,
+        arrow: true
+      }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, _extends({
+        circular: true,
+        onClick: function onClick() {
+          return fnc ? fnc() : {};
+        },
+        content: content,
+        icon: (0, _ActionButton.renderIcon)(icon, tooltip || content),
+        style: _objectSpread(_objectSpread({}, defaultStyle), style)
+      }, propsButton))));
+    }), /*#__PURE__*/_react["default"].createElement(_ExportActions["default"], {
+      table: table,
+      data: createRows,
+      columns: columns,
+      hasExcelExport: hasExcelExport,
+      hasPdfExport: hasPdfExport
+    }), updateCache && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+      title: cacheUpdateText,
+      arrow: true
+    }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+      circular: true,
+      disabled: cacheUpdating,
+      onClick: function onClick() {
+        return updateCache();
+      },
+      content: /*#__PURE__*/_react["default"].createElement("img", {
+        src: cacheUpdating ? require('./images/cacheloading.png') : require('./images/cache.png'),
+        alt: "cache",
+        style: {
+          width: "60px"
+        }
+      }),
+      primary: true,
+      inverted: true,
+      style: {
+        display: 'flex',
+        height: '36px',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }))), hasClearSelectionBtn && (!disableSelect || disableRows.length > 0) && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+      title: "Clear all rows selected",
+      arrow: true
+    }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+      circular: true,
+      disabled: selectedRows.length < 1,
+      onClick: function onClick() {
+        return table.resetRowSelection();
+      },
+      content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+        style: {
+          margin: 0,
+          color: 'inherit'
+        },
+        name: "square outline"
+      }), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+        style: {
+          margin: 0,
+          color: 'inherit'
+        },
+        name: "close"
+      })),
+      primary: true,
+      basic: true
+      // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
+    }))), hasClearFiltersBtn && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+      title: "Clear Filters",
+      arrow: true
+    }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+      circular: true,
+      onClick: function onClick() {
+        return table.resetColumnFilters();
+      },
+      content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+        style: {
+          margin: 0,
+          color: 'inherit'
+        },
+        name: "filter"
+      }), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
+        style: {
+          margin: 0,
+          color: 'inherit'
+        },
+        name: "close"
+      })),
+      inverted: true,
+      color: "orange"
+      // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
+    }))), gridHelper && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+      title: "Grid Help",
+      arrow: true
+    }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, {
+      circular: true,
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      icon: "help",
+      color: "blue"
+      // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
+    }))))));
+  };
+
+  /**
+   * Generates all the table's properties.
+   */
+  var table = (0, _materialReactTable.useMaterialReactTable)(_objectSpread(_objectSpread({
+    data: createRows,
+    columns: createColumns(columns),
+    enableRowSelection: disableRows.length > 0 ? function (row) {
+      return !disableRows.includes(row.original[rowKey]);
+    } : !disableSelect,
+    enableSubRowSelection: hasSubRows,
+    enableMultiRowSelection: enableMultiRowSelection,
+    enableFullScreenToggle: enableFullScreenToggle,
+    enableDensityToggle: enableDensityToggle,
+    enableGlobalFilter: enableGlobalFilter,
+    enableGlobalFilterModes: false,
+    enableToolbarInternalActions: false,
+    positionToolbarAlertBanner: "none",
+    enableColumnPinning: true,
+    enableColumnResizing: true,
+    selectAllMode: selectAllMode,
+    autoResetPageIndex: false,
+    enableColumnVirtualization: enableVirtualization,
+    enableRowVirtualization: enableVirtualization,
+    rowVirtualizerInstanceRef: rowVirtualizerInstanceRef,
+    //optional
+    rowVirtualizerOptions: {
+      overscan: 5
+    },
+    //optionally customize the row virtualizer
+    columnVirtualizerOptions: {
+      overscan: columns.length
+    },
+    //optionally customize the column virtualizer
+    state: {
+      isLoading: isLoading,
+      sorting: sorting,
+      showColumnFilters: true,
+      showGlobalFilter: enableGlobalFilter,
+      rowSelection: rowSelection,
+      columnVisibility: columnVisibilityState || {} // Add column visibility state
+    },
+    initialState: {
+      // showColumnFilters: true,
+      pagination: {
+        pageSize: pageSize,
+        pageIndex: 0
+      },
+      columnOrder: columnOrder || [] // Add column order to initial state
+    },
+    columnResizeMode: 'onEnd',
+    enableColumnFilterModes: enableColumnFilterModes,
+    globalFilterFn: globalFilterFn,
+    positionPagination: pagination,
+    paginationDisplayMode: 'pages',
+    muiPaginationProps: {
+      rowsPerPageOptions: itemsPerPage
+    },
+    layoutMode: 'grid',
+    enableStickyHeader: true,
+    filterFns: {
+      regex: function regex(row, id, filterValue) {
+        var regex = null;
+        try {
+          regex = new RegExp(filterValue, 'gi');
+        } catch (e) {
+          return regex;
+        }
+        return regex.test(row.getValue(id));
+      },
+      logical: function logical(row, id, filterValue) {
+        var result = (0, _filters.logicalFilter)(row, id, filterValue);
+        return result;
+      }
+    },
+    localization: {
+      filterRegex: 'Regex',
+      filterLogical: 'Logical'
+    },
+    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref4) {
+      var internalFilterOptions = _ref4.internalFilterOptions,
+        onSelectFilterMode = _ref4.onSelectFilterMode;
+      return [/*#__PURE__*/_react["default"].createElement(_ColumnFilter["default"], {
+        key: "filters",
+        filterOptions: internalFilterOptions,
+        onSelectFilterMode: onSelectFilterMode
+      })];
+    },
+    renderTopToolbar: function renderTopToolbar(_ref5) {
+      var table = _ref5.table;
+      var selectedRows = table.getSelectedRowModel().flatRows;
+      var _table$getState$pagin = table.getState().pagination,
+        pageIndex = _table$getState$pagin.pageIndex,
+        pageSize = _table$getState$pagin.pageSize;
+      var filteredRowCount = table.getFilteredRowModel().rows.length;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '8px',
+          gap: '8px'
+        },
+        className: "grid-sticky-actions"
+      }, !disableAllActions && renderTopToolbarCustomActions && /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '100%'
+        }
+      }, renderTopToolbarCustomActions({
+        table: table
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          alignSelf: 'flex-end'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/_react["default"].createElement(_material.TablePagination, {
+        component: "div",
+        count: filteredRowCount,
+        page: 0,
+        onPageChange: function onPageChange() {},
+        rowsPerPage: pageSize,
+        onRowsPerPageChange: function onRowsPerPageChange(e) {
+          return table.setPageSize(Number(e.target.value));
+        },
+        rowsPerPageOptions: itemsPerPage,
+        labelDisplayedRows: function labelDisplayedRows() {
+          return "";
+        },
+        showFirstButton: false,
+        showLastButton: false,
+        sx: {
+          '& .MuiTablePagination-toolbar': {
+            padding: 0,
+            margin: 0,
+            gap: '4px'
+          },
+          '& *': {
+            margin: 0,
+            fontSize: '14px'
+          },
+          "& .MuiTablePagination-actions": {
+            display: "none"
+          }
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_material.Pagination, {
+        count: Math.ceil(filteredRowCount / pageSize),
+        page: pageIndex + 1,
+        onChange: function onChange(_, value) {
+          return table.setPageIndex(value - 1);
+        },
+        showFirstButton: true,
+        showLastButton: true
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          marginRight: '5px',
+          fontSize: '14px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        title: "Selected/Filtered/Total",
+        arrow: true
+      }, /*#__PURE__*/_react["default"].createElement("span", null, !disableSelect && "".concat(selectedRows.length, "/"), filteredRowCount, "/", createRows.length)))));
+    },
+    muiTableHeadProps: {
+      className: 'grid-sticky-header'
+    },
+    muiTableHeadCellProps: {
+      sx: _objectSpread({}, enableCompactStyleMode ? {
+        fontWeight: 'bold',
+        fontSize: "clamp(".concat(fontSize - 3, "px, 1.2vw, ").concat(fontSize + 1, "px)"),
+        borderRight: '1px solid #D7D7D7',
+        borderTop: '1px solid #D7D7D7',
+        padding: '7px',
+        margin: 0,
+        '& .Mui-TableHeadCell-ResizeHandle-Wrapper': {
+          padding: '0 !important',
+          width: '2px !important'
+        },
+        '& .MuiBox-root.css-17xkj1h': {
+          padding: '0 !important',
+          margin: '0 !important'
+        },
+        '& .MuiInputBase-root': {
+          fontSize: "clamp(".concat(fontSize - 4, "px, 1vw, ").concat(fontSize - 1, "px)"),
+          height: '17px',
+          padding: '0 2px',
+          width: '100%',
+          margin: 0
+        },
+        '& .MuiFormHelperText-root': {
+          fontSize: "clamp(".concat(fontSize - 4, "px, 0.9vw, ").concat(fontSize - 2, "px)")
+        },
+        '& .MuiCollapse-root': {
+          maxHeight: enableColumnFilterModes ? '37px' : '17px'
+        }
+      } : {
+        fontWeight: 'bold',
+        // fontSize: '11px',
+        fontSize: '14px',
+        borderRight: '1px solid #D7D7D7',
+        borderTop: '1px solid #D7D7D7',
+        padding: 'auto'
+      })
+    },
+    muiTableBodyCellProps: function muiTableBodyCellProps(_ref6) {
+      var row = _ref6.row;
+      var isDisabled = disableRows.length > 0 ? disableRows.includes(row.original[rowKey]) : false;
+      return {
+        sx: _objectSpread(_objectSpread({
+          fontWeight: row.getIsSelected() ? "bold" : "normal",
+          backgroundColor: isDisabled ? "#e3e3e3" : row.depth === 1 ? "lightgrey" : row.depth === 2 ? "grey" : "white",
+          borderRight: "1px solid #D7D7D7",
+          minHeight: rowHeight
+        }, enableCompactStyleMode ? {
+          padding: '2px',
+          paddingLeft: row.depth ? "".concat(row.depth * 7, " px") : '7px',
+          boxSizing: 'border-box',
+          fontSize: "clamp(".concat(fontSize - 3, "px, 1.1vw, ").concat(fontSize, "px)"),
+          whiteSpace: 'nowrap'
+        } : {
+          padding: "auto",
+          paddingLeft: row.depth ? "".concat(row.depth * 15, "px") : "12px",
+          boxSizing: "border-box"
+        }), getRowStyle && getRowStyle({
+          row: row
+        }))
+      };
+    },
+    muiTableContainerProps: {
+      sx: {
+        maxHeight: gridHeight
+      }
+    },
+    defaultDisplayColumn: {
+      enableResizing: true
+    },
+    defaultColumn: {
+      maxSize: 800,
+      // minSize: 50,
+      minSize: 15,
+      muiFilterCheckboxProps: {
+        sx: {
+          minWidth: 50
+        }
+      }
+    },
+    displayColumnDefOptions: {
+      'mrt-row-select': {
+        size: 60,
+        minSize: 10,
+        header: '',
+        muiTableBodyCellProps: {
+          sx: {
+            justifyContent: 'center',
+            borderRight: '1px solid #D7D7D7'
+          }
+        },
+        muiTableHeadCellProps: {
+          sx: _objectSpread(_objectSpread({}, enableCompactStyleMode ? {
+            fontSize: "".concat(fontSize, " px"),
+            justifyContent: 'center'
+          } : {
+            fontSize: '14px'
+          }), {}, {
+            padding: enableMultiRowSelection ? '0 8px' : '0 19px',
+            fontWeight: 'bold',
+            borderRight: '1px solid #D7D7D7',
+            borderTop: '1px solid #D7D7D7'
+          })
+        }
+      },
+      'mrt-row-expand': {
+        size: 25,
+        minSize: 10,
+        muiTableBodyCellProps: {
+          sx: {
+            justifyContent: 'center',
+            borderRight: '1px solid #D7D7D7'
+          }
+        },
+        muiTableHeadCellProps: {
+          sx: {
+            borderRight: '1px solid #D7D7D7',
+            borderTop: '1px solid #D7D7D7'
+          }
+        }
+      }
+    },
+    getRowId: function getRowId(originalRow) {
+      return originalRow[rowKey];
+    },
+    getRowProps: function getRowProps(row) {
+      var _row$original;
+      return {
+        style: {
+          backgroundColor: (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.isSubRow ? '#f0f0f0' : 'white'
+        }
+      };
+    },
+    onRowSelectionChange: setRowSelection
+  }, !disableSelect && {
+    muiTableBodyRowProps: function muiTableBodyRowProps(_ref7) {
+      var row = _ref7.row;
+      return {
+        onClick: function onClick(event) {
+          event.preventDefault();
+          var rowId = row.id;
+          setRowSelection(function (prev) {
+            return prev[rowId] ? {} : _defineProperty({}, rowId, true);
+          });
+        },
+        sx: {
+          cursor: 'pointer',
+          backgroundColor: row.depth > 0 ? '#f0f0f0' : 'white'
+        }
+      };
+    }
+  }), {}, {
+    onSortingChange: setSorting,
+    enablePagination: enablePagination,
+    enableTopToolbar: enableTopToolbar,
+    enableBottomToolbar: enableBottomToolbar,
+    enableExpanding: enableExpanding,
+    // 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
+    muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref9) {
+      var row = _ref9.row;
+      return hasSubRows && {
+        checked: rowSelection[row.id] || false,
+        indeterminate: false,
+        onChange: function onChange() {
+          var rowId = row.id.toString();
+          setRowSelection(function (prev) {
+            var newSelection = _objectSpread({}, prev);
+            if (newSelection[rowId]) {
+              // If the row is already selected, deselect it
+              delete newSelection[rowId];
+            } else {
+              // If the row is not selected, select it
+              newSelection[rowId] = true;
+            }
+            return newSelection;
+          });
+        }
+      };
+    }
+    // renderToolbarAlertBannerContent: (e) => {
+    //   console.log(e);
+    //   return (
+    //     <div>
+    //       Hello
+    //     </div>
+    // )}
+  }));
+  (0, _react.useEffect)(function () {
+    var rows = table.getRowModel().rows.map(function (r) {
+      return r.original;
+    });
+    onVisibleRowsChange === null || onVisibleRowsChange === void 0 || onVisibleRowsChange(rows);
+  }, [table.getRowModel().rows]);
+  (0, _react.useEffect)(function () {
+    return enableFixedHeader && (0, _gridFixedHeader["default"])('fixed-header', enableFixedActions);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_xDatePickers.LocalizationProvider, {
+    dateAdapter: _AdapterDateFns.AdapterDateFns
+  }, open && /*#__PURE__*/_react["default"].createElement(_GridHelper["default"], {
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    open: open,
+    title: gridHelper.title,
+    content: gridHelper.content
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "fixed-header"
+  }, /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
+    table: table
+  })));
+};
+DataGrid.propTypes = {
+  columns: _propTypes["default"].array.isRequired,
+  // array of the data grid columns
+  columnVisibilityState: _propTypes["default"].object,
+  // object for column visibility state
+  columnOrder: _propTypes["default"].array,
+  // array for column order
+  createRows: _propTypes["default"].array.isRequired,
+  // array of the data grid data
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    name: _propTypes["default"].string,
+    "function": _propTypes["default"].func.isRequired,
+    tooltip: _propTypes["default"].string,
+    color: _propTypes["default"].oneOf(['blue', 'red', 'green', 'yellow', 'orange', 'black', 'grey', 'teal', 'brown', 'violet', 'purple', 'olive', 'pink']),
+    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    selectionMode: _propTypes["default"].oneOf(['single', 'multi', 'always']),
+    confirmMessage: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    hasConfirmMessage: _propTypes["default"].bool
+  })),
+  // array of objects -> each object represents a single data grid action button
+  extraActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    tooltip: _propTypes["default"].string,
+    "function": _propTypes["default"].func.isRequired,
+    content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
+    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    style: _propTypes["default"].object,
+    propsButton: _propTypes["default"].object
+  })),
+  // array of objects -> each object represents a single data grid extra action button
+  hasExcelExport: _propTypes["default"].bool,
+  // defines whether there is an export button for excel
+  hasPdfExport: _propTypes["default"].bool,
+  // defines whether there is an export button for pdf
+  rowHeight: _propTypes["default"].number,
+  // defines the row height
+  fontSize: _propTypes["default"].number,
+  // defines the font size
+  globalFilterFn: _propTypes["default"].oneOf(['contains', 'fuzzy', 'between', 'equals', 'greaterThan', 'lessThan', 'notEquals', 'lessThanOrEqualTo', 'greaterThanOrEqualTo', 'empty', 'notEmpty', 'startsWith', 'endsWith', 'endsWith', 'betweenInclusive']),
+  // defines the global filter option
+  disableSelect: _propTypes["default"].bool,
+  // defines whether the data grid has row selection (checkboxes)
+  enableColumnFilterModes: _propTypes["default"].bool,
+  // enables/disables column filtering modes
+  hasClearFiltersBtn: _propTypes["default"].bool,
+  // Defines whether there is an clear filters button
+  pagination: _propTypes["default"].oneOf(['top', 'bottom', 'both']),
+  // defines the pagination position
+  itemsPerPage: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  // defines the number of rows per page
+  selectData: _propTypes["default"].func,
+  //
+  rowKey: _propTypes["default"].string,
+  //
+  pageSize: _propTypes["default"].number,
+  //
+  enableMultiRowSelection: _propTypes["default"].bool,
+  enableFullScreenToggle: _propTypes["default"].bool,
+  enableDensityToggle: _propTypes["default"].bool,
+  enableGlobalFilter: _propTypes["default"].bool,
+  enableTopToolbar: _propTypes["default"].bool,
+  // Defines whether there is top toolbar
+  enableBottomToolbar: _propTypes["default"].bool,
+  // Defines whether there is bottom toolbar
+  enablePagination: _propTypes["default"].bool,
+  // Defines whether there is an pagination
+  enableVirtualization: _propTypes["default"].bool,
+  gridHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  // defines the height of the grid content, can be a number like 600, or a string like '600px' or 'fit-content'
+  gridHelper: _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
+    // title is required if gridHelper exists
+    content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired // content is required if gridHelper exists
+  }), _propTypes["default"].oneOf([null]) // Allow null as a valid value
+  ]),
+  disableRows: _propTypes["default"].array,
+  selectAllMode: _propTypes["default"].string,
+  onVisibleRowsChange: _propTypes["default"].func,
+  // Function called with the currently visible rows whenever the table updates its visible row model.
+  enableFixedHeader: _propTypes["default"].bool,
+  // Defines whether headers are pinned to the top
+  enableFixedActions: _propTypes["default"].bool,
+  // Defines whether action buttons are pinned to the top
+  updateCache: _propTypes["default"].func,
+  // Function triggered when the cache update button is clicked.
+  cacheUpdateText: _propTypes["default"].string,
+  // Tooltip text shown on hover over the cache update button.
+  cacheUpdating: _propTypes["default"].bool,
+  // Indicates whether a cache update is currently in progress.
+  getRowStyle: _propTypes["default"].func,
+  // Function that defines custom styles for each row.
+  enableCompactStyleMode: _propTypes["default"].bool,
+  // Enables/disables the compact style mode
+  hasClearSelectionBtn: _propTypes["default"].bool,
+  // Defines whether there is an clear selection button
+  disableAllActions: _propTypes["default"].bool,
+  // Defines whether the Top Toolbar has all actions
+  disableSideActions: _propTypes["default"].bool // Defines whether the Top Toolbar has side actions
+};
+var _default = exports["default"] = DataGrid; // DataGrid.defaultProps = {
+//   hasExcelExport: false,
+//   hasPdfExport: false,
+//   globalFilterFn: 'contains',
+//   enableColumnFilterModes: true,
+//   disableSelect: false,
+//   pagination: 'both',
+//   itemsPerPage: [10, 15, 20, 25],
+//   rowHeight: 60,
+// };