@lanaco/lnc-react-ui 2.1.28 → 2.1.31

package/lib/index.esm.js

@@ -4621,7 +4621,7 @@ var getCheckboxCss = function getCheckboxCss(props) {
     height = "1.6875rem";
   }
 
-  return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: pointer;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n      cursor: pointer;\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
+  return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: auto;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
 };
 
 var CheckBox = function CheckBox(props) {
@@ -4635,7 +4635,7 @@ var CheckBox = function CheckBox(props) {
 
   var handleChange = function handleChange(e) {
     if (preventDefault) e.preventDefault();
-    onChange(id, !checked);
+    if (!disabled) onChange(id, !checked);
   };
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Global, {
@@ -4754,7 +4754,7 @@ var Text$2 = newStyled.label(_templateObject$q || (_templateObject$q = _taggedTe
 }, function (props) {
   return getLabelAndTextProps()[props.size].top;
 });
-var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: pointer;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
+var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: auto;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
   return props.theme.palette[props.color].main;
 }, function (props) {
   return props.theme.palette[props.color].main;
@@ -4821,7 +4821,7 @@ var ToggleSwitch = function ToggleSwitch(props) {
 
   function handleChange(e) {
     if (preventDefault) e.preventDefault();
-    onChange(id, !value);
+    if (!disabled) onChange(id, !value);
   }
 
   var themeProps = {
@@ -6522,7 +6522,7 @@ var Table$2 = newStyled.div(_templateObject2$l || (_templateObject2$l = _taggedT
 var Body$1 = newStyled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  &::-webkit-scrollbar {\n    background: white;\n    height: 0;\n    width: 0;\n  }\n  overflow: auto;\n  height: ", ";\n"])), function (props) {
   return props.height && props.height !== "" ? props.height : "auto";
 });
-var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  transition: all 250ms ease;\n  background-color: white;\n\n  &:hover {\n    background-color: whitesmoke;\n  }\n"])));
+var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  cursor: default;\n  transition: all 250ms ease;\n  background-color: white;\n\n  &:hover {\n    background-color: whitesmoke;\n  }\n"])));
 var HeaderRow = newStyled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-bottom: 1px solid #80808050;\n  background-color: whitesmoke;\n  border-radius: 3px 3px 0 0;\n  position: sticky;\n"])));
 var HeaderColumnCheck = newStyled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral(["\n  padding: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: ", ";\n  padding-left: 8px;\n  border-right: 1px solid #80808050;\n"])), function (props) {
   return props.check ? "8px" : "0";
@@ -6588,10 +6588,11 @@ var CheckboxLookup = function CheckboxLookup(props) {
       });
     }
 
-    onChange(id, selectedItems);
+    if (!disabled) onChange(id, selectedItems);
   };
 
-  var pageCount = Math.floor(options.length / displayedItemsCount) + 1;
+  var pageDecimalCount = options.length / displayedItemsCount;
+  var pageCount = pageDecimalCount % 1 !== 0 ? Math.floor(options.length / displayedItemsCount) + 1 : pageDecimalCount;
   var label = options.length === selectedOptions.length ? localization.DeselectAll || "Deselect all" : localization.SelectAll || "Select all";
 
   var _options = pagination ? options.slice((page - 1) * displayedItemsCount, page * displayedItemsCount) : options;
@@ -6607,7 +6608,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
     disabled: false,
     checked: options.length > 0 && options.length === selectedOptions.length,
     onChange: function onChange() {
-      return onSelectDeselectAll(options.length > 0 && options.length === selectedOptions.length ? false : true);
+      if (!disabled) onSelectDeselectAll(options.length > 0 && options.length === selectedOptions.length ? false : true);
     },
     color: color,
     size: size,
@@ -6615,10 +6616,10 @@ var CheckboxLookup = function CheckboxLookup(props) {
     tooltip: label
   }) : /*#__PURE__*/React__default.createElement(ToggleSwitch, {
     id: id,
-    disabled: false,
+    disabled: disabled,
     checked: options.length === selectedOptions.length,
     onChange: function onChange() {
-      return onSelectDeselectAll(options.length === selectedOptions.length ? false : true);
+      if (!disabled) onSelectDeselectAll(options.length === selectedOptions.length ? false : true);
     },
     color: color,
     size: size,
@@ -22940,7 +22941,7 @@ var DropdownLookup = function DropdownLookup(props) {
     className: "fas fa-times fa-fw"
   })), loading && /*#__PURE__*/React__default.createElement(LoadingButtonContainer, themeProps, /*#__PURE__*/React__default.createElement("i", {
     className: "fas fa-redo fa-fw"
-  })), !loading && /*#__PURE__*/React__default.createElement(ButtonContainer$3, _extends({}, themeProps, {
+  })), !loading && disabled ? '' : /*#__PURE__*/React__default.createElement(ButtonContainer$3, _extends({}, themeProps, {
     clickable: options == null || options.length === 0,
     onClick: function onClick() {
       if (options == null || options.length === 0) {
@@ -48992,19 +48993,240 @@ var TableSelectionType = {
   MULTIPLE: "multiple"
 };
 
-var _templateObject$i, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8;
-var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
+var _templateObject$i, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
+var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
+var Wrapper$1 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
+var TableTable$1 = newStyled.table(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  border-collapse: collapse;\n  width: 100%;\n"])));
+var TableHead$1 = newStyled.thead(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
+var TableHeadRow$1 = newStyled.tr(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  border-bottom: 1px solid #80808025;\n"])));
+var TableHeadCell$1 = newStyled.th(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral(["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
+  return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
+}, theme.palette.primary.light, function (props) {
+  return props.hideOrdering ? "inherit" : "pointer";
+});
+var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
+var HeaderCellText$1 = newStyled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n  color: black;\n"])));
+var HeaderCellIcon$1 = newStyled.span(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n  color: black;\n  margin-left: auto;\n\n  & i {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.sort ? "transparent" : "black";
+});
+var TableBody$1 = newStyled.tbody(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral([""])));
+var TableBodyRow$1 = newStyled.tr(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid transparent;\n  border-top: 1px solid transparent;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  if (props.selectedRow !== true) return "\n        &:hover {\n          & > td {\n            // border-bottom: 1px solid ".concat(theme.palette.primary.light, ";\n            // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n            background-color: whitesmoke;\n          }\n    \n        cursor: pointer;\n      }");else return "";
+}, function (props) {
+  if (props.selectedRow === true) return "\n        background-color: ".concat(theme.palette.primary.lighter, ";\n        cursor: pointer;\n        \n        & > td {\n          // border-bottom: 1px solid ").concat(theme.palette.primary.light, ";\n          // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n        }\n      ");else return "";
+});
+var TableBodyCell$1 = newStyled.td(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (props) {
+  return props.selectionCell === true ? "1px 1px 1px 6px" : "5px 5px 5px 10px";
+});
+
+var TableView = function TableView(props) {
+  //======== RENDER ========
+  var _props$Config = props.Config,
+      Columns = _props$Config.Columns,
+      Data = _props$Config.Data,
+      IsLoading = _props$Config.IsLoading,
+      ChangeToFormView = _props$Config.ChangeToFormView,
+      SelectedData = _props$Config.SelectedData,
+      SelectionIndicator = _props$Config.SelectionIndicator,
+      SelectedEntirePage = _props$Config.SelectedEntirePage,
+      EnableSelection = _props$Config.EnableSelection,
+      EnableFormView = _props$Config.EnableFormView,
+      SelectionType = _props$Config.SelectionType,
+      _props$Config$OnSelec = _props$Config.OnSelection,
+      OnSelection = _props$Config$OnSelec === void 0 ? function () {} : _props$Config$OnSelec,
+      _props$Config$OnSelec2 = _props$Config.OnSelectAll,
+      OnSelectAll = _props$Config$OnSelec2 === void 0 ? function () {} : _props$Config$OnSelec2;
+      _props$Config.EnablePagination;
+      var EnableOrdering = _props$Config.EnableOrdering,
+      Accessor = _props$Config.Accessor,
+      Ascending = _props$Config.Ascending,
+      Descending = _props$Config.Descending,
+      _props$Config$OnHeade = _props$Config.OnHeaderClick,
+      OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
+      ReadOnly = _props$Config.ReadOnly,
+      _props$Config$IsLooku = _props$Config.IsLookup,
+      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
+      _props$Config$LookupT = _props$Config.LookupTakeItem,
+      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
+  var _props$Localization = props.Localization,
+      Localization = _props$Localization === void 0 ? {} : _props$Localization;
+      props.Export;
+      props.Icons;
+ //======== FUNCTIONS ========
+
+  function isFunction(functionToCheck) {
+    return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
+  }
+
+  var handleOnSelection = function handleOnSelection(rowData, val) {
+    OnSelection(rowData, val, SelectionType);
+  };
+
+  var handleSelectAll = function handleSelectAll(val) {
+    OnSelectAll(val);
+  }; //======== RENDER ========
+
+
+  var isItemInArray = function isItemInArray(item, array, byProp) {
+    if (item[byProp] !== undefined) return !lodash.exports.isUndefined(array.find(function (x) {
+      return x[byProp] === item[byProp];
+    }));
+    return array.indexOf(item) > -1;
+  };
+
+  var renderBody = function renderBody() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Data.map(function (dataItem, i) {
+      return renderBodyRow(dataItem, i);
+    }));
+  };
+
+  var renderBodyRow = function renderBodyRow(dataItem, i) {
+    Columns.find(function (x) {
+      return x.nested;
+    });
+    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
+    return /*#__PURE__*/React__default.createElement(TableBodyRow$1, {
+      selectedRow: rowSelected,
+      key: i
+    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
+      return x.hide !== true;
+    }).map(function (col, j) {
+      return renderBodyCell(dataItem, col, i, j);
+    }));
+  };
+
+  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
+    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
+
+    var onClick = function onClick() {
+      ChangeToFormView(dataItem, rowIndex);
+    };
+
+    if (!EnableFormView) onClick = function onClick() {};
+    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
+
+    if (IsLookup) {
+      onClick = function onClick() {
+        if (!IsLoading) {
+          LookupTakeItem(dataItem);
+        }
+      };
+    }
+
+    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
+    return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
+      key: tabIndex,
+      onClick: onClick
+    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
+      ChangeToFormView(dataItem, rowIndex);
+    }) : cellData);
+  };
+
+  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
+    if (IsLookup) {
+      return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
+        selectionCell: true,
+        key: -1
+      }, /*#__PURE__*/React__default.createElement(Button$1, {
+        inverted: true,
+        onClick: function onClick() {
+          if (!IsLoading) {
+            LookupTakeItem(dataItem);
+          }
+        },
+        icon: "arrow-right"
+      }));
+    }
+
+    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
+      selectionCell: true,
+      key: -1
+    }, /*#__PURE__*/React__default.createElement(CheckBox, {
+      checked: selected,
+      onChange: function onChange(e, val) {
+        return handleOnSelection(dataItem, val);
+      },
+      id: rowIndex
+    }));
+  };
+
+  var renderHeaderCell = function renderHeaderCell(def, i) {
+    var headerClick = function headerClick() {};
+
+    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
+    var isAccessor = def.accessor === Accessor;
+    var orderingIconClass; //-------------------------------------------------------------------
+
+    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
+    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
+    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
+    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
+
+    if (!isAccessor) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
+    };
+    if (isAccessor && Ascending) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
+    };
+    if (isAccessor && Descending) headerClick = function headerClick() {
+      return OnHeaderClick("", "", false, true);
+    }; //-------------------------------------------------------------------
+
+    return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
+      hideOrdering: hideOrdering,
+      key: i,
+      onClick: IsLoading || hideOrdering ? function () {} : headerClick
+    }, /*#__PURE__*/React__default.createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default.createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default.createElement(HeaderCellIcon$1, {
+      sort: orderingIconClass === "sort"
+    }, /*#__PURE__*/React__default.createElement(Icon$1, {
+      color: "white",
+      icon: orderingIconClass
+    }))));
+  };
+
+  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
+    if (IsLookup) return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    });
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+    if (SelectedEntirePage && Localization.DeselectAll) ;
+    if (!SelectedEntirePage && Localization.SelectAll) ;
+    return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default.createElement(CheckBox, {
+      checked: SelectedEntirePage,
+      onChange: function onChange() {
+        return handleSelectAll(!SelectedEntirePage);
+      },
+      id: "SelectedEntirePage"
+    }));
+  };
+
+  return /*#__PURE__*/React__default.createElement(Container$g, null, /*#__PURE__*/React__default.createElement(Wrapper$1, null, /*#__PURE__*/React__default.createElement(TableTable$1, {
+    cellSpacing: 0
+  }, /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__default.createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
+    return x.hide !== true;
+  }).map(function (col, i) {
+    return renderHeaderCell(col, i);
+  }))), /*#__PURE__*/React__default.createElement(TableBody$1, null, renderBody()))));
+};
+
+var _templateObject$h, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7;
+var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
   return props.theme.typography.small.fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
 });
