@insticc/react-datagrid-2 1.1.10 → 1.1.12

package/build/wrapper/ActionButton.js

@@ -21,13 +21,18 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var ActionButton = function ActionButton(_ref) {
   var table = _ref.table,
+    _ref$toggle = _ref.toggle,
+    toggle = _ref$toggle === void 0 ? false : _ref$toggle,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? '' : _ref$name,
     tooltip = _ref.tooltip,
     onClick = _ref.onClick,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'blue' : _ref$color,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
     _ref$selectionMode = _ref.selectionMode,
     selectionMode = _ref$selectionMode === void 0 ? 'always' : _ref$selectionMode,
     _ref$confirmMessage = _ref.confirmMessage,
@@ -129,6 +134,8 @@ var ActionButton = function ActionButton(_ref) {
     title: tooltip || name,
     arrow: true
   }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Button, _extends({
+    toggle: toggle,
+    active: active,
     disabled: disabled || shouldDisableActionButton(table),
     onClick: function onClick() {
       return hasConfirmMessage ? setEnableConfirmMessage(true) : handleConfirm();
@@ -137,7 +144,7 @@ var ActionButton = function ActionButton(_ref) {
   }, name ? {
     content: name
   } : {}, {
-    basic: true,
+    basic: !active,
     color: color,
     style: {
       display: 'flex',
@@ -189,7 +196,7 @@ ActionButton.propTypes = {
   // the callback to be called when the action button is clicked
   color: _propTypes["default"].oneOf(['blue', 'red', 'green', 'yellow', 'orange', 'black', 'grey', 'purple', 'teal', 'brown', 'violet', 'purple', 'olive', 'pink']),
   // the color of the action button
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]).isRequired,
+  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
   // the action button icon
   selectionMode: _propTypes["default"].oneOf(['single', 'multi', 'always']),
   // the action button selection mode

package/build/wrapper/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireWildcard(require("prop-types"));
+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");
@@ -16,6 +16,7 @@ var _ColumnFilter = _interopRequireDefault(require("./ColumnFilter"));
 var _ExportActions = _interopRequireDefault(require("./ExportActions"));
 var _ActionButton = _interopRequireDefault(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");
@@ -39,7 +40,8 @@ var DataGrid = function DataGrid(_ref) {
     columnVisibilityState = _ref.columnVisibilityState,
     columnOrder = _ref.columnOrder,
     createRows = _ref.createRows,
-    actions = _ref.actions,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? null : _ref$actions,
     _ref$hasExcelExport = _ref.hasExcelExport,
     hasExcelExport = _ref$hasExcelExport === void 0 ? false : _ref$hasExcelExport,
     _ref$excelOption = _ref.excelOption,
@@ -50,6 +52,8 @@ var DataGrid = function DataGrid(_ref) {
     pdfOption = _ref$pdfOption === void 0 ? 'selectedRows' : _ref$pdfOption,
     _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,
@@ -80,10 +84,21 @@ var DataGrid = function DataGrid(_ref) {
     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 ? false : _ref$enableFixedHeade,
     _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,
@@ -91,7 +106,9 @@ var DataGrid = function DataGrid(_ref) {
     _ref$selectAllMode = _ref.selectAllMode,
     selectAllMode = _ref$selectAllMode === void 0 ? 'page' : _ref$selectAllMode,
     _ref$hasClearFiltersB = _ref.hasClearFiltersBtn,
-    hasClearFiltersBtn = _ref$hasClearFiltersB === void 0 ? true : _ref$hasClearFiltersB;
+    hasClearFiltersBtn = _ref$hasClearFiltersB === void 0 ? true : _ref$hasClearFiltersB,
+    _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));
     }, {})),
@@ -234,6 +251,150 @@ var DataGrid = function DataGrid(_ref) {
       });
     });
   };
+  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
+        });
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_ExportActions["default"], {
+      table: table,
+      data: createRows,
+      columns: columns,
+      hasExcelExport: hasExcelExport,
+      hasPdfExport: hasPdfExport,
+      pdfOption: pdfOption,
+      excelOption: excelOption
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignSelf: 'flex-end',
+        justifyContent: 'end',
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      }
+    }, 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'
+      }
+    }))), (!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.
    */
@@ -312,164 +473,161 @@ var DataGrid = function DataGrid(_ref) {
       filterRegex: 'Regex',
       filterLogical: 'Logical'
     },
-    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref2) {
-      var internalFilterOptions = _ref2.internalFilterOptions,
-        onSelectFilterMode = _ref2.onSelectFilterMode;
+    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref3) {
+      var internalFilterOptions = _ref3.internalFilterOptions,
+        onSelectFilterMode = _ref3.onSelectFilterMode;
       return [/*#__PURE__*/_react["default"].createElement(_ColumnFilter["default"], {
         key: "filters",
         filterOptions: internalFilterOptions,
         onSelectFilterMode: onSelectFilterMode
       })];
     },
-    renderTopToolbarCustomActions: function renderTopToolbarCustomActions(_ref3) {
-      var table = _ref3.table;
+    renderTopToolbar: function renderTopToolbar(_ref4) {
+      var table = _ref4.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',
-          gap: '.5em',
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+          padding: '8px',
+          gap: '8px'
+        },
+        className: "grid-sticky-actions"
+      }, renderTopToolbarCustomActions && /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          display: 'flex',
-          flexDirection: 'row',
-          gap: '.5em',
-          flexWrap: 'wrap'
-        }
-      }, actions && 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,
-            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
-          });
+          width: '100%'
         }
-      }), /*#__PURE__*/_react["default"].createElement(_ExportActions["default"], {
-        table: table,
-        data: createRows,
-        columns: columns,
-        hasExcelExport: hasExcelExport,
-        hasPdfExport: hasPdfExport,
-        pdfOption: pdfOption,
-        excelOption: excelOption
+      }, renderTopToolbarCustomActions({
+        table: table
       })), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           display: 'flex',
-          flexDirection: 'row'
+          alignItems: 'center',
+          gap: '8px',
+          alignSelf: 'flex-end'
         }
-      }, (!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();
+      }, /*#__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));
         },
-        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();
+        rowsPerPageOptions: itemsPerPage,
+        labelDisplayedRows: function labelDisplayedRows() {
+          return "";
         },
-        content: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
-          style: {
+        showFirstButton: false,
+        showLastButton: false,
+        sx: {
+          '& .MuiTablePagination-toolbar': {
+            padding: 0,
             margin: 0,
-            color: 'inherit'
+            gap: '4px'
           },
-          name: "filter"
-        }), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
-          style: {
+          '& *': {
             margin: 0,
-            color: 'inherit'
+            fontSize: '14px'
           },
-          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);
+          "& .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);
         },
-        icon: "help",
-        color: "blue"
-        // style={{ display: 'flex', height: '40px', alignItems: 'center', justifyContent: 'center' }}
-      }))))), /*#__PURE__*/_react["default"].createElement("div", {
+        showFirstButton: true,
+        showLastButton: true
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          alignSelf: 'flex-end',
-          marginRight: '5px'
+          marginRight: '5px',
+          fontSize: '14px'
         }
       }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: "Selected/Filtered/Total",
         arrow: true
-      }, /*#__PURE__*/_react["default"].createElement("span", null, selectedRows.length, "/", table.getFilteredRowModel().rows.length, "/", createRows.length))));
+      }, /*#__PURE__*/_react["default"].createElement("span", null, !disableSelect && "".concat(selectedRows.length, "/"), filteredRowCount, "/", createRows.length)))));
+    },
+    muiTableHeadProps: {
+      className: 'grid-sticky-header'
     },
     muiTableHeadCellProps: {
-      sx: {
+      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(_ref4) {
-      var row = _ref4.row;
+    muiTableBodyCellProps: function muiTableBodyCellProps(_ref5) {
+      var row = _ref5.row;
       var isDisabled = disableRows.length > 0 ? disableRows.includes(row.original[rowKey]) : false;
       return {
-        sx: {
+        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",
-          height: rowHeight,
           paddingLeft: row.depth ? "".concat(row.depth * 15, "px") : "12px",
           boxSizing: "border-box"
-        }
+        }), getRowStyle && getRowStyle({
+          row: row
+        }))
       };
     },
-    muiTableBodyRowProps: function muiTableBodyRowProps(_ref5) {
-      var row = _ref5.row;
+    muiTableBodyRowProps: function muiTableBodyRowProps(_ref6) {
+      var row = _ref6.row;
       return {
         style: {
           backgroundColor: row.depth > 0 ? '#f0f0f0' : 'white'
@@ -506,14 +664,17 @@ var DataGrid = function DataGrid(_ref) {
           }
         },
         muiTableHeadCellProps: {
-          sx: {
-            fontWeight: 'bold',
-            // fontSize: '11px',
+          sx: _objectSpread(_objectSpread({}, enableCompactStyleMode ? {
+            fontSize: "".concat(fontSize, " px"),
+            justifyContent: 'center'
+          } : {
             fontSize: '14px',
-            borderRight: '1px solid #D7D7D7',
-            borderTop: '1px solid #D7D7D7',
             padding: enableMultiRowSelection && '0 18px'
-          }
+          }), {}, {
+            fontWeight: 'bold',
+            borderRight: '1px solid #D7D7D7',
+            borderTop: '1px solid #D7D7D7'
+          })
         }
       },
       'mrt-row-expand': {
@@ -547,11 +708,12 @@ var DataGrid = function DataGrid(_ref) {
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     enablePagination: enablePagination,
-    enableBottomToolbar: false,
+    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(_ref6) {
-      var row = _ref6.row;
+    muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref7) {
+      var row = _ref7.row;
       return hasSubRows && {
         checked: rowSelection[row.id] || false,
         indeterminate: false,
@@ -570,12 +732,6 @@ var DataGrid = function DataGrid(_ref) {
           });
         }
       };
-    },
-    muiTableHeadProps: {
-      className: 'grid-sticky-header'
-    },
-    muiTopToolbarProps: {
-      className: 'grid-sticky-actions'
     }
     // renderToolbarAlertBannerContent: (e) => {
     //   console.log(e);
@@ -585,6 +741,15 @@ var DataGrid = function DataGrid(_ref) {
     //     </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 (0, _gridFixedHeader["default"])('fixed-header', enableFixedHeader);
+  }, []);
   return /*#__PURE__*/_react["default"].createElement(_xDatePickers.LocalizationProvider, {
     dateAdapter: _AdapterDateFns.AdapterDateFns
   }, open && /*#__PURE__*/_react["default"].createElement(_GridHelper["default"], {
@@ -594,9 +759,11 @@ var DataGrid = function DataGrid(_ref) {
     open: open,
     title: gridHelper.title,
     content: gridHelper.content
-  }), /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "fixed-header"
+  }, /*#__PURE__*/_react["default"].createElement(_materialReactTable.MaterialReactTable, {
     table: table
-  }));
+  })));
 };
 DataGrid.propTypes = {
   columns: _propTypes["default"].array.isRequired,
@@ -612,7 +779,7 @@ DataGrid.propTypes = {
     "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]).isRequired,
+    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
@@ -628,12 +795,16 @@ DataGrid.propTypes = {
   // defines the export pdf option
   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),
@@ -648,6 +819,12 @@ DataGrid.propTypes = {
   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'
@@ -659,7 +836,19 @@ DataGrid.propTypes = {
   ]),
   disableRows: _propTypes["default"].array,
   selectAllMode: _propTypes["default"].string,
-  hasClearFiltersBtn: _propTypes["default"].bool
+  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 action buttons and headers 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
 };
 var _default = exports["default"] = DataGrid; // DataGrid.defaultProps = {
 //   hasExcelExport: false,

package/build/wrapper/styles/styles.css

@@ -12,4 +12,20 @@
 .clearFilter:hover {
   background-color: #ff8c18;
   /* box-shadow: 0 0 0 1px rgb(206, 145, 0); */
+}
+
+.fixed-position {
+  position: fixed !important;
+  z-Index: 99 !important;
+  width: calc(100% - 50px) !important;
+  background-color: white !important;
+  top: 0 !important;
+}
+
+.fixed-actions {
+  position: fixed !important;
+  z-Index: 99 !important;
+  width: calc(100% - 50px) !important;
+  background-color: white !important;
+  top: 70px !important;
 }

package/build/wrapper/utils/gridFixedHeader.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = gridFixedHeader;
+/**
+ * Makes a MUI-DataGrid header – and optionally its toolbar – stick to the top
+ * once the page is scrolled past a given point.
+ *
+ * @param {string|null} referenceDiv – id of a wrapper element whose top edge defines the sticky offset.
+ * @param {boolean} fixedGridActions – if true, also pin the toolbar (class "Mui-ToolbarDropZone").
+ *
+ * @returns {Function} cleanup – call if you need to remove the scroll listener.
+ */
+function gridFixedHeader(referenceDiv) {
+  var fixedGridActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var cssClassName = 'fixed-position';
+  var gridHeaderRowClassName = 'grid-sticky-header';
+  var cssActionsClassName = 'fixed-actions';
+  var gridToolbarClassName = 'grid-sticky-actions';
+  var handleScroll = function handleScroll() {
+    var _refEl$getBoundingCli;
+    var refEl = referenceDiv ? document.getElementById(referenceDiv) : null;
+    var headerEl = (refEl !== null && refEl !== void 0 ? refEl : document).getElementsByClassName(gridHeaderRowClassName)[0];
+    var toolbarEl = fixedGridActions ? (refEl !== null && refEl !== void 0 ? refEl : document).getElementsByClassName(gridToolbarClassName)[0] : null;
+    if (!headerEl) return;
+    var offset = referenceDiv ? window.scrollY + ((_refEl$getBoundingCli = refEl === null || refEl === void 0 ? void 0 : refEl.getBoundingClientRect().top) !== null && _refEl$getBoundingCli !== void 0 ? _refEl$getBoundingCli : 0) : 270;
+    if (window.scrollY > offset) {
+      headerEl.classList.add(cssClassName);
+      toolbarEl === null || toolbarEl === void 0 || toolbarEl.classList.add(cssActionsClassName);
+      var spacer = ((toolbarEl === null || toolbarEl === void 0 ? void 0 : toolbarEl.offsetHeight) || 0) + ((headerEl === null || headerEl === void 0 ? void 0 : headerEl.offsetHeight) || 0);
+      (refEl !== null && refEl !== void 0 ? refEl : document.body).style.paddingTop = "".concat(spacer, "px");
+    } else {
+      headerEl.classList.remove(cssClassName);
+      toolbarEl === null || toolbarEl === void 0 || toolbarEl.classList.remove(cssActionsClassName);
+      (refEl !== null && refEl !== void 0 ? refEl : document.body).style.paddingTop = '';
+    }
+  };
+  window.addEventListener('scroll', handleScroll, {
+    passive: true
+  });
+  handleScroll();
+  return function () {
+    return window.removeEventListener('scroll', handleScroll);
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/react-datagrid-2",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "",
   "main": "build/index.js",
   "scripts": {
@@ -35,6 +35,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/x-data-grid": "^7.1.0",
     "@mui/x-date-pickers": "^7.1.0",
+    "babel": "^6.23.0",
     "bootstrap": "^5.3.3",
     "date-fns": "^2.29.3",
     "jspdf": "^2.5.1",