@agilemotion/oui-react-js 1.6.4 → 1.6.6

package/dist/components/DataGrid.js

@@ -1,536 +1,292 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DataGrid = exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = void 0;
-
+exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = exports.DataGrid = void 0;
 var _react = _interopRequireDefault(require("react"));
-
 var _styles = require("@material-ui/core/styles");
-
 var _reactSuperResponsiveTable = require("react-super-responsive-table");
-
 require("react-super-responsive-table/dist/SuperResponsiveTableStyle.css");
-
 var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
 var _Utils = _interopRequireDefault(require("../Utils"));
-
 require("./DataGrid.css");
-
 var _RestUtils = require("../RestUtils");
-
 var _DataGridFilter = _interopRequireDefault(require("./DataGridFilter"));
-
 var _DataGridHeading = _interopRequireDefault(require("./DataGridHeading"));
-
 var _TableCellContent = _interopRequireDefault(require("./TableCellContent"));
-
 var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
-
 var _colors = require("material-ui/styles/colors");
-
 var _Event = _interopRequireDefault(require("../event/Event"));
-
 var _Observable = _interopRequireDefault(require("../event/Observable"));
-
 var _EventType = _interopRequireDefault(require("../event/EventType"));
-
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
 var _mobx = require("mobx");
-
 var $ = _interopRequireWildcard(require("jquery"));
-
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
-
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-
 var _Layout = require("./layout/Layout");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { 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; }
-
-var MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
-exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = MULTI_SELECT_CHECKBOX_COL_WIDTH;
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MULTI_SELECT_CHECKBOX_COL_WIDTH = exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
 function evaluateTableCellWidth(multiSelect, column, columnCount) {
-  var width = column.attributes['width'];
+  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 + '%';
 }
-
 function desc(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
   }
-
   if (b[orderBy] > a[orderBy]) {
     return 1;
   }
-
   return 0;
 }
-
 function stableSort(array, cmp) {
-  var stabilizedThis = array.map(function (el, index) {
-    return [el, index];
-  });
-  stabilizedThis.sort(function (a, b) {
-    var order = cmp(a[0], b[0]);
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = cmp(a[0], b[0]);
     if (order !== 0) return order;
     return a[1] - b[1];
   });
-  return stabilizedThis.map(function (el) {
-    return el[0];
-  });
+  return stabilizedThis.map(el => el[0]);
 }
-
 function getSorting(order, orderBy) {
-  return order === 'desc' ? function (a, b) {
-    return desc(a, b, orderBy);
-  } : function (a, b) {
-    return -desc(a, b, orderBy);
-  };
+  return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
 }
-
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      width: '100%',
-      marginTop: theme.spacing(3)
-    },
-    paper: {
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      zIndex: '0'
-    },
-    scrollPadding: {
-      padding: '8px !important'
-    },
-    noScrollPadding: {
-      padding: '0 !important',
-      width: '1px !important'
-    },
-    tableBody: {
-      display: 'block',
-      overflowY: 'auto'
-    },
-    tableSelected: {
-      backgroundColor: _colors.grey300,
-      '&:hover': {
-        background: '#f1f1f1'
-      }
-    },
-    tableRow: {
-      '&:hover': {
-        background: '#f1f1f1'
-      }
-    },
-    tableWrapper: {
-      height: '100%'
-    },
-    table: {
-      height: '100%'
-    },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1
-    }
-  };
-});
-
-var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var classes = useStyles();
-
-  var _React$useState = _react.default.useState('desc'),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      order = _React$useState2[0],
-      setOrder = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(_Utils.default.parseConfig(props.config, props.viewId)),
-      _React$useState4 = _slicedToArray(_React$useState3, 1),
-      config = _React$useState4[0];
-
-  var _React$useState5 = _react.default.useState('id'),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      orderBy = _React$useState6[0],
-      setOrderBy = _React$useState6[1];
-
-  var _React$useState7 = _react.default.useState([]),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      selected = _React$useState8[0],
-      setSelected = _React$useState8[1];
-
-  var _React$useState9 = _react.default.useState(0),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      totalNumberOfRows = _React$useState10[0],
-      setTotalNumberOfRows = _React$useState10[1];
-
-  var _React$useState11 = _react.default.useState({}),
-      _React$useState12 = _slicedToArray(_React$useState11, 1),
-      criteria = _React$useState12[0];
-
-  var _React$useState13 = _react.default.useState(0),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      page = _React$useState14[0],
-      setPage = _React$useState14[1];
-
-  var _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];
-
-  var _React$useState17 = _react.default.useState([]),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      deletedRows = _React$useState18[0],
-      setDeletedRows = _React$useState18[1];
-
-  var _React$useState19 = _react.default.useState(false),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      editable = _React$useState20[0],
-      setEditable = _React$useState20[1];
-
-  var _React$useState21 = _react.default.useState(0),
-      _React$useState22 = _slicedToArray(_React$useState21, 2),
-      scrollWidth = _React$useState22[0],
-      setScrollWidth = _React$useState22[1];
-
-  var _React$useState23 = _react.default.useState([15, 30, 45, 60, 75]),
-      _React$useState24 = _slicedToArray(_React$useState23, 1),
-      rowsPerPageOptions = _React$useState24[0];
-
-  var _React$useState25 = _react.default.useState(true),
-      _React$useState26 = _slicedToArray(_React$useState25, 2),
-      rowsPerPageLoading = _React$useState26[0],
-      setRowsPerPageLoading = _React$useState26[1];
-
-  var _React$useState27 = _react.default.useState(props.config.pageSize),
-      _React$useState28 = _slicedToArray(_React$useState27, 2),
-      rowsPerPage = _React$useState28[0],
-      setRowsPerPage = _React$useState28[1];
-
-  var highlightRowSelection = _react.default.useRef(!_Utils.default.isNull(props.config.highlightRowSelection) ? props.config.highlightRowSelection : true);
-
-  var _React$useState29 = _react.default.useState([]),
-      _React$useState30 = _slicedToArray(_React$useState29, 1),
-      cells = _React$useState30[0];
-
-  var _React$useState31 = _react.default.useState({}),
-      _React$useState32 = _slicedToArray(_React$useState31, 1),
-      headingHandle = _React$useState32[0];
-
-  var _React$useState33 = _react.default.useState({}),
-      _React$useState34 = _slicedToArray(_React$useState33, 1),
-      filterHandle = _React$useState34[0];
-
-  var _React$useState35 = _react.default.useState([]),
-      _React$useState36 = _slicedToArray(_React$useState35, 1),
-      columnLayoutHandles = _React$useState36[0];
-
-  var rowCount = _react.default.useRef(-1);
-
-  var loadingRef = _react.default.useRef(true);
-
-  var noteKey = 0;
-
-  var api = function api() {
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3)
+  },
+  paper: {
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    zIndex: '0'
+  },
+  scrollPadding: {
+    padding: '8px !important'
+  },
+  noScrollPadding: {
+    padding: '0 !important',
+    width: '1px !important'
+  },
+  tableBody: {
+    display: 'block',
+    overflowY: 'auto'
+  },
+  tableSelected: {
+    backgroundColor: _colors.grey300,
+    '&:hover': {
+      background: '#f1f1f1'
+    }
+  },
+  tableRow: {
+    '&:hover': {
+      background: '#f1f1f1'
+    }
+  },
+  tableWrapper: {
+    height: '100%'
+  },
+  table: {
+    height: '100%'
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  }
+}));
+const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+  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 highlightRowSelection = _react.default.useRef(!_Utils.default.isNull(props.config.highlightRowSelection) ? props.config.highlightRowSelection : true);
+  const [cells] = _react.default.useState([]);
+  const [headingHandle] = _react.default.useState({});
+  const [filterHandle] = _react.default.useState({});
+  const [columnLayoutHandles] = _react.default.useState([]);
+  const rowCount = _react.default.useRef(-1);
+  const loadingRef = _react.default.useRef(true);
+  let noteKey = 0;
+  const api = () => {
     return {
       get id() {
         return props.config.id;
       },
-
       get criteria() {
         criteria.parameters = isFilterable() ? filterHandle.api.getParameters() : [];
         criteria.pageSize = rowsPerPage;
         return criteria;
       },
-
       get selection() {
-        var selectedRows = [];
-
-        for (var i = 0; i < selected.length; i++) {
-          for (var j = 0; j < rows.length; j++) {
+        let selectedRows = [];
+        for (let i = 0; i < selected.length; i++) {
+          for (let j = 0; j < rows.length; j++) {
             if (selected[i] === rows[j].id) {
               selectedRows.push(rows[j]);
             }
           }
         }
-
         return selectedRows;
       },
-
       get columnDataBindings() {
-        var columnNames = [];
-
-        for (var i = 0; i < config.columns.length; i++) {
-          var column = config.columns[i];
+        let columnNames = [];
+        for (let i = 0; i < config.columns.length; i++) {
+          let column = config.columns[i];
           columnNames.push(!_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id);
         }
-
         return columnNames;
       },
-
-      getChildren: function getChildren() {
-        var children = [];
-
+      getChildren: () => {
+        let children = [];
         if (!_Utils.default.isNull(headingHandle.api)) {
-          var _iterator = _createForOfIteratorHelper(headingHandle.api.getChildren()),
-              _step;
-
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var 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;) {
-              var _child = _step2.value;
-              children.push(_child);
-            }
-          } catch (err) {
-            _iterator2.e(err);
-          } finally {
-            _iterator2.f();
+          for (const child of filterHandle.api.getChildren()) {
+            children.push(child);
           }
         }
-
-        var properties = Object.getOwnPropertyNames(columnLayoutHandles);
-
-        var _iterator3 = _createForOfIteratorHelper(properties),
-            _step3;
-
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var property = _step3.value;
-            var columnLayoutHandle = columnLayoutHandles[property];
-            children.push(columnLayoutHandle);
-
-            if (!_Utils.default.isNull(columnLayoutHandle.api) && !_Utils.default.isNull(columnLayoutHandle.api.getChildren)) {
-              var moreChildren = columnLayoutHandle.api.getChildren();
-
-              if (!_Utils.default.isNull(moreChildren)) {
-                var _iterator4 = _createForOfIteratorHelper(moreChildren),
-                    _step4;
-
-                try {
-                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                    var _child2 = _step4.value;
-                    children.push(_child2);
-                  }
-                } catch (err) {
-                  _iterator4.e(err);
-                } finally {
-                  _iterator4.f();
-                }
+        let properties = Object.getOwnPropertyNames(columnLayoutHandles);
+        for (const property of properties) {
+          let columnLayoutHandle = columnLayoutHandles[property];
+          children.push(columnLayoutHandle);
+          if (!_Utils.default.isNull(columnLayoutHandle.api) && !_Utils.default.isNull(columnLayoutHandle.api.getChildren)) {
+            let moreChildren = columnLayoutHandle.api.getChildren();
+            if (!_Utils.default.isNull(moreChildren)) {
+              for (const child of moreChildren) {
+                children.push(child);
               }
             }
           }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
         }
-
         return children;
       },
-      loadData: function loadData(actionConfig) {
-        _search(actionConfig);
+      loadData: actionConfig => {
+        search(actionConfig);
       },
-      deleteSelectedRows: function deleteSelectedRows() {
+      deleteSelectedRows: () => {
         // TODO : dispose from observer
-        var newRows = rows.filter(function (row) {
+        let newRows = rows.filter(row => {
           return !isSelected(row.id);
         });
         setDeletedRows(getSelectedRows(selected));
         rows.splice(0, rows.length);
-
-        var _iterator5 = _createForOfIteratorHelper(newRows),
-            _step5;
-
-        try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var newRow = _step5.value;
-            rows.push(newRow);
-          }
-        } catch (err) {
-          _iterator5.e(err);
-        } finally {
-          _iterator5.f();
+        for (const newRow of newRows) {
+          rows.push(newRow);
         }
-
         setSelected([]);
-
         if (!_Utils.default.isNull(props.onSelectionChange)) {
           props.onSelectionChange([]);
         }
-
         updateScrollBarPadding();
         rowCount.current = rows.length;
         valueChangeCallback(rows);
         return rows;
       },
-      clear: function clear() {
+      clear: () => {
         // TODO : dispose from observer
         setRows([]);
       },
-      addRows: function addRows(newRows) {
-        var _iterator6 = _createForOfIteratorHelper(newRows),
-            _step6;
-
-        try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var newRow = _step6.value;
-            rows.push(observeRow(newRow));
-          }
-        } catch (err) {
-          _iterator6.e(err);
-        } finally {
-          _iterator6.f();
+      addRows: newRows => {
+        for (const newRow of newRows) {
+          rows.push(observeRow(newRow));
         }
-
-        var newSelection = [];
-
-        var _iterator7 = _createForOfIteratorHelper(newRows),
-            _step7;
-
-        try {
-          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-            var _newRow = _step7.value;
-            newSelection.push(_newRow.id);
-          }
-        } catch (err) {
-          _iterator7.e(err);
-        } finally {
-          _iterator7.f();
+        let newSelection = [];
+        for (const newRow of newRows) {
+          newSelection.push(newRow.id);
         }
-
         setSelected(newSelection);
-
         if (!_Utils.default.isNull(props.onSelectionChange)) {
           props.onSelectionChange(newRows);
         }
-
         updateScrollBarPadding();
         rowCount.current = rows.length;
         valueChangeCallback(rows);
         return rows;
       },
-
       get numberOfPages() {
         return totalNumberOfRows / rowsPerPage;
       },
-
       get rows() {
         return rows;
       },
-
-      search: function search() {
-        _search();
+      search: () => {
+        search();
       },
-      refresh: function refresh() {
+      refresh() {
         if (filterHandle && filterHandle.api) {
           filterHandle.api.refresh();
         }
       }
     };
   };
-
   function updateScrollBarPadding() {
     var tbody = document.getElementById('mainTableBody');
-
     if (tbody !== null && typeof tbody !== 'undefined') {
       setScrollWidth(tbody.offsetWidth - tbody.clientWidth);
     }
   }
-
   window.onresize = function onresize() {
     updateScrollBarPadding();
   };
-
-  var handleRequestSort = function handleRequestSort(event, property) {
-    var isDesc = orderBy === property && order === 'desc';
+  const handleRequestSort = (event, property) => {
+    const isDesc = orderBy === property && order === 'desc';
     setOrder(isDesc ? 'asc' : 'desc');
     setOrderBy(property);
   };
-
   function handleSelectAllClick(event) {
     if (event.target.checked) {
-      var newSelecteds = rows.map(function (n) {
-        return n.name;
-      });
+      const newSelecteds = rows.map(n => n.name);
       setSelected(newSelecteds);
       props.onSelectionChange(newSelecteds);
     } else {
       setSelected([]);
       props.onSelectionChange([]);
     }
-
     _ApplicationManager.default.enableFormMarkers(true);
   }
-
   function getSelectedRows(selected) {
-    var selectedRows = [];
-
+    let selectedRows = [];
     for (var i = 0; i < rows.length; i++) {
-      var row = rows[i];
-
+      let row = rows[i];
       for (var j = 0; j < selected.length; j++) {
         if (row.id === selected[j]) {
           selectedRows.push(row);
         }
       }
     }
-
     return selectedRows;
   }
-
   function doHandleClick(event, id) {
     _ApplicationManager.default.enableFormMarkers(true);
-
-    var selectedIndex = -1;
+    const selectedIndex = -1;
     selected.indexOf(id);
-    var newSelected = [];
-
+    let newSelected = [];
     if (props.multiSelect === true) {
       if (selectedIndex === -1) {
         newSelected = newSelected.concat(selected, id);
@@ -544,414 +300,254 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
     } else {
       newSelected.push(id);
     }
-
-    var selectedRows = getSelectedRows(newSelected);
+    let selectedRows = getSelectedRows(newSelected);
     setSelected(newSelected);
-
     if (!_Utils.default.isNull(props.onSelectionChange)) {
       props.onSelectionChange(selectedRows);
     }
   }
-
   function fireSelectionEvent() {
     if (!_Utils.default.isNull(config) && (!_Utils.default.isNull(headingHandle) || config.gridType === 'TILE')) {
-      var event = new _Event.default(props.handle, props.viewId, getSelectedRows(selected));
-
+      let event = new _Event.default(props.handle, props.viewId, getSelectedRows(selected));
       _Observable.default.fireEvent(_EventType.default.SELECTION_CHANGE, event);
     }
   }
-
   function handleClick(event, id) {
     if (!_Utils.default.isNull(props.onCellSelectionChange)) {
       return;
     }
-
     doHandleClick(event, id);
   }
-
   function handleCellClick(event, id, column) {
     if (column.fieldType !== 'document') {
       // TODO : Evaluate if this call is necessary
       doHandleClick(event, id);
     }
-
     if (!_Utils.default.isNull(props.onCellSelectionChange)) {
       props.onCellSelectionChange(id, column);
     }
   }
-
   function handleChangePage(event, newPage) {
     criteria.currentPage = newPage + 1;
     setPage(newPage);
-
-    _search();
+    search();
   }
-
   function handleChangeRowsPerPage(event) {
-    setRowsPerPage(function (rowsPerPage) {
-      return event.target.value;
-    });
+    setRowsPerPage(rowsPerPage => event.target.value);
     setPage(0);
   }
-
-  var observeRow = function observeRow(row) {
-    var observableRow = (0, _mobx.observable)(row);
-    (0, _mobx.observe)(observableRow, function (change) {
-      var newValue = change.newValue;
-      var oldValue = change.oldValue;
-
+  const observeRow = row => {
+    let observableRow = (0, _mobx.observable)(row);
+    (0, _mobx.observe)(observableRow, change => {
+      let newValue = change.newValue;
+      let oldValue = change.oldValue;
       if (newValue !== oldValue) {
         refreshCell(row.id, change.name);
       }
     });
     return observableRow;
   };
-
   function processData(data, conf) {
     setTotalNumberOfRows(data.totalNumberOfRecords ? data.totalNumberOfRecords : data.records.length);
-    var tableRows = [];
-    var records = data.records;
-
-    for (var i = 0; i < records.length; i++) {
+    let tableRows = [];
+    let records = data.records;
+    for (let i = 0; i < records.length; i++) {
       if (!_Utils.default.isNull(records[i].map)) {
         tableRows.push(observeRow(records[i].map));
       } else {
         tableRows.push(observeRow(records[i]));
       }
     }
-
     setRows(tableRows);
   }
-
-  var _search = function _search() {
-    var actionConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var conf = config;
-
+  const search = function () {
+    let actionConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let conf = config;
     if (_Utils.default.isNull(conf)) {
       conf = _Utils.default.parseConfig(props.config, props.viewId);
     }
-
-    var service = !_Utils.default.isNull(conf.dataService) ? conf.dataService : !_Utils.default.isNull(actionConfig) ? actionConfig.dataService : null;
-
+    let service = !_Utils.default.isNull(conf.dataService) ? conf.dataService : !_Utils.default.isNull(actionConfig) ? actionConfig.dataService : null;
     if (!_Utils.default.isNull(service)) {
-      var serviceType = service.type;
-
+      let serviceType = service.type;
       if (!serviceType) {
         serviceType = 'rpc';
       }
-
       if (serviceType === 'rpc' || serviceType === 'rest') {
-        var method = serviceType === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
-        method(service, props.handle, props.viewId, function (result) {
-          var data = serviceType === 'rpc' ? result.data : result;
+        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);
-        }, function (e) {
-          console.error(e); //Utils.publishSystemErrorMessage(props.viewId);
+        }, e => {
+          console.error(e);
+          //Utils.publishSystemErrorMessage(props.viewId);
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);
       }
     } else {
       if (actionConfig && actionConfig.value) {
-        var data = _ApplicationManager.default.resolveParameterConfigValue(actionConfig.value);
-
+        let data = _ApplicationManager.default.resolveParameterConfigValue(actionConfig.value);
         processData(data, conf);
       }
     }
   };
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     criteria.currentPage = 1;
-
     if (!rowsPerPageLoading) {
       setRowsPerPageLoading(false);
-
-      _search();
+      search();
     }
   }, [rowsPerPage]);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     props.handle.api = api();
   });
-
-  _react.default.useLayoutEffect(function () {
+  _react.default.useLayoutEffect(() => {
     props.handle.api = api();
   }, []);
-
-  _react.default.useEffect(function () {
-    var eventHandlingConfig = _Utils.default.isNull(config.eventHandlingConfig) ? {} : config.eventHandlingConfig;
+  _react.default.useEffect(() => {
+    let eventHandlingConfig = _Utils.default.isNull(config.eventHandlingConfig) ? {} : config.eventHandlingConfig;
     eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
-
     _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
-
     _Observable.default.addSystemSubscriptions(props.viewId, config);
-
-    var isEditable = false;
-    var visibleColumnCount = 0;
-
-    var _iterator8 = _createForOfIteratorHelper(config.columns),
-        _step8;
-
-    try {
-      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-        var _column = _step8.value;
-
-        if (!_Utils.default.getComponentAttribute(_column, 'hidden', false)) {
-          visibleColumnCount++;
-        }
+    let isEditable = false;
+    let visibleColumnCount = 0;
+    for (const column of config.columns) {
+      if (!_Utils.default.getComponentAttribute(column, 'hidden', false)) {
+        visibleColumnCount++;
       }
-    } catch (err) {
-      _iterator8.e(err);
-    } finally {
-      _iterator8.f();
     }
-
-    for (var i = 0; i < config.columns.length; i++) {
-      var column = config.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);
       }
-
       column.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, visibleColumnCount);
-
       if (!_Utils.default.isNull(column.attributes) && column.attributes['editable'] === true && _Utils.default.isNull(column.editor)) {
-        var defaultEditor = {};
+        let defaultEditor = {};
         defaultEditor.fieldType = 'TEXT_FIELD';
         defaultEditor.id = column.id + 'Editor';
         column.editor = defaultEditor;
       }
     }
-
     criteria.currentPage = 1;
     criteria.dataQueryName = config.dataQueryName;
-    var hasLoadEvent;
-    var loadSubscriptions = eventHandlingConfig.subscriptions.filter(function (subscription) {
-      return subscription.eventType === 'COMPONENT_LOAD';
-    });
-
-    var _iterator9 = _createForOfIteratorHelper(loadSubscriptions),
-        _step9;
-
-    try {
-      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-        var loadSubscription = _step9.value;
-
-        if (loadSubscription.actions.filter(function (action) {
-          return action.actionType === 'loadData';
-        }).length > 0) {
-          hasLoadEvent = true;
-          break;
-        }
+    let hasLoadEvent;
+    let loadSubscriptions = eventHandlingConfig.subscriptions.filter(subscription => subscription.eventType === 'COMPONENT_LOAD');
+    for (const loadSubscription of loadSubscriptions) {
+      if (loadSubscription.actions.filter(action => action.actionType === 'loadData').length > 0) {
+        hasLoadEvent = true;
+        break;
       }
-    } catch (err) {
-      _iterator9.e(err);
-    } finally {
-      _iterator9.f();
     }
-
-    var autoLoadData = _Utils.default.getComponentAttribute(config, 'autoLoadData', null);
-
+    let autoLoadData = _Utils.default.getComponentAttribute(config, 'autoLoadData', null);
     if (!hasLoadEvent && (autoLoadData === null || autoLoadData === true)) {
-      _search();
+      search();
     }
-
-    var event = new _Event.default(props.handle, props.viewId, null);
-
+    let event = new _Event.default(props.handle, props.viewId, null);
     _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
   }, []);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.data)) {
-      var conf = config;
-
+      let conf = config;
       if (_Utils.default.isNull(conf)) {
         conf = _Utils.default.parseConfig(props.config, props.viewId);
       }
-
       processData(props.data, conf);
     }
   }, [props.data]);
-
   function addRowFocusListener(row) {
     $('#ROW-' + row.id).focusout(function () {
-      var newSelected = [];
-
-      var _iterator10 = _createForOfIteratorHelper(selected),
-          _step10;
-
-      try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var selectedElement = _step10.value;
-
-          if (selectedElement !== row.id) {
-            newSelected.push(selectedElement);
-          }
+      let newSelected = [];
+      for (const selectedElement of selected) {
+        if (selectedElement !== row.id) {
+          newSelected.push(selectedElement);
         }
-      } catch (err) {
-        _iterator10.e(err);
-      } finally {
-        _iterator10.f();
       }
-
       setSelected(newSelected);
     });
   }
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     updateScrollBarPadding();
-
     _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
-
     rowCount.current = rows.length;
-    var event = new _Event.default(props.handle, props.viewId, rows);
-
+    let event = new _Event.default(props.handle, props.viewId, rows);
     _Observable.default.fireEvent(_EventType.default.DATA_ARRIVED, event);
   }, [rows]);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     if (!_Utils.default.isNull(deletedRows) && deletedRows.length > 0) {
-      var event = new _Event.default(props.handle, props.viewId, deletedRows);
-
+      let event = new _Event.default(props.handle, props.viewId, deletedRows);
       _Observable.default.fireEvent(_EventType.default.ROW_DELETED, event);
-
       setDeletedRows(null);
     }
-
     rowCount.current = rows.length;
   }, [deletedRows]);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.rows)) {
-      var rowValues = [];
-
-      var _iterator11 = _createForOfIteratorHelper(props.rows),
-          _step11;
-
-      try {
-        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var row = _step11.value;
-          rowValues.push(observeRow(row));
-        }
-      } catch (err) {
-        _iterator11.e(err);
-      } finally {
-        _iterator11.f();
+      let rowValues = [];
+      for (const row of props.rows) {
+        rowValues.push(observeRow(row));
       }
-
       setRows(rowValues);
     }
   }, [props.rows]);
-
-  _react.default.useEffect(function () {
+  _react.default.useEffect(() => {
     fireSelectionEvent();
   }, [selected]);
-
-  var isSelected = function isSelected(id) {
-    return selected.indexOf(id) !== -1;
-  };
-
-  var editorChangeHandler = function editorChangeHandler(rowId, field, value) {
-    var _iterator12 = _createForOfIteratorHelper(rows),
-        _step12;
-
-    try {
-      for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-        var row = _step12.value;
-
-        if (row.id === rowId) {
-          row[field] = value;
-          break;
-        }
+  const isSelected = id => selected.indexOf(id) !== -1;
+  const editorChangeHandler = (rowId, field, value) => {
+    for (const row of rows) {
+      if (row.id === rowId) {
+        row[field] = value;
+        break;
       }
-    } catch (err) {
-      _iterator12.e(err);
-    } finally {
-      _iterator12.f();
     }
-
     valueChangeCallback(rows);
   };
-
-  var isFilterable = function isFilterable() {
-    for (var i = 0; i < props.config.columns.length; i++) {
-      var column = props.config.columns[i];
-
+  const isFilterable = () => {
+    for (let i = 0; i < props.config.columns.length; i++) {
+      let column = props.config.columns[i];
       if (column.attributes['filterable'] === true) {
         return true;
       }
     }
-
     return false;
   };
-
-  var createCell = function createCell(row, columnName, cellHandle) {
-    var rowCells = null;
-
-    var _iterator13 = _createForOfIteratorHelper(cells),
-        _step13;
-
-    try {
-      for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
-        var cellsEntry = _step13.value;
-
-        if (cellsEntry.rowId === row.id) {
-          rowCells = cellsEntry;
-          break;
-        }
+  const createCell = (row, columnName, cellHandle) => {
+    let rowCells = null;
+    for (const cellsEntry of cells) {
+      if (cellsEntry.rowId === row.id) {
+        rowCells = cellsEntry;
+        break;
       }
-    } catch (err) {
-      _iterator13.e(err);
-    } finally {
-      _iterator13.f();
     }
-
     if (_Utils.default.isNull(rowCells) || rowCells.length === 0) {
       rowCells = {};
       rowCells.rowId = row.id;
       cells.push(rowCells);
     }
-
     rowCells[columnName] = cellHandle;
   };
-
-  var refreshCell = function refreshCell(rowId, columnName) {
-    var rowCells = null;
-
-    var _iterator14 = _createForOfIteratorHelper(cells),
-        _step14;
-
-    try {
-      for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
-        var _cell = _step14.value;
-
-        if (_cell.rowId === rowId) {
-          rowCells = _cell;
-          break;
-        }
+  const refreshCell = (rowId, columnName) => {
+    let rowCells = null;
+    for (const cell of cells) {
+      if (cell.rowId === rowId) {
+        rowCells = cell;
+        break;
       }
-    } catch (err) {
-      _iterator14.e(err);
-    } finally {
-      _iterator14.f();
     }
-
     if (!_Utils.default.isNull(rowCells)) {
-      var cell = rowCells[columnName];
-
+      let cell = rowCells[columnName];
       if (!_Utils.default.isNull(cell)) {
         cell.api.refresh();
       }
     }
   };
-
-  var valueChangeCallback = function valueChangeCallback(valueRows) {
+  const valueChangeCallback = valueRows => {
     if (!_Utils.default.isNull(props.valueChangeHandler)) {
-      var invalidRows = valueRows.filter(function (row) {
+      let invalidRows = valueRows.filter(row => {
         return !_Utils.default.isNull(row.errors) && row.errors.length > 0;
       });
-
       if (invalidRows.length > 0) {
         props.valueChangeHandler(null);
       } else {
@@ -959,16 +555,12 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
       }
     }
   };
-
   function getTileLabel(row) {
-    var counter = 0;
-    return /*#__PURE__*/_react.default.createElement("span", null, config.columns.map(function (column) {
-      return !column.attributes.hidden ? /*#__PURE__*/_react.default.createElement("span", {
-        key: counter++
-      }, row[!_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id], /*#__PURE__*/_react.default.createElement("br", null)) : null;
-    }));
+    let counter = 0;
+    return /*#__PURE__*/_react.default.createElement("span", null, config.columns.map(column => !column.attributes.hidden ? /*#__PURE__*/_react.default.createElement("span", {
+      key: counter++
+    }, row[!_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id], /*#__PURE__*/_react.default.createElement("br", null)) : null));
   }
-
   function renderTile(row, key) {
     return /*#__PURE__*/_react.default.createElement(_Grid.default, {
       item: true,
@@ -985,31 +577,25 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
         width: '100%',
         height: '100%'
       },
-      onClick: function onClick(event) {
-        return doHandleClick(event, row.id);
-      }
+      onClick: event => doHandleClick(event, row.id)
     }, getTileLabel(row)));
   }
-
   function renderTiles() {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, stableSort(rows, getSorting(order, orderBy)).map(function (row, index) {
-      var isItemSelected = isSelected(row.id);
-      var labelId = "enhanced-table-checkbox-".concat(index);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
+      const isItemSelected = isSelected(row.id);
+      const labelId = `enhanced-table-checkbox-${index}`;
       row.index = index;
       return renderTile(row, index);
     }));
   }
-
   function createColumnLayoutHandle(column, index) {
     if (_Utils.default.isNull(columnLayoutHandles[column.id + index])) {
-      var handle = {};
+      let handle = {};
       columnLayoutHandles[column.id + index] = handle;
       return handle;
     }
-
     return columnLayoutHandles[column.id + index];
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
@@ -1017,7 +603,7 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
       border: '1px solid #e2e2e2',
       borderRadius: '4px'
     }, props.config) : props.style
-  }, !_Utils.default.isNull(props.config.notes) ? props.config.notes.map(function (note) {
+  }, !_Utils.default.isNull(props.config.notes) ? props.config.notes.map(note => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: noteKey++,
       style: {
@@ -1044,7 +630,7 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
     config: props.config,
     filterWrapperClass: props.filterWrapperClass,
     scrollWidth: scrollWidth,
-    onFilterSubmit: _search,
+    onFilterSubmit: search,
     onRequestSort: handleRequestSort
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
@@ -1074,7 +660,7 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
     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(),
@@ -1091,17 +677,15 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
       maxHeight: _Utils.default.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : '42vh'
     },
     id: "mainTableBody"
-  }, stableSort(rows, getSorting(order, orderBy)).map(function (row, index) {
-    var isItemSelected = isSelected(row.id);
-    var labelId = "enhanced-table-checkbox-".concat(index);
+  }, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
+    const isItemSelected = isSelected(row.id);
+    const labelId = `enhanced-table-checkbox-${index}`;
     return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
       style: {
         display: 'flex',
         flexWrap: 'wrap'
       },
-      onClick: function onClick(event) {
-        return handleClick(event, row.id);
-      },
+      onClick: event => handleClick(event, row.id),
       role: "checkbox",
       "aria-checked": isItemSelected,
       tabIndex: -1,
@@ -1118,50 +702,44 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
       inputProps: {
         'aria-labelledby': labelId
       }
-    })) : null, config.columns.map(function (column) {
-      return column.attributes['hidden'] === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
-        style: {
-          padding: 0,
-          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,
-        key: column.id
-      }, /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
-        ref: /*#__PURE__*/_react.default.createRef(),
-        handle: createColumnLayoutHandle(column, index),
-        tableRow: row,
-        config: JSON.parse(JSON.stringify(props.config.columns.find(function (col) {
-          return col.id === column.id;
-        }).layout)),
-        viewId: props.viewId,
-        parent: false
-      })) : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
-        style: {
-          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,
-        key: column.id,
-        onClick: function onClick(event) {
-          return handleCellClick(event, row.id, column);
-        }
-      }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
-        viewId: props.viewId,
-        form: props.form,
-        formValues: props.formValues,
-        editor: column.editor,
-        ref: /*#__PURE__*/_react.default.createRef(),
-        refCallback: createCell,
-        selected: isItemSelected,
-        validator: column.validator,
-        valueChangeHandler: editorChangeHandler,
-        columnConfig: column,
-        dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
-        row: row,
-        contentType: column.fieldType
-      }));
-    }));
+    })) : null, config.columns.map(column => column.attributes['hidden'] === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        padding: 0,
+        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,
+      key: column.id
+    }, /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+      ref: /*#__PURE__*/_react.default.createRef(),
+      handle: createColumnLayoutHandle(column, index),
+      tableRow: row,
+      config: JSON.parse(JSON.stringify(props.config.columns.find(col => col.id === column.id).layout)),
+      viewId: props.viewId,
+      parent: false
+    })) : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+      style: {
+        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,
+      key: column.id,
+      onClick: event => handleCellClick(event, row.id, column)
+    }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
+      viewId: props.viewId,
+      form: props.form,
+      formValues: props.formValues,
+      editor: column.editor,
+      ref: /*#__PURE__*/_react.default.createRef(),
+      refCallback: createCell,
+      selected: isItemSelected,
+      validator: column.validator,
+      valueChangeHandler: editorChangeHandler,
+      columnConfig: column,
+      dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
+      row: row,
+      contentType: column.fieldType
+    }))));
   })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
     rowsPerPageOptions: rowsPerPageOptions,
     component: "div",
@@ -1177,6 +755,4 @@ var DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.for
     onChangePage: handleChangePage,
     onChangeRowsPerPage: handleChangeRowsPerPage
   }) : null) : null);
-}));
-
-exports.DataGrid = DataGrid;
+}));