-var Item$2 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var Item$2 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.first ? "0" : "6px";
 });
-var ExportItem = newStyled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
-var ItemText = newStyled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemCurrentPage = newStyled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemDropdown = newStyled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral(["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
+var ExportItem = newStyled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
+var ItemText = newStyled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemCurrentPage = newStyled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemDropdown = newStyled.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
 
 var Pagination = function Pagination(props) {
   //======================== PROPS ============================================
@@ -49172,7 +49394,7 @@ var Pagination = function Pagination(props) {
     })));
   };
 
-  return /*#__PURE__*/React__default.createElement(Container$g, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
+  return /*#__PURE__*/React__default.createElement(Container$f, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
 };
 
 Pagination.defaultProps = {
@@ -49237,227 +49459,6 @@ Pagination.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$h, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
-var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper$1 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
-var TableTable$1 = newStyled.table(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n  border-collapse: collapse;\n  width: 100%;\n"])));
-var TableHead$1 = newStyled.thead(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
-var TableHeadRow$1 = newStyled.tr(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid #80808025;\n"])));
-var TableHeadCell$1 = newStyled.th(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
-  return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
-}, theme.palette.primary.light, function (props) {
-  return props.hideOrdering ? "inherit" : "pointer";
-});
-var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
-var HeaderCellText$1 = newStyled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n  color: black;\n"])));
-var HeaderCellIcon$1 = newStyled.span(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n  color: black;\n  margin-left: auto;\n\n  & i {\n    color: ", ";\n  }\n"])), function (props) {
-  return props.sort ? "transparent" : "black";
-});
-var TableBody$1 = newStyled.tbody(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral([""])));
-var TableBodyRow$1 = newStyled.tr(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid transparent;\n  border-top: 1px solid transparent;\n\n  ", "\n\n  ", "\n"])), function (props) {
-  if (props.selectedRow !== true) return "\n        &:hover {\n          & > td {\n            // border-bottom: 1px solid ".concat(theme.palette.primary.light, ";\n            // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n            background-color: whitesmoke;\n          }\n    \n        cursor: pointer;\n      }");else return "";
-}, function (props) {
-  if (props.selectedRow === true) return "\n        background-color: ".concat(theme.palette.primary.lighter, ";\n        cursor: pointer;\n        \n        & > td {\n          // border-bottom: 1px solid ").concat(theme.palette.primary.light, ";\n          // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n        }\n      ");else return "";
-});
-var TableBodyCell$1 = newStyled.td(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (props) {
-  return props.selectionCell === true ? "1px 1px 1px 6px" : "5px 5px 5px 10px";
-});
-
-var TableView = function TableView(props) {
-  //======== RENDER ========
-  var _props$Config = props.Config,
-      Columns = _props$Config.Columns,
-      Data = _props$Config.Data,
-      IsLoading = _props$Config.IsLoading,
-      ChangeToFormView = _props$Config.ChangeToFormView,
-      SelectedData = _props$Config.SelectedData,
-      SelectionIndicator = _props$Config.SelectionIndicator,
-      SelectedEntirePage = _props$Config.SelectedEntirePage,
-      EnableSelection = _props$Config.EnableSelection,
-      EnableFormView = _props$Config.EnableFormView,
-      SelectionType = _props$Config.SelectionType,
-      _props$Config$OnSelec = _props$Config.OnSelection,
-      OnSelection = _props$Config$OnSelec === void 0 ? function () {} : _props$Config$OnSelec,
-      _props$Config$OnSelec2 = _props$Config.OnSelectAll,
-      OnSelectAll = _props$Config$OnSelec2 === void 0 ? function () {} : _props$Config$OnSelec2;
-      _props$Config.EnablePagination;
-      var EnableOrdering = _props$Config.EnableOrdering,
-      Accessor = _props$Config.Accessor,
-      Ascending = _props$Config.Ascending,
-      Descending = _props$Config.Descending,
-      _props$Config$OnHeade = _props$Config.OnHeaderClick,
-      OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
-      ReadOnly = _props$Config.ReadOnly,
-      _props$Config$IsLooku = _props$Config.IsLookup,
-      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
-      _props$Config$LookupT = _props$Config.LookupTakeItem,
-      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
-  var _props$Localization = props.Localization,
-      Localization = _props$Localization === void 0 ? {} : _props$Localization;
-      props.Export;
-      props.Icons;
- //======== FUNCTIONS ========
-
-  function isFunction(functionToCheck) {
-    return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
-  }
-
-  var handleOnSelection = function handleOnSelection(rowData, val) {
-    OnSelection(rowData, val, SelectionType);
-  };
-
-  var handleSelectAll = function handleSelectAll(val) {
-    OnSelectAll(val);
-  }; //======== RENDER ========
-
-
-  var isItemInArray = function isItemInArray(item, array, byProp) {
-    if (item[byProp] !== undefined) return !lodash.exports.isUndefined(array.find(function (x) {
-      return x[byProp] === item[byProp];
-    }));
-    return array.indexOf(item) > -1;
-  };
-
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Data.map(function (dataItem, i) {
-      return renderBodyRow(dataItem, i);
-    }));
-  };
-
-  var renderBodyRow = function renderBodyRow(dataItem, i) {
-    Columns.find(function (x) {
-      return x.nested;
-    });
-    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableBodyRow$1, {
-      selectedRow: rowSelected,
-      key: i
-    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
-      return x.hide !== true;
-    }).map(function (col, j) {
-      return renderBodyCell(dataItem, col, i, j);
-    })));
-  };
-
-  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
-    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
-
-    var onClick = function onClick() {
-      ChangeToFormView(dataItem);
-    };
-
-    if (!EnableFormView) onClick = function onClick() {};
-    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
-
-    if (IsLookup) {
-      onClick = function onClick() {
-        if (!IsLoading) {
-          LookupTakeItem(dataItem);
-        }
-      };
-    }
-
-    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
-    return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
-      key: tabIndex,
-      onClick: onClick
-    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
-      ChangeToFormView(dataItem);
-    }) : cellData);
-  };
-
-  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
-    if (IsLookup) {
-      return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
-        selectionCell: true,
-        key: -1
-      }, /*#__PURE__*/React__default.createElement(Button$1, {
-        inverted: true,
-        onClick: function onClick() {
-          if (!IsLoading) {
-            LookupTakeItem(dataItem);
-          }
-        },
-        icon: "arrow-right"
-      }));
-    }
-
-    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
-    return /*#__PURE__*/React__default.createElement(TableBodyCell$1, {
-      selectionCell: true,
-      key: -1
-    }, /*#__PURE__*/React__default.createElement(CheckBox, {
-      checked: selected,
-      onChange: function onChange(e, val) {
-        return handleOnSelection(dataItem, val);
-      },
-      id: rowIndex
-    }));
-  };
-
-  var renderHeaderCell = function renderHeaderCell(def, i) {
-    var headerClick = function headerClick() {};
-
-    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
-    var isAccessor = def.accessor === Accessor;
-    var orderingIconClass; //-------------------------------------------------------------------
-
-    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
-    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
-    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
-    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
-
-    if (!isAccessor) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
-    };
-    if (isAccessor && Ascending) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
-    };
-    if (isAccessor && Descending) headerClick = function headerClick() {
-      return OnHeaderClick("", "", false, true);
-    }; //-------------------------------------------------------------------
-
-    return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
-      hideOrdering: hideOrdering,
-      key: i,
-      onClick: IsLoading || hideOrdering ? function () {} : headerClick
-    }, /*#__PURE__*/React__default.createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default.createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default.createElement(HeaderCellIcon$1, {
-      sort: orderingIconClass === "sort"
-    }, /*#__PURE__*/React__default.createElement(Icon$1, {
-      color: "white",
-      icon: orderingIconClass
-    }))));
-  };
-
-  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
-    if (IsLookup) return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1
-    });
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
-    if (SelectedEntirePage && Localization.DeselectAll) ;
-    if (!SelectedEntirePage && Localization.SelectAll) ;
-    return /*#__PURE__*/React__default.createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1
-    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default.createElement(CheckBox, {
-      checked: SelectedEntirePage,
-      onChange: function onChange() {
-        return handleSelectAll(!SelectedEntirePage);
-      },
-      id: "SelectedEntirePage"
-    }));
-  };
-
-  return /*#__PURE__*/React__default.createElement(Container$f, null, /*#__PURE__*/React__default.createElement(Wrapper$1, null, /*#__PURE__*/React__default.createElement(TableTable$1, {
-    cellSpacing: 0
-  }, /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__default.createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
-    return x.hide !== true;
-  }).map(function (col, i) {
-    return renderHeaderCell(col, i);
-  }))), /*#__PURE__*/React__default.createElement(TableBody$1, null, renderBody()))));
-};
-
 var _templateObject$g, _templateObject2$d;
 
 var heightBySize$6 = function heightBySize(size) {

package/lib/index.js

@@ -4662,7 +4662,7 @@ var getCheckboxCss = function getCheckboxCss(props) {
     height = "1.6875rem";
   }
 
-  return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral__default['default'](["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: pointer;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n      cursor: pointer;\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
+  return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral__default['default'](["\n    .c-", "-container {\n      font-family: ", ";\n      display: inline-block;\n      position: relative;\n      padding: 0.25rem;\n      padding-left: ", ";\n      ", "\n      cursor: auto;\n      font-size: ", ";\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      margin: ", ";\n      margin-left: ", ";\n    }\n\n    /* Hide the browser's default checkbox */\n    .c-", "-container input {\n      position: absolute;\n      opacity: 0;\n      cursor: pointer;\n      height: 0;\n      width: 0;\n    }\n\n    /* Create a custom checkbox */\n    .c-", "-checkmark {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: ", ";\n      width: ", ";\n      background-color: #eee;\n      border: 0.0625rem solid ", ";\n      border-radius: 2px;\n      transition: all 200ms ease;\n    }\n\n    /* On mouse-over, add a grey background color */\n    .c-", "-container:hover input ~ .c-", "-checkmark {\n      cursor: pointer;\n    }\n\n    .c-", "-container:hover input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      cursor: default;\n    }\n\n    .c-", "-container input:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    /* When the checkbox is checked, add a blue background */\n    .c-", "-container input:checked ~ .c-", "-checkmark {\n      background-color: ", ";\n    }\n\n    .c-", "-container input:checked:disabled ~ .c-", "-checkmark {\n      background-color: ", ";\n      border: 0.0625rem solid ", ";\n      cursor: default;\n    }\n\n    /* Create the checkmark/indicator (hidden when not checked) */\n    .c-", "-checkmark:after {\n      content: \"\";\n      position: absolute;\n      display: none;\n    }\n\n    /* Show the checkmark when checked */\n    .c-", "-container input:checked ~ .c-", "-checkmark:after {\n      display: block;\n    }\n\n    /* Style the checkmark/indicator */\n    .c-", "-container .c-", "-checkmark:after {\n      left: ", ";\n      top: ", ";\n      width: ", ";\n      height: ", ";\n      border: solid white;\n      border-width: 0 0.21875rem 0.21875rem 0;\n      -webkit-transform: rotate(35deg);\n      -ms-transform: rotate(35deg);\n      transform: rotate(35deg);\n    }\n  "])), props.id, props.theme.typography.fontFamily, padingLeft, paddingTop, props.theme.typography[props.size].fontSize, margin, marginLeft, props.id, props.id, height, width, props.theme.palette[props.color].main, props.id, props.id, props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette.gray[900], props.id, props.id, props.theme.palette[props.color].main, props.id, props.id, props.theme.palette.gray[900], props.theme.palette.gray.textLight, props.id, props.id, props.id, props.id, props.id, left, top, checkWidth, checkHeight);
 };
 
 var CheckBox = function CheckBox(props) {
@@ -4676,7 +4676,7 @@ var CheckBox = function CheckBox(props) {
 
   var handleChange = function handleChange(e) {
     if (preventDefault) e.preventDefault();
-    onChange(id, !checked);
+    if (!disabled) onChange(id, !checked);
   };
 
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Global, {
@@ -4795,7 +4795,7 @@ var Text$2 = newStyled.label(_templateObject$q || (_templateObject$q = _taggedTe
 }, function (props) {
   return getLabelAndTextProps()[props.size].top;
 });
-var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral__default['default'](["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: pointer;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
+var Input$4 = newStyled.input(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral__default['default'](["\n  &:checked + span {\n    background-color: ", ";\n  }\n\n  &:focus + span {\n    box-shadow: 0 0 0.0625rem\n      ", ";\n  }\n\n  &:checked + span:before {\n    transform: translateX(90%);\n  }\n\n  &:checked:disabled + span {\n  }\n\n  &:checked:disabled + span:before {\n    backround-color: red;\n  }\n\n  &:disabled + span {\n    position: absolute;\n    cursor: auto;\n    top: ", ";\n    left: ", ";\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    height: ", ";\n    width: ", ";\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n\n  &:checked:disabled + span:before {\n    position: absolute;\n    content: \"\";\n    height: ", ";\n    width: ", ";\n    left: 0.0625rem;\n    top: -0.125rem;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border: 0.0625rem solid ", ";\n    border-radius: 0.125rem;\n  }\n"])), function (props) {
   return props.theme.palette[props.color].main;
 }, function (props) {
   return props.theme.palette[props.color].main;
@@ -4862,7 +4862,7 @@ var ToggleSwitch = function ToggleSwitch(props) {
 
   function handleChange(e) {
     if (preventDefault) e.preventDefault();
-    onChange(id, !value);
+    if (!disabled) onChange(id, !value);
   }
 
   var themeProps = {
@@ -6563,7 +6563,7 @@ var Table$2 = newStyled.div(_templateObject2$l || (_templateObject2$l = _taggedT
 var Body$1 = newStyled.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: column;\n  &::-webkit-scrollbar {\n    background: white;\n    height: 0;\n    width: 0;\n  }\n  overflow: auto;\n  height: ", ";\n"])), function (props) {
   return props.height && props.height !== "" ? props.height : "auto";
 });
-var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  transition: all 250ms ease;\n  background-color: white;\n\n  &:hover {\n    background-color: whitesmoke;\n  }\n"])));
+var Row = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  cursor: default;\n  transition: all 250ms ease;\n  background-color: white;\n\n  &:hover {\n    background-color: whitesmoke;\n  }\n"])));
 var HeaderRow = newStyled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  border-bottom: 1px solid #80808050;\n  background-color: whitesmoke;\n  border-radius: 3px 3px 0 0;\n  position: sticky;\n"])));
 var HeaderColumnCheck = newStyled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral__default['default'](["\n  padding: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: ", ";\n  padding-left: 8px;\n  border-right: 1px solid #80808050;\n"])), function (props) {
   return props.check ? "8px" : "0";
@@ -6629,10 +6629,11 @@ var CheckboxLookup = function CheckboxLookup(props) {
       });
     }
 
-    onChange(id, selectedItems);
+    if (!disabled) onChange(id, selectedItems);
   };
 
-  var pageCount = Math.floor(options.length / displayedItemsCount) + 1;
+  var pageDecimalCount = options.length / displayedItemsCount;
+  var pageCount = pageDecimalCount % 1 !== 0 ? Math.floor(options.length / displayedItemsCount) + 1 : pageDecimalCount;
   var label = options.length === selectedOptions.length ? localization.DeselectAll || "Deselect all" : localization.SelectAll || "Select all";
 
   var _options = pagination ? options.slice((page - 1) * displayedItemsCount, page * displayedItemsCount) : options;
@@ -6648,7 +6649,7 @@ var CheckboxLookup = function CheckboxLookup(props) {
     disabled: false,
     checked: options.length > 0 && options.length === selectedOptions.length,
     onChange: function onChange() {
-      return onSelectDeselectAll(options.length > 0 && options.length === selectedOptions.length ? false : true);
+      if (!disabled) onSelectDeselectAll(options.length > 0 && options.length === selectedOptions.length ? false : true);
     },
     color: color,
     size: size,
@@ -6656,10 +6657,10 @@ var CheckboxLookup = function CheckboxLookup(props) {
     tooltip: label
   }) : /*#__PURE__*/React__default['default'].createElement(ToggleSwitch, {
     id: id,
-    disabled: false,
+    disabled: disabled,
     checked: options.length === selectedOptions.length,
     onChange: function onChange() {
-      return onSelectDeselectAll(options.length === selectedOptions.length ? false : true);
+      if (!disabled) onSelectDeselectAll(options.length === selectedOptions.length ? false : true);
     },
     color: color,
     size: size,
@@ -22981,7 +22982,7 @@ var DropdownLookup = function DropdownLookup(props) {
     className: "fas fa-times fa-fw"
   })), loading && /*#__PURE__*/React__default['default'].createElement(LoadingButtonContainer, themeProps, /*#__PURE__*/React__default['default'].createElement("i", {
     className: "fas fa-redo fa-fw"
-  })), !loading && /*#__PURE__*/React__default['default'].createElement(ButtonContainer$3, _extends__default['default']({}, themeProps, {
+  })), !loading && disabled ? '' : /*#__PURE__*/React__default['default'].createElement(ButtonContainer$3, _extends__default['default']({}, themeProps, {
     clickable: options == null || options.length === 0,
     onClick: function onClick() {
       if (options == null || options.length === 0) {
@@ -49033,19 +49034,240 @@ var TableSelectionType = {
   MULTIPLE: "multiple"
 };
 
-var _templateObject$i, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8;
-var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
+var _templateObject$i, _templateObject2$f, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
+var Container$g = newStyled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
+var Wrapper$1 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
+var TableTable$1 = newStyled.table(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
+var TableHead$1 = newStyled.thead(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
+var TableHeadRow$1 = newStyled.tr(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
+var TableHeadCell$1 = newStyled.th(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral__default['default'](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
+  return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
+}, theme.palette.primary.light, function (props) {
+  return props.hideOrdering ? "inherit" : "pointer";
+});
+var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
+var HeaderCellText$1 = newStyled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n"])));
+var HeaderCellIcon$1 = newStyled.span(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n  margin-left: auto;\n\n  & i {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.sort ? "transparent" : "black";
+});
+var TableBody$1 = newStyled.tbody(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral__default['default']([""])));
+var TableBodyRow$1 = newStyled.tr(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid transparent;\n  border-top: 1px solid transparent;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  if (props.selectedRow !== true) return "\n        &:hover {\n          & > td {\n            // border-bottom: 1px solid ".concat(theme.palette.primary.light, ";\n            // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n            background-color: whitesmoke;\n          }\n    \n        cursor: pointer;\n      }");else return "";
+}, function (props) {
+  if (props.selectedRow === true) return "\n        background-color: ".concat(theme.palette.primary.lighter, ";\n        cursor: pointer;\n        \n        & > td {\n          // border-bottom: 1px solid ").concat(theme.palette.primary.light, ";\n          // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n        }\n      ");else return "";
+});
+var TableBodyCell$1 = newStyled.td(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n"])), function (props) {
+  return props.selectionCell === true ? "1px 1px 1px 6px" : "5px 5px 5px 10px";
+});
+
+var TableView = function TableView(props) {
+  //======== RENDER ========
+  var _props$Config = props.Config,
+      Columns = _props$Config.Columns,
+      Data = _props$Config.Data,
+      IsLoading = _props$Config.IsLoading,
+      ChangeToFormView = _props$Config.ChangeToFormView,
+      SelectedData = _props$Config.SelectedData,
+      SelectionIndicator = _props$Config.SelectionIndicator,
+      SelectedEntirePage = _props$Config.SelectedEntirePage,
+      EnableSelection = _props$Config.EnableSelection,
+      EnableFormView = _props$Config.EnableFormView,
+      SelectionType = _props$Config.SelectionType,
+      _props$Config$OnSelec = _props$Config.OnSelection,
+      OnSelection = _props$Config$OnSelec === void 0 ? function () {} : _props$Config$OnSelec,
+      _props$Config$OnSelec2 = _props$Config.OnSelectAll,
+      OnSelectAll = _props$Config$OnSelec2 === void 0 ? function () {} : _props$Config$OnSelec2;
+      _props$Config.EnablePagination;
+      var EnableOrdering = _props$Config.EnableOrdering,
+      Accessor = _props$Config.Accessor,
+      Ascending = _props$Config.Ascending,
+      Descending = _props$Config.Descending,
+      _props$Config$OnHeade = _props$Config.OnHeaderClick,
+      OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
+      ReadOnly = _props$Config.ReadOnly,
+      _props$Config$IsLooku = _props$Config.IsLookup,
+      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
+      _props$Config$LookupT = _props$Config.LookupTakeItem,
+      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
+  var _props$Localization = props.Localization,
+      Localization = _props$Localization === void 0 ? {} : _props$Localization;
+      props.Export;
+      props.Icons;
+ //======== FUNCTIONS ========
+
+  function isFunction(functionToCheck) {
+    return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
+  }
+
+  var handleOnSelection = function handleOnSelection(rowData, val) {
+    OnSelection(rowData, val, SelectionType);
+  };
+
+  var handleSelectAll = function handleSelectAll(val) {
+    OnSelectAll(val);
+  }; //======== RENDER ========
+
+
+  var isItemInArray = function isItemInArray(item, array, byProp) {
+    if (item[byProp] !== undefined) return !lodash.exports.isUndefined(array.find(function (x) {
+      return x[byProp] === item[byProp];
+    }));
+    return array.indexOf(item) > -1;
+  };
+
+  var renderBody = function renderBody() {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
+      return renderBodyRow(dataItem, i);
+    }));
+  };
+
+  var renderBodyRow = function renderBodyRow(dataItem, i) {
+    Columns.find(function (x) {
+      return x.nested;
+    });
+    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyRow$1, {
+      selectedRow: rowSelected,
+      key: i
+    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
+      return x.hide !== true;
+    }).map(function (col, j) {
+      return renderBodyCell(dataItem, col, i, j);
+    }));
+  };
+
+  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
+    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
+
+    var onClick = function onClick() {
+      ChangeToFormView(dataItem, rowIndex);
+    };
+
+    if (!EnableFormView) onClick = function onClick() {};
+    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
+
+    if (IsLookup) {
+      onClick = function onClick() {
+        if (!IsLoading) {
+          LookupTakeItem(dataItem);
+        }
+      };
+    }
+
+    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+      key: tabIndex,
+      onClick: onClick
+    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
+      ChangeToFormView(dataItem, rowIndex);
+    }) : cellData);
+  };
+
+  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
+    if (IsLookup) {
+      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+        selectionCell: true,
+        key: -1
+      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+        inverted: true,
+        onClick: function onClick() {
+          if (!IsLoading) {
+            LookupTakeItem(dataItem);
+          }
+        },
+        icon: "arrow-right"
+      }));
+    }
+
+    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+      selectionCell: true,
+      key: -1
+    }, /*#__PURE__*/React__default['default'].createElement(CheckBox, {
+      checked: selected,
+      onChange: function onChange(e, val) {
+        return handleOnSelection(dataItem, val);
+      },
+      id: rowIndex
+    }));
+  };
+
+  var renderHeaderCell = function renderHeaderCell(def, i) {
+    var headerClick = function headerClick() {};
+
+    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
+    var isAccessor = def.accessor === Accessor;
+    var orderingIconClass; //-------------------------------------------------------------------
+
+    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
+    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
+    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
+    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
+
+    if (!isAccessor) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
+    };
+    if (isAccessor && Ascending) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
+    };
+    if (isAccessor && Descending) headerClick = function headerClick() {
+      return OnHeaderClick("", "", false, true);
+    }; //-------------------------------------------------------------------
+
+    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      hideOrdering: hideOrdering,
+      key: i,
+      onClick: IsLoading || hideOrdering ? function () {} : headerClick
+    }, /*#__PURE__*/React__default['default'].createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default['default'].createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default['default'].createElement(HeaderCellIcon$1, {
+      sort: orderingIconClass === "sort"
+    }, /*#__PURE__*/React__default['default'].createElement(Icon$1, {
+      color: "white",
+      icon: orderingIconClass
+    }))));
+  };
+
+  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
+    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    });
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    if (SelectedEntirePage && Localization.DeselectAll) ;
+    if (!SelectedEntirePage && Localization.SelectAll) ;
+    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1
+    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default['default'].createElement(CheckBox, {
+      checked: SelectedEntirePage,
+      onChange: function onChange() {
+        return handleSelectAll(!SelectedEntirePage);
+      },
+      id: "SelectedEntirePage"
+    }));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Container$g, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$1, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
+    cellSpacing: 0
+  }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
+    return x.hide !== true;
+  }).map(function (col, i) {
+    return renderHeaderCell(col, i);
+  }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
+};
+
+var _templateObject$h, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7;
+var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
   return props.theme.typography.small.fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
 });
-var Item$2 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var Item$2 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.first ? "0" : "6px";
 });
-var ExportItem = newStyled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
-var ItemText = newStyled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral__default['default'](["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemCurrentPage = newStyled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemDropdown = newStyled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
+var ExportItem = newStyled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
+var ItemText = newStyled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral__default['default'](["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemCurrentPage = newStyled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemDropdown = newStyled.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
 
 var Pagination = function Pagination(props) {
   //======================== PROPS ============================================
@@ -49213,7 +49435,7 @@ var Pagination = function Pagination(props) {
     })));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$g, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
+  return /*#__PURE__*/React__default['default'].createElement(Container$f, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
 };
 
 Pagination.defaultProps = {
@@ -49278,227 +49500,6 @@ Pagination.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$h, _templateObject2$e, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4;
-var Container$f = newStyled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper$1 = newStyled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
-var TableTable$1 = newStyled.table(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
-var TableHead$1 = newStyled.thead(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
-var TableHeadRow$1 = newStyled.tr(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
-var TableHeadCell$1 = newStyled.th(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral__default['default'](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
-  return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
-}, theme.palette.primary.light, function (props) {
-  return props.hideOrdering ? "inherit" : "pointer";
-});
-var HeaderInnerCell$1 = newStyled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  // justify-content: center;\n\n  & i {\n    color: black;\n  }\n"])));
-var HeaderCellText$1 = newStyled.span(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n"])));
-var HeaderCellIcon$1 = newStyled.span(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral__default['default'](["\n  color: black;\n  margin-left: auto;\n\n  & i {\n    color: ", ";\n  }\n"])), function (props) {
-  return props.sort ? "transparent" : "black";
-});
-var TableBody$1 = newStyled.tbody(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral__default['default']([""])));
-var TableBodyRow$1 = newStyled.tr(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid transparent;\n  border-top: 1px solid transparent;\n\n  ", "\n\n  ", "\n"])), function (props) {
-  if (props.selectedRow !== true) return "\n        &:hover {\n          & > td {\n            // border-bottom: 1px solid ".concat(theme.palette.primary.light, ";\n            // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n            background-color: whitesmoke;\n          }\n    \n        cursor: pointer;\n      }");else return "";
-}, function (props) {
-  if (props.selectedRow === true) return "\n        background-color: ".concat(theme.palette.primary.lighter, ";\n        cursor: pointer;\n        \n        & > td {\n          // border-bottom: 1px solid ").concat(theme.palette.primary.light, ";\n          // border-top: 1px solid ").concat(theme.palette.primary.light, ";\n        }\n      ");else return "";
-});
-var TableBodyCell$1 = newStyled.td(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral__default['default'](["\n  padding: ", ";\n"])), function (props) {
-  return props.selectionCell === true ? "1px 1px 1px 6px" : "5px 5px 5px 10px";
-});
-
-var TableView = function TableView(props) {
-  //======== RENDER ========
-  var _props$Config = props.Config,
-      Columns = _props$Config.Columns,
-      Data = _props$Config.Data,
-      IsLoading = _props$Config.IsLoading,
-      ChangeToFormView = _props$Config.ChangeToFormView,
-      SelectedData = _props$Config.SelectedData,
-      SelectionIndicator = _props$Config.SelectionIndicator,
-      SelectedEntirePage = _props$Config.SelectedEntirePage,
-      EnableSelection = _props$Config.EnableSelection,
-      EnableFormView = _props$Config.EnableFormView,
-      SelectionType = _props$Config.SelectionType,
-      _props$Config$OnSelec = _props$Config.OnSelection,
-      OnSelection = _props$Config$OnSelec === void 0 ? function () {} : _props$Config$OnSelec,
-      _props$Config$OnSelec2 = _props$Config.OnSelectAll,
-      OnSelectAll = _props$Config$OnSelec2 === void 0 ? function () {} : _props$Config$OnSelec2;
-      _props$Config.EnablePagination;
-      var EnableOrdering = _props$Config.EnableOrdering,
-      Accessor = _props$Config.Accessor,
-      Ascending = _props$Config.Ascending,
-      Descending = _props$Config.Descending,
-      _props$Config$OnHeade = _props$Config.OnHeaderClick,
-      OnHeaderClick = _props$Config$OnHeade === void 0 ? function () {} : _props$Config$OnHeade,
-      ReadOnly = _props$Config.ReadOnly,
-      _props$Config$IsLooku = _props$Config.IsLookup,
-      IsLookup = _props$Config$IsLooku === void 0 ? false : _props$Config$IsLooku,
-      _props$Config$LookupT = _props$Config.LookupTakeItem,
-      LookupTakeItem = _props$Config$LookupT === void 0 ? function () {} : _props$Config$LookupT;
-  var _props$Localization = props.Localization,
-      Localization = _props$Localization === void 0 ? {} : _props$Localization;
-      props.Export;
-      props.Icons;
- //======== FUNCTIONS ========
-
-  function isFunction(functionToCheck) {
-    return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
-  }
-
-  var handleOnSelection = function handleOnSelection(rowData, val) {
-    OnSelection(rowData, val, SelectionType);
-  };
-
-  var handleSelectAll = function handleSelectAll(val) {
-    OnSelectAll(val);
-  }; //======== RENDER ========
-
-
-  var isItemInArray = function isItemInArray(item, array, byProp) {
-    if (item[byProp] !== undefined) return !lodash.exports.isUndefined(array.find(function (x) {
-      return x[byProp] === item[byProp];
-    }));
-    return array.indexOf(item) > -1;
-  };
-
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
-      return renderBodyRow(dataItem, i);
-    }));
-  };
-
-  var renderBodyRow = function renderBodyRow(dataItem, i) {
-    Columns.find(function (x) {
-      return x.nested;
-    });
-    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TableBodyRow$1, {
-      selectedRow: rowSelected,
-      key: i
-    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
-      return x.hide !== true;
-    }).map(function (col, j) {
-      return renderBodyCell(dataItem, col, i, j);
-    })));
-  };
-
-  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
-    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
-
-    var onClick = function onClick() {
-      ChangeToFormView(dataItem);
-    };
-
-    if (!EnableFormView) onClick = function onClick() {};
-    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
-
-    if (IsLookup) {
-      onClick = function onClick() {
-        if (!IsLoading) {
-          LookupTakeItem(dataItem);
-        }
-      };
-    }
-
-    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-      key: tabIndex,
-      onClick: onClick
-    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
-      ChangeToFormView(dataItem);
-    }) : cellData);
-  };
-
-  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
-    if (IsLookup) {
-      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-        selectionCell: true,
-        key: -1
-      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
-        inverted: true,
-        onClick: function onClick() {
-          if (!IsLoading) {
-            LookupTakeItem(dataItem);
-          }
-        },
-        icon: "arrow-right"
-      }));
-    }
-
-    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-      selectionCell: true,
-      key: -1
-    }, /*#__PURE__*/React__default['default'].createElement(CheckBox, {
-      checked: selected,
-      onChange: function onChange(e, val) {
-        return handleOnSelection(dataItem, val);
-      },
-      id: rowIndex
-    }));
-  };
-
-  var renderHeaderCell = function renderHeaderCell(def, i) {
-    var headerClick = function headerClick() {};
-
-    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
-    var isAccessor = def.accessor === Accessor;
-    var orderingIconClass; //-------------------------------------------------------------------
-
-    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
-    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
-    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
-    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
-
-    if (!isAccessor) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
-    };
-    if (isAccessor && Ascending) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
-    };
-    if (isAccessor && Descending) headerClick = function headerClick() {
-      return OnHeaderClick("", "", false, true);
-    }; //-------------------------------------------------------------------
-
-    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      hideOrdering: hideOrdering,
-      key: i,
-      onClick: IsLoading || hideOrdering ? function () {} : headerClick
-    }, /*#__PURE__*/React__default['default'].createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default['default'].createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default['default'].createElement(HeaderCellIcon$1, {
-      sort: orderingIconClass === "sort"
-    }, /*#__PURE__*/React__default['default'].createElement(Icon$1, {
-      color: "white",
-      icon: orderingIconClass
-    }))));
-  };
-
-  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
-    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1
-    });
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    if (SelectedEntirePage && Localization.DeselectAll) ;
-    if (!SelectedEntirePage && Localization.SelectAll) ;
-    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1
-    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default['default'].createElement(CheckBox, {
-      checked: SelectedEntirePage,
-      onChange: function onChange() {
-        return handleSelectAll(!SelectedEntirePage);
-      },
-      id: "SelectedEntirePage"
-    }));
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(Container$f, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$1, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
-    cellSpacing: 0
-  }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
-    return x.hide !== true;
-  }).map(function (col, i) {
-    return renderHeaderCell(col, i);
-  }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
-};
-
 var _templateObject$g, _templateObject2$d;
 
 var heightBySize$6 = function heightBySize(size) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "2.1.28",
+  "version": "2.1.31",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",