@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/DataGrid.js

@@ -49,32 +49,18 @@ var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 
 var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 const MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
 exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = MULTI_SELECT_CHECKBOX_COL_WIDTH;
 
 function evaluateTableCellWidth(multiSelect, column, columnCount) {
   let width = column.attributes['width'];
-  return multiSelect === true ? "calc(" + (typeof width !== 'undefined' ? width : 100 / columnCount + "%") + " - " + MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount + "px)" : typeof width !== 'undefined' ? width : 100 / columnCount + "%";
+  return multiSelect === true ? 'calc(' + (typeof width !== 'undefined' ? width : 100 / columnCount + '%') + ' - ' + MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount + 'px)' : typeof width !== 'undefined' ? width : 100 / columnCount + '%';
 }
 
 function desc(a, b, orderBy) {
@@ -127,13 +113,13 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
   },
   tableSelected: {
     backgroundColor: _colors.grey300,
-    "&:hover": {
-      background: "#f1f1f1"
+    '&:hover': {
+      background: '#f1f1f1'
     }
   },
   tableRow: {
-    "&:hover": {
-      background: "#f1f1f1"
+    '&:hover': {
+      background: '#f1f1f1'
     }
   },
   tableWrapper: {
@@ -157,82 +143,43 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
 const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
 
-  const _React$useState = _react.default.useState('desc'),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        order = _React$useState2[0],
-        setOrder = _React$useState2[1];
-
-  const _React$useState3 = _react.default.useState(null),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        config = _React$useState4[0],
-        setConfig = _React$useState4[1];
-
-  const _React$useState5 = _react.default.useState('id'),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        orderBy = _React$useState6[0],
-        setOrderBy = _React$useState6[1];
-
-  const _React$useState7 = _react.default.useState([]),
-        _React$useState8 = _slicedToArray(_React$useState7, 2),
-        selected = _React$useState8[0],
-        setSelected = _React$useState8[1];
-
-  const _React$useState9 = _react.default.useState(0),
-        _React$useState10 = _slicedToArray(_React$useState9, 2),
-        totalNumberOfRows = _React$useState10[0],
-        setTotalNumberOfRows = _React$useState10[1];
-
-  const _React$useState11 = _react.default.useState({}),
-        _React$useState12 = _slicedToArray(_React$useState11, 1),
-        criteria = _React$useState12[0];
-
-  const _React$useState13 = _react.default.useState(0),
-        _React$useState14 = _slicedToArray(_React$useState13, 2),
-        page = _React$useState14[0],
-        setPage = _React$useState14[1];
-
-  const _React$useState15 = _react.default.useState(!_Utils.default.isNull(props.rows) ? props.rows : []),
-        _React$useState16 = _slicedToArray(_React$useState15, 2),
-        rows = _React$useState16[0],
-        setRows = _React$useState16[1];
-
-  const _React$useState17 = _react.default.useState([]),
-        _React$useState18 = _slicedToArray(_React$useState17, 2),
-        deletedRows = _React$useState18[0],
-        setDeletedRows = _React$useState18[1];
-
-  const _React$useState19 = _react.default.useState(false),
-        _React$useState20 = _slicedToArray(_React$useState19, 2),
-        editable = _React$useState20[0],
-        setEditable = _React$useState20[1];
-
-  const _React$useState21 = _react.default.useState(0),
-        _React$useState22 = _slicedToArray(_React$useState21, 2),
-        scrollWidth = _React$useState22[0],
-        setScrollWidth = _React$useState22[1];
-
-  const _React$useState23 = _react.default.useState([15, 30, 45, 60, 75]),
-        _React$useState24 = _slicedToArray(_React$useState23, 1),
-        rowsPerPageOptions = _React$useState24[0];
-
-  const _React$useState25 = _react.default.useState(props.config.pageSize),
-        _React$useState26 = _slicedToArray(_React$useState25, 2),
-        rowsPerPage = _React$useState26[0],
-        setRowsPerPage = _React$useState26[1];
-
-  const _React$useState27 = _react.default.useState([]),
-        _React$useState28 = _slicedToArray(_React$useState27, 1),
-        cells = _React$useState28[0];
-
-  const actionsToolbar = props.actionsToolbar;
-
-  const _React$useState29 = _react.default.useState({}),
-        _React$useState30 = _slicedToArray(_React$useState29, 1),
-        headingHandle = _React$useState30[0];
-
-  const _React$useState31 = _react.default.useState({}),
-        _React$useState32 = _slicedToArray(_React$useState31, 1),
-        filterHandle = _React$useState32[0];
+  const [order, setOrder] = _react.default.useState('desc');
+
+  const [config] = _react.default.useState(_Utils.default.parseConfig(props.config, props.viewId));
+
+  const [orderBy, setOrderBy] = _react.default.useState('id');
+
+  const [selected, setSelected] = _react.default.useState([]);
+
+  const [totalNumberOfRows, setTotalNumberOfRows] = _react.default.useState(0);
+
+  const [criteria] = _react.default.useState({});
+
+  const [page, setPage] = _react.default.useState(0);
+
+  const [rows, setRows] = _react.default.useState(!_Utils.default.isNull(props.rows) ? props.rows : []);
+
+  const [deletedRows, setDeletedRows] = _react.default.useState([]);
+
+  const [editable, setEditable] = _react.default.useState(false);
+
+  const [scrollWidth, setScrollWidth] = _react.default.useState(0);
+
+  const [rowsPerPageOptions] = _react.default.useState([15, 30, 45, 60, 75]);
+
+  const [rowsPerPageLoading, setRowsPerPageLoading] = _react.default.useState(true);
+
+  const [rowsPerPage, setRowsPerPage] = _react.default.useState(props.config.pageSize);
+
+  const [cells] = _react.default.useState([]);
+
+  const {
+    actionsToolbar
+  } = props;
+
+  const [headingHandle] = _react.default.useState({});
+
+  const [filterHandle] = _react.default.useState({});
 
   const rowCount = _react.default.useRef(-1);
 
@@ -281,41 +228,21 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         let children = [];
 
         if (!_Utils.default.isNull(headingHandle.api)) {
-          var _iterator = _createForOfIteratorHelper(headingHandle.api.getChildren()),
-              _step;
-
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              const child = _step.value;
-              children.push(child);
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
+          for (const child of headingHandle.api.getChildren()) {
+            children.push(child);
           }
         }
 
         if (!_Utils.default.isNull(filterHandle.api)) {
-          var _iterator2 = _createForOfIteratorHelper(filterHandle.api.getChildren()),
-              _step2;
-
-          try {
-            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-              const child = _step2.value;
-              children.push(child);
-            }
-          } catch (err) {
-            _iterator2.e(err);
-          } finally {
-            _iterator2.f();
+          for (const child of filterHandle.api.getChildren()) {
+            children.push(child);
           }
         }
 
         return children;
       },
       loadData: actionConfig => {
-        _search(actionConfig);
+        search(actionConfig);
       },
       deleteSelectedRows: () => {
         // TODO : dispose from observer
@@ -325,18 +252,8 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         setDeletedRows(getSelectedRows(selected));
         rows.splice(0, rows.length);
 
-        var _iterator3 = _createForOfIteratorHelper(newRows),
-            _step3;
-
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            const newRow = _step3.value;
-            rows.push(newRow);
-          }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
+        for (const newRow of newRows) {
+          rows.push(newRow);
         }
 
         setSelected([]);
@@ -355,34 +272,14 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
         setRows([]);
       },
       addRows: newRows => {
-        var _iterator4 = _createForOfIteratorHelper(newRows),
-            _step4;
-
-        try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            const newRow = _step4.value;
-            rows.push(observeRow(newRow));
-          }
-        } catch (err) {
-          _iterator4.e(err);
-        } finally {
-          _iterator4.f();
+        for (const newRow of newRows) {
+          rows.push(observeRow(newRow));
         }
 
         let newSelection = [];
 
-        var _iterator5 = _createForOfIteratorHelper(newRows),
-            _step5;
-
-        try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            const newRow = _step5.value;
-            newSelection.push(newRow.id);
-          }
-        } catch (err) {
-          _iterator5.e(err);
-        } finally {
-          _iterator5.f();
+        for (const newRow of newRows) {
+          newSelection.push(newRow.id);
         }
 
         setSelected(newSelection);
@@ -406,7 +303,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       },
 
       search: () => {
-        _search();
+        search();
       },
 
       refresh() {
@@ -511,7 +408,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   }
 
   function handleCellClick(event, id, column) {
-    if (column.fieldType !== "document") {
+    if (column.fieldType !== 'document') {
       // TODO : Evaluate if this call is necessary
       doHandleClick(event, id);
     }
@@ -524,8 +421,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   function handleChangePage(event, newPage) {
     criteria.currentPage = newPage + 1;
     setPage(newPage);
-
-    _search();
+    search();
   }
 
   function handleChangeRowsPerPage(event) {
@@ -560,12 +456,9 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     }
 
     setRows(tableRows);
-    let event = new _Event.default(props.handle, props.viewId, data);
-
-    _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
   }
 
-  const _search = (actionConfig = null) => {
+  const search = (actionConfig = null) => {
     let conf = config;
 
     if (_Utils.default.isNull(conf)) {
@@ -575,15 +468,25 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     let service = !_Utils.default.isNull(conf.dataService) ? conf.dataService : !_Utils.default.isNull(actionConfig) ? actionConfig.dataService : null;
 
     if (!_Utils.default.isNull(service)) {
-      let method = service.type === 'remoteObjectProxy' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
-      method(service, props.handle, props.viewId, result => {
-        let data = service.type === 'remoteObjectProxy' ? result.data : result;
-        processData(data, conf);
-      }, e => {
-        console.error(e);
+      let serviceType = service.type;
 
-        _Utils.default.publishSystemErrorMessage(props.viewId);
-      });
+      if (!serviceType) {
+        serviceType = 'rpc';
+      }
+
+      if (serviceType === 'rpc' || serviceType === 'rest') {
+        let method = serviceType === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
+        method(service, props.handle, props.viewId, result => {
+          let data = serviceType === 'rpc' ? result.data : result;
+          processData(data, conf);
+        }, e => {
+          console.error(e);
+
+          _Utils.default.publishSystemErrorMessage(props.viewId);
+        });
+      } else {
+        throw new Error('Unknown service type : ' + serviceType);
+      }
     } else {
       if (actionConfig && actionConfig.value) {
         let data = _ApplicationContext.default.resolveParameterConfigValue(actionConfig.value);
@@ -594,91 +497,83 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   };
 
   _react.default.useEffect(() => {
-    if (!_Utils.default.isNull(config)) {
-      criteria.currentPage = 1;
+    criteria.currentPage = 1;
 
-      _search();
+    if (!rowsPerPageLoading) {
+      setRowsPerPageLoading(false);
+      search();
     }
   }, [rowsPerPage]);
 
   _react.default.useEffect(() => {
     props.handle.api = api();
+  });
 
-    if (_Utils.default.isNull(config)) {
-      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
-
-      setConfig(parsedConfig);
-      let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
-      eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
+  _react.default.useLayoutEffect(() => {
+    props.handle.api = api();
+  }, []);
 
-      _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
+  _react.default.useEffect(() => {
+    console.log('DATA GRID RENDERED : ' + props.config.id);
+  }, []);
 
-      _Observable.default.addSystemSubscriptions(parsedConfig);
+  _react.default.useEffect(() => {
+    let eventHandlingConfig = _Utils.default.isNull(config.eventHandlingConfig) ? {} : config.eventHandlingConfig;
+    eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
 
-      let isEditable = false;
-      let visibleColumnCount = 0;
+    _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
 
-      var _iterator6 = _createForOfIteratorHelper(parsedConfig.columns),
-          _step6;
+    _Observable.default.addSystemSubscriptions(config);
 
-      try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-          const column = _step6.value;
+    let isEditable = false;
+    let visibleColumnCount = 0;
 
-          if (!_Utils.default.getComponentAttribute(column, "hidden", false)) {
-            visibleColumnCount++;
-          }
-        }
-      } catch (err) {
-        _iterator6.e(err);
-      } finally {
-        _iterator6.f();
+    for (const column of config.columns) {
+      if (!_Utils.default.getComponentAttribute(column, 'hidden', false)) {
+        visibleColumnCount++;
       }
+    }
 
-      for (let i = 0; i < parsedConfig.columns.length; i++) {
-        let column = parsedConfig.columns[i];
+    for (let i = 0; i < config.columns.length; i++) {
+      let column = config.columns[i];
 
-        if (!isEditable && column.attributes['editable'] === true) {
-          isEditable = true;
-          setEditable(true);
-        }
+      if (!isEditable && column.attributes['editable'] === true) {
+        isEditable = true;
+        setEditable(true);
+      }
 
-        column.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, visibleColumnCount);
+      column.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, visibleColumnCount);
 
-        if (!_Utils.default.isNull(column.attributes) && column.attributes['editable'] === true && _Utils.default.isNull(column.editor)) {
-          let defaultEditor = {};
-          defaultEditor.fieldType = 'TEXT_FIELD';
-          defaultEditor.id = column.id + 'Editor';
-          column.editor = defaultEditor;
-        }
+      if (!_Utils.default.isNull(column.attributes) && column.attributes['editable'] === true && _Utils.default.isNull(column.editor)) {
+        let defaultEditor = {};
+        defaultEditor.fieldType = 'TEXT_FIELD';
+        defaultEditor.id = column.id + 'Editor';
+        column.editor = defaultEditor;
       }
     }
-  });
-
-  _react.default.useEffect(() => {
-    if (!_Utils.default.isNull(config)) {
-      criteria.currentPage = 1;
-      criteria.dataQueryName = config.dataQueryName;
 
-      if (loadingRef.current === true) {
-        if (!_Utils.default.isNull(props.loadCompleteHandler)) {
-          props.loadCompleteHandler(config.id);
-        }
+    criteria.currentPage = 1;
+    criteria.dataQueryName = config.dataQueryName;
+    let hasLoadEvent;
+    let loadSubscriptions = eventHandlingConfig.subscriptions.filter(subscription => subscription.eventType === 'COMPONENT_LOAD');
 
-        let autoLoadData = _Utils.default.getComponentAttribute(config, 'autoLoadData', null);
+    for (const loadSubscription of loadSubscriptions) {
+      if (loadSubscription.actions.filter(action => action.actionType === 'loadData').length > 0) {
+        hasLoadEvent = true;
+        break;
+      }
+    }
 
-        if (autoLoadData === null || autoLoadData === true) {
-          _search();
-        }
+    let autoLoadData = _Utils.default.getComponentAttribute(config, 'autoLoadData', null);
 
-        let event = new _Event.default(props.handle, props.viewId, null);
+    if (!hasLoadEvent && (autoLoadData === null || autoLoadData === true)) {
+      search();
+    }
 
-        _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    let event = new _Event.default(props.handle, props.viewId, null);
 
-        loadingRef.current = false;
-      }
-    }
-  }, [config]);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+  }, []);
 
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.data)) {
@@ -693,55 +588,28 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   }, [props.data]);
 
   function addRowFocusListener(row) {
-    $("#ROW-" + row.id).focusout(function () {
+    $('#ROW-' + row.id).focusout(function () {
       let newSelected = [];
 
-      var _iterator7 = _createForOfIteratorHelper(selected),
-          _step7;
-
-      try {
-        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-          const selectedElement = _step7.value;
-
-          if (selectedElement !== row.id) {
-            newSelected.push(selectedElement);
-          }
+      for (const selectedElement of selected) {
+        if (selectedElement !== row.id) {
+          newSelected.push(selectedElement);
         }
-      } catch (err) {
-        _iterator7.e(err);
-      } finally {
-        _iterator7.f();
       }
 
       setSelected(newSelected);
     });
   }
 
-  _react.default.useEffect(() => {
-    if (editable) {
-      var _iterator8 = _createForOfIteratorHelper(rows),
-          _step8;
-
-      try {
-        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {// TODO : Fix the focus loss behavior
-          //addRowFocusListener(row);
-
-          const row = _step8.value;
-        }
-      } catch (err) {
-        _iterator8.e(err);
-      } finally {
-        _iterator8.f();
-      }
-    }
-  });
-
   _react.default.useEffect(() => {
     updateScrollBarPadding();
 
     _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
 
     rowCount.current = rows.length;
+    let event = new _Event.default(props.handle, props.viewId, rows);
+
+    _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
   }, [rows]);
 
   _react.default.useEffect(() => {
@@ -760,18 +628,8 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     if (!_Utils.default.isNull(props.rows)) {
       let rowValues = [];
 
-      var _iterator9 = _createForOfIteratorHelper(props.rows),
-          _step9;
-
-      try {
-        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-          const row = _step9.value;
-          rowValues.push(observeRow(row));
-        }
-      } catch (err) {
-        _iterator9.e(err);
-      } finally {
-        _iterator9.f();
+      for (const row of props.rows) {
+        rowValues.push(observeRow(row));
       }
 
       setRows(rowValues);
@@ -785,22 +643,11 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   const isSelected = id => selected.indexOf(id) !== -1;
 
   const editorChangeHandler = (rowId, field, value) => {
-    var _iterator10 = _createForOfIteratorHelper(rows),
-        _step10;
-
-    try {
-      for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-        const row = _step10.value;
-
-        if (row.id === rowId) {
-          row[field] = value;
-          break;
-        }
+    for (const row of rows) {
+      if (row.id === rowId) {
+        row[field] = value;
+        break;
       }
-    } catch (err) {
-      _iterator10.e(err);
-    } finally {
-      _iterator10.f();
     }
 
     valueChangeCallback(rows);
@@ -821,22 +668,11 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   const createCell = (row, columnName, cellHandle) => {
     let rowCells = null;
 
-    var _iterator11 = _createForOfIteratorHelper(cells),
-        _step11;
-
-    try {
-      for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-        const cellsEntry = _step11.value;
-
-        if (cellsEntry.rowId === row.id) {
-          rowCells = cellsEntry;
-          break;
-        }
+    for (const cellsEntry of cells) {
+      if (cellsEntry.rowId === row.id) {
+        rowCells = cellsEntry;
+        break;
       }
-    } catch (err) {
-      _iterator11.e(err);
-    } finally {
-      _iterator11.f();
     }
 
     if (_Utils.default.isNull(rowCells) || rowCells.length === 0) {
@@ -851,22 +687,11 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   const refreshCell = (rowId, columnName) => {
     let rowCells = null;
 
-    var _iterator12 = _createForOfIteratorHelper(cells),
-        _step12;
-
-    try {
-      for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-        const cell = _step12.value;
-
-        if (cell.rowId === rowId) {
-          rowCells = cell;
-          break;
-        }
+    for (const cell of cells) {
+      if (cell.rowId === rowId) {
+        rowCells = cell;
+        break;
       }
-    } catch (err) {
-      _iterator12.e(err);
-    } finally {
-      _iterator12.f();
     }
 
     if (!_Utils.default.isNull(rowCells)) {
@@ -930,25 +755,31 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: (_Utils.default.isNull(props.hasBorder) || props.hasBorder === true) && !_Utils.default.isNull(config) ? _Utils.default.mergeStyles({
+    style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
       margin: '0',
       border: '1px solid #e2e2e2',
       borderRadius: '4px'
     }, props.config) : props.style
   }, !_Utils.default.isNull(props.config.notes) ? props.config.notes.map(note => {
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: noteKey++
+      key: noteKey++,
+      style: {
+        padding: '8px'
+      }
     }, /*#__PURE__*/_react.default.createElement(_Alert.default, {
+      style: {
+        marginBottom: '0'
+      },
       variant: note.messageType === 'WARN' ? 'warning' : note.messageType === 'INFO' ? '' : 'danger',
       show: true
-    }, /*#__PURE__*/_react.default.createElement("p", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         color: 'rgba(255, 255, 255, 0.8)'
       }
     }, note.message)));
-  }) : null, rowsPerPageOptions.includes(props.config.pageSize) && !_Utils.default.isNull(config) ? config.gridType === 'TILE' ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : null, rowsPerPageOptions.includes(props.config.pageSize) ? config.gridType === 'TILE' ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      margin: "0 0 8px 8px"
+      margin: '0 0 8px 8px'
     }
   }, /*#__PURE__*/_react.default.createElement("div", null, isFilterable() ? /*#__PURE__*/_react.default.createElement(_DataGridFilter.default, {
     ref: /*#__PURE__*/_react.default.createRef(),
@@ -956,7 +787,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     config: props.config,
     filterWrapperClass: props.filterWrapperClass,
     scrollWidth: scrollWidth,
-    onFilterSubmit: _search,
+    onFilterSubmit: search,
     onRequestSort: handleRequestSort
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
@@ -986,7 +817,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     config: config,
     filterWrapperClass: props.filterWrapperClass,
     scrollWidth: scrollWidth,
-    onFilterSubmit: _search,
+    onFilterSubmit: search,
     onRequestSort: handleRequestSort
   }) : null, /*#__PURE__*/_react.default.createElement(_DataGridHeading.default, {
     ref: /*#__PURE__*/_react.default.createRef(),
@@ -1000,7 +831,7 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
   }), /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tbody, {
     className: classes.tableBody,
     style: {
-      maxHeight: _Utils.default.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : "42vh"
+      maxHeight: _Utils.default.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : '42vh'
     },
     id: "mainTableBody"
   }, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
@@ -1023,26 +854,26 @@ const DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       className: isItemSelected ? classes.tableSelected : classes.tableRow
     }, config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       padding: "checkbox",
-      width: MULTI_SELECT_CHECKBOX_COL_WIDTH + "px",
-      className: "selectCell"
+      width: MULTI_SELECT_CHECKBOX_COL_WIDTH + 'px',
+      className: 'selectCell'
     }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       checked: isItemSelected,
       inputProps: {
         'aria-labelledby': labelId
       }
-    })) : null, config.columns.map(column => column.attributes['hidden'] === true ? null : counter++ === config.columns.length - 1 && actionsToolbar !== null && typeof actionsToolbar !== "undefined" ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+    })) : null, config.columns.map(column => column.attributes['hidden'] === true ? null : counter++ === config.columns.length - 1 && actionsToolbar !== null && typeof actionsToolbar !== 'undefined' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       style: {
-        width: column.width
+        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%'
       },
       align: "left",
-      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? "editCell" : null,
+      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
       key: column.id
     }, "Row action toolbar not supported") : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       style: {
-        width: column.width
+        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%'
       },
       align: "left",
-      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? "editCell" : null,
+      className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
       key: column.id,
       onClick: event => handleCellClick(event, row.id, column)
     }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {