ywana-core8 0.0.571 → 0.0.574

package/dist/index.cjs

@@ -17,7 +17,7 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment$1);
 var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 
-function _catch$3(body, recover) {
+function _catch$4(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -49,7 +49,7 @@ var fetchAsync = function fetchAsync(method, URL, body, token, headers) {
       body: body
     };
     if (headers) request.headers = request.headers;
-    return Promise.resolve(_catch$3(function () {
+    return Promise.resolve(_catch$4(function () {
       return Promise.resolve(fetch(URL, request)).then(function (response) {
         var _exit;
 
@@ -150,6 +150,24 @@ var Session = {
   }
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 /**
  * Icon 
  */
@@ -182,6 +200,99 @@ var Icon = function Icon(_ref) {
   }, icon);
 };
 
+var Accordion = function Accordion(props) {
+  var className = props.className,
+      _props$sections = props.sections,
+      sections = _props$sections === void 0 ? [] : _props$sections,
+      onCheck = props.onCheck;
+
+  var _useState = React.useState(sections.map(function (section) {
+    return section.open;
+  })),
+      openSections = _useState[0],
+      setOpenSections = _useState[1];
+
+  var _useState2 = React.useState(sections.map(function (section) {
+    return section.checked;
+  })),
+      checkedSections = _useState2[0],
+      setCheckedSections = _useState2[1];
+
+  function toggle(index) {
+    var next = openSections.map(function (open, i) {
+      return i === index ? !open : open;
+    });
+    setOpenSections(next);
+  }
+
+  function check(index) {
+    var next = checkedSections.map(function (checked, i) {
+      return i === index ? !checked : checked;
+    });
+    setCheckedSections(next);
+    if (onCheck) onCheck(index, next[index], sections[index].id);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion " + className
+  }, sections.map(function (section, index) {
+    var isOpen = openSections[index];
+    var isChecked = checkedSections[index];
+    return /*#__PURE__*/React__default["default"].createElement(AccordionSection, _extends({
+      key: index
+    }, section, {
+      open: isOpen,
+      checked: isChecked,
+      onToggle: function onToggle() {
+        return toggle(index);
+      },
+      onCheck: function onCheck() {
+        return check(index);
+      }
+    }), section.children);
+  }));
+};
+
+var AccordionSection = function AccordionSection(props) {
+  var checked = props.checked,
+      icon = props.icon,
+      title = props.title,
+      subtitle = props.subtitle,
+      _props$open = props.open,
+      open = _props$open === void 0 ? false : _props$open,
+      onToggle = props.onToggle,
+      onCheck = props.onCheck,
+      toolbar = props.toolbar,
+      info = props.info,
+      children = props.children;
+  var togglerIcon = open ? "expand_less" : "expand_more";
+  var checkedIcon = checked === undefined || checked === null ? null : checked === false ? "check_box_outline_blank" : "check_box";
+  return /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "accordion-section"
+  }, /*#__PURE__*/React__default["default"].createElement("header", null, checkedIcon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: "accordion-section-checker",
+    icon: checkedIcon,
+    clickable: true,
+    action: onCheck
+  }) : '', icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: "accordion-section-icon",
+    icon: icon
+  }) : '', title ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion-section--title"
+  }, title) : '', subtitle ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion-section--subtitle"
+  }, subtitle) : '', info ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion-section--info"
+  }, info) : '', toolbar ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "accordion-section--toolbar"
+  }, toolbar) : '', /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: "accordion-section-toggler",
+    icon: togglerIcon,
+    clickable: true,
+    action: onToggle
+  })), open ? /*#__PURE__*/React__default["default"].createElement("main", null, children) : '');
+};
+
 /**
  * HTML Button
  */
@@ -501,24 +612,6 @@ var Header = function Header(props) {
   }, props.children));
 };
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 /**
  * List
  */
@@ -859,7 +952,7 @@ var Section = function Section(props) {
   };
 
   return /*#__PURE__*/React__default["default"].createElement("section", {
-    className: "section2 " + className
+    className: "section " + className
   }, /*#__PURE__*/React__default["default"].createElement(Header, {
     icon: icon,
     title: title
@@ -2805,9 +2898,14 @@ var Planner = function Planner(_ref) {
       to = _useState3[0],
       setTo = _useState3[1];
 
+  var thisMondayElement = React.useRef(null);
   React.useEffect(function () {
-    showThisWeek();
-  }, []);
+    console.log(thisMondayElement.current);
+
+    if (thisMondayElement.current) {
+      showThisWeek();
+    }
+  });
   React.useEffect(function () {
     var element = document.getElementById(focusEvent);
     if (element) element.scrollIntoView({
@@ -2961,7 +3059,8 @@ var Planner = function Planner(_ref) {
       events: events,
       period: period,
       onSelectCell: selectCell,
-      onChange: onChange
+      onChange: onChange,
+      thisMondayRef: thisMondayElement
     });
   }))));
 };
@@ -2975,7 +3074,8 @@ var PlannerRow = function PlannerRow(props) {
       events = _props$events === void 0 ? [] : _props$events,
       period = props.period,
       onSelectCell = props.onSelectCell,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      thisMondayRef = props.thisMondayRef;
   var rowEvents = events.filter(function (event) {
     return event.lane === lane.id;
   });
@@ -3000,7 +3100,8 @@ var PlannerRow = function PlannerRow(props) {
       date: date,
       events: cellEvents,
       onSelect: onSelectCell,
-      onDrop: change
+      onDrop: change,
+      thisMondayRef: thisMondayRef
     });
   }));
 };
@@ -3014,7 +3115,8 @@ var PlannerCell = function PlannerCell(_ref2) {
       events = _ref2.events,
       date = _ref2.date,
       onSelect = _ref2.onSelect,
-      onDrop = _ref2.onDrop;
+      onDrop = _ref2.onDrop,
+      thisMondayRef = _ref2.thisMondayRef;
 
   var _useState4 = React.useState(false),
       dragOver = _useState4[0],
@@ -3052,10 +3154,12 @@ var PlannerCell = function PlannerCell(_ref2) {
   var weekend = isWekend ? "weekend" : "";
   var today = moment__default["default"]();
   var weekStart = today.clone().startOf('week');
+  var isThisMonday = date.moment.isSame(weekStart);
   var thisMonday = date.moment.isSame(weekStart) ? "thisMonday" : "";
   var dragOverStyle = dragOver ? "drag-over" : "";
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "cell " + thisMonday + " " + weekend + " " + dragOverStyle,
+    ref: isThisMonday ? thisMondayRef : null,
     onDragOver: onDragOver,
     onDragLeave: onDragLeave,
     onDrop: drop,
@@ -4200,13 +4304,13 @@ var ContentEditor = function ContentEditor(_ref) {
  * Tabbed Content Editor
  */
 
-var TabbedContentEditor = function TabbedContentEditor(_ref2) {
-  var content = _ref2.content,
-      filter = _ref2.filter,
-      _ref2$grouped = _ref2.grouped,
-      grouped = _ref2$grouped === void 0 ? false : _ref2$grouped,
-      onChange = _ref2.onChange,
-      onReload = _ref2.onReload;
+var TabbedContentEditor = function TabbedContentEditor(_ref3) {
+  var content = _ref3.content,
+      filter = _ref3.filter,
+      _ref3$grouped = _ref3.grouped,
+      grouped = _ref3$grouped === void 0 ? false : _ref3$grouped,
+      onChange = _ref3.onChange,
+      onReload = _ref3.onReload;
 
   var _useState = React.useState(0),
       tab = _useState[0],
@@ -4291,9 +4395,9 @@ var TabbedContentEditor = function TabbedContentEditor(_ref2) {
  * TreededContentEditor 
  */
 
-var TreededContentEditor = function TreededContentEditor(_ref3) {
-  var content = _ref3.content,
-      onChange = _ref3.onChange;
+var TreededContentEditor = function TreededContentEditor(_ref4) {
+  var content = _ref4.content,
+      onChange = _ref4.onChange;
   var value = content.value();
   var nodes = Object.values(content.type).filter(function (field) {
     return field.type === TYPES.ARRAY;
@@ -4358,13 +4462,13 @@ var TreededContentEditor = function TreededContentEditor(_ref3) {
  * FieldEditor
  */
 
-var FieldEditor = function FieldEditor(_ref4) {
-  var field = _ref4.field,
-      onChange = _ref4.onChange,
-      content = _ref4.content,
-      _ref4$outlined = _ref4.outlined,
-      outlined = _ref4$outlined === void 0 ? false : _ref4$outlined,
-      onReload = _ref4.onReload;
+var FieldEditor = function FieldEditor(_ref5) {
+  var field = _ref5.field,
+      onChange = _ref5.onChange,
+      content = _ref5.content,
+      _ref5$outlined = _ref5.outlined,
+      outlined = _ref5$outlined === void 0 ? false : _ref5$outlined,
+      onReload = _ref5.onReload;
   var id = field.id,
       type = field.type,
       item = field.item,
@@ -4451,11 +4555,11 @@ var FieldEditor = function FieldEditor(_ref4) {
  * Entity Editor
  */
 
-var EntityEditor = function EntityEditor(_ref5) {
-  var field = _ref5.field,
-      _ref5$value = _ref5.value,
-      value = _ref5$value === void 0 ? {} : _ref5$value,
-      onChange = _ref5.onChange;
+var EntityEditor = function EntityEditor(_ref6) {
+  var field = _ref6.field,
+      _ref6$value = _ref6.value,
+      value = _ref6$value === void 0 ? {} : _ref6$value,
+      onChange = _ref6.onChange;
   var id = field.id,
       item = field.item,
       label = field.label;
@@ -4515,13 +4619,13 @@ var EntityEditor = function EntityEditor(_ref5) {
  */
 
 
-var StringEditor = function StringEditor(_ref6) {
-  var field = _ref6.field,
-      _ref6$value = _ref6.value,
-      value = _ref6$value === void 0 ? '' : _ref6$value,
-      onChange = _ref6.onChange,
-      content = _ref6.content,
-      outlined = _ref6.outlined;
+var StringEditor = function StringEditor(_ref7) {
+  var field = _ref7.field,
+      _ref7$value = _ref7.value,
+      value = _ref7$value === void 0 ? '' : _ref7$value,
+      onChange = _ref7.onChange,
+      content = _ref7.content,
+      outlined = _ref7.outlined;
   var id = field.id,
       format = field.format,
       label = field.label,
@@ -4637,12 +4741,12 @@ var StringEditor = function StringEditor(_ref6) {
  * Number Editor
  */
 
-var NumberEditor = function NumberEditor(_ref7) {
-  var field = _ref7.field,
-      value = _ref7.value,
-      onChange = _ref7.onChange,
-      _ref7$outlined = _ref7.outlined,
-      outlined = _ref7$outlined === void 0 ? false : _ref7$outlined;
+var NumberEditor = function NumberEditor(_ref8) {
+  var field = _ref8.field,
+      value = _ref8.value,
+      onChange = _ref8.onChange,
+      _ref8$outlined = _ref8.outlined,
+      outlined = _ref8$outlined === void 0 ? false : _ref8$outlined;
   var id = field.id,
       label = field.label,
       _field$editable2 = field.editable,
@@ -4675,11 +4779,11 @@ var NumberEditor = function NumberEditor(_ref7) {
  */
 
 
-var ListEditor = function ListEditor(_ref8) {
-  var field = _ref8.field,
-      _ref8$value = _ref8.value,
-      value = _ref8$value === void 0 ? [] : _ref8$value,
-      onChange = _ref8.onChange;
+var ListEditor = function ListEditor(_ref9) {
+  var field = _ref9.field,
+      _ref9$value = _ref9.value,
+      value = _ref9$value === void 0 ? [] : _ref9$value,
+      onChange = _ref9.onChange;
   var label = field.label;
 
   function change(id, value) {
@@ -4699,12 +4803,12 @@ var ListEditor = function ListEditor(_ref8) {
  * Multi Selection Editor
  */
 
-var MultiSelectionEditor = function MultiSelectionEditor(_ref9) {
-  var field = _ref9.field,
-      _ref9$value = _ref9.value,
-      value = _ref9$value === void 0 ? [] : _ref9$value,
-      content = _ref9.content,
-      onChange = _ref9.onChange;
+var MultiSelectionEditor = function MultiSelectionEditor(_ref10) {
+  var field = _ref10.field,
+      _ref10$value = _ref10.value,
+      value = _ref10$value === void 0 ? [] : _ref10$value,
+      content = _ref10.content,
+      onChange = _ref10.onChange;
   var id = field.id,
       label = field.label,
       options = field.options;
@@ -4743,15 +4847,17 @@ var MultiSelectionEditor = function MultiSelectionEditor(_ref9) {
  * Collection Editor
  */
 
-var CollectionEditor$1 = function CollectionEditor(_ref10) {
-  var field = _ref10.field,
-      _ref10$value = _ref10.value,
-      value = _ref10$value === void 0 ? [] : _ref10$value,
-      onChange = _ref10.onChange,
-      onReload = _ref10.onReload;
+var CollectionEditor$1 = function CollectionEditor(_ref11) {
+  var field = _ref11.field,
+      _ref11$value = _ref11.value,
+      value = _ref11$value === void 0 ? [] : _ref11$value,
+      onChange = _ref11.onChange,
+      onReload = _ref11.onReload;
   var id = field.id,
       item = field.item,
       label = field.label,
+      _field$groupBy = field.groupBy,
+      groupBy = _field$groupBy === void 0 ? "field1" : _field$groupBy,
       Feeder = field.Feeder,
       Renderer = field.Renderer,
       _field$Adder = field.Adder,
@@ -4773,42 +4879,24 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     }
   }
 
-  function change(index, cellId, cellValue) {
-    if (onChange) {
-      var next = value.slice();
-      next[index][cellId] = cellValue;
-      onChange(id, next);
-    }
-  }
-
   function reload() {
     if (onReload) onReload();
   }
+  /* const columns = Object.values(item)
+     .filter(field => field.column === true)
+     .map((item) => ({ ...item, onChange: change }))
+   columns.push({ id: 'actions', label: 'Actions' })
+    const rows = value.map((item, index) => ({
+     ...item,
+     id: index,
+     actions: [
+       <Icon icon='delete' clickable action={() => remove(index)} size="small" />
+     ]
+   }))
+    const table = { columns, rows }
+  */
+
 
-  var columns = Object.values(item).filter(function (field) {
-    return field.column === true;
-  }).map(function (item) {
-    return _extends({}, item, {
-      onChange: change
-    });
-  });
-  columns.push({
-    id: 'actions',
-    label: 'Actions'
-  });
-  value.map(function (item, index) {
-    return _extends({}, item, {
-      id: index,
-      actions: [/*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "delete",
-        clickable: true,
-        action: function action() {
-          return remove(index);
-        },
-        size: "small"
-      })]
-    });
-  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "collection-editor"
   }, Renderer ? /*#__PURE__*/React__default["default"].createElement(Renderer, {
@@ -4818,12 +4906,12 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     onChange: onChange,
     onReload: reload
   }) // : <DataTable {...table} editable={editable} />
-  : /*#__PURE__*/React__default["default"].createElement(TableEditor$2, {
+  : /*#__PURE__*/React__default["default"].createElement(TableEditor$3, {
     icon: "info",
     title: label,
     data: value,
     schema: item,
-    groupBy: "field1",
+    groupBy: groupBy,
     canDelete: true,
     remove: remove
   }), /*#__PURE__*/React__default["default"].createElement("footer", null, Feeder ? /*#__PURE__*/React__default["default"].createElement(Feeder, {
@@ -4838,9 +4926,9 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
  * Collection Adder
  */
 
-var CollectionAdder = function CollectionAdder(_ref11) {
-  var item = _ref11.item,
-      onAdd = _ref11.onAdd;
+var CollectionAdder = function CollectionAdder(_ref12) {
+  var item = _ref12.item,
+      onAdd = _ref12.onAdd;
 
   var _useState3 = React.useState(false),
       edit = _useState3[0],
@@ -4909,7 +4997,7 @@ var CollectionAdder = function CollectionAdder(_ref11) {
  */
 
 
-var TableEditor$2 = function TableEditor(props) {
+var TableEditor$3 = function TableEditor(props) {
   var select = function select(row) {
     try {
       if (onSelect) onSelect(row.id);
@@ -5253,7 +5341,7 @@ var EditContentDialog = function EditContentDialog(_ref) {
  * Collection Page
  */
 
-function _catch$2(body, recover) {
+function _catch$3(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -5830,7 +5918,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this2 = this;
 
-        var _temp2 = _catch$2(function () {
+        var _temp2 = _catch$3(function () {
           return Promise.resolve(API.all(null, page)).then(function (data) {
             _this2.all = field ? data[field] : data;
           });
@@ -5879,7 +5967,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
     },
     fetch: function fetch(id) {
       try {
-        return Promise.resolve(_catch$2(function () {
+        return Promise.resolve(_catch$3(function () {
           return Promise.resolve(API.find(id));
         }, function (error) {
           console.log(error);
@@ -5895,7 +5983,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this8 = this;
 
-        var _temp6 = _catch$2(function () {
+        var _temp6 = _catch$3(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this8.load()).then(function () {});
           });
@@ -5912,7 +6000,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this10 = this;
 
-        var _temp8 = _catch$2(function () {
+        var _temp8 = _catch$3(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this10.load()).then(function () {});
           });
@@ -5929,7 +6017,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this12 = this;
 
-        var _temp10 = _catch$2(function () {
+        var _temp10 = _catch$3(function () {
           return Promise.resolve(API.patch(id, form)).then(function () {
             return Promise.resolve(_this12.load()).then(function () {});
           });
@@ -5946,7 +6034,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this14 = this;
 
-        var _temp12 = _catch$2(function () {
+        var _temp12 = _catch$3(function () {
           return Promise.resolve(API.updateProperty(id, propertyName, form)).then(function () {
             return Promise.resolve(_this14.load()).then(function () {});
           });
@@ -5963,7 +6051,7 @@ var CollectionContext = function CollectionContext(url, field, host, page, fetch
       try {
         var _this16 = this;
 
-        var _temp14 = _catch$2(function () {
+        var _temp14 = _catch$3(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this16.load()).then(function () {});
           });
@@ -6176,7 +6264,7 @@ var QUERY = {
  * Table Page
  */
 
-function _catch$1(body, recover) {
+function _catch$2(body, recover) {
   try {
     var result = body();
   } catch (e) {
@@ -6303,7 +6391,7 @@ var TablePage = function TablePage(props) {
       pageContext = _useContext[0],
       setPageContext = _useContext[1];
 
-  var context = TableContext$1(url, field, host, urlQuery, params);
+  var context = TableContext$2(url, field, host, urlQuery, params);
   var selected = pageContext.selected;
   var timer = React.useRef(null);
 
@@ -6403,13 +6491,13 @@ var TablePage = function TablePage(props) {
     if (rowSelected || rowChecked) {
       return /*#__PURE__*/React__default["default"].createElement("aside", {
         className: "table-page"
-      }, rowSelected ? /*#__PURE__*/React__default["default"].createElement(TableRowEditor$1, {
+      }, rowSelected ? /*#__PURE__*/React__default["default"].createElement(TableRowEditor$2, {
         content: new Content(schema, form),
         filter: editorFilter,
         onChange: change,
         onClose: closeAside,
         editable: canEdit
-      }) : null, rowChecked ? /*#__PURE__*/React__default["default"].createElement(TableSelector$1, {
+      }) : null, rowChecked ? /*#__PURE__*/React__default["default"].createElement(TableSelector$2, {
         schema: schema,
         actions: selectionActions
       }) : null);
@@ -6450,17 +6538,17 @@ var TablePage = function TablePage(props) {
     onSelect: playScenario
   })) : null, renderActions()), canQuery || canFilter ? /*#__PURE__*/React__default["default"].createElement("menu", {
     className: "table-page"
-  }, canQuery ? /*#__PURE__*/React__default["default"].createElement(TableQueries$1, {
+  }, canQuery ? /*#__PURE__*/React__default["default"].createElement(TableQueries$2, {
     schema: schema,
     url: url,
     user: user
-  }) : null, canFilter ? /*#__PURE__*/React__default["default"].createElement(TableFilters$1, {
+  }) : null, canFilter ? /*#__PURE__*/React__default["default"].createElement(TableFilters$2, {
     schema: schema,
     onSave: canQuery ? saveQuery : null
   }) : null) : null, /*#__PURE__*/React__default["default"].createElement("main", {
     key: id,
     className: "table-page"
-  }, /*#__PURE__*/React__default["default"].createElement(TableEditor$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TableEditor$2, {
     icon: icon,
     title: name,
     schema: schema,
@@ -6474,7 +6562,7 @@ var TablePage = function TablePage(props) {
   }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null), renderAside());
 };
 
-var TableRowEditor$1 = function TableRowEditor(props) {
+var TableRowEditor$2 = function TableRowEditor(props) {
   var name = props.name,
       content = props.content,
       filter = props.filter,
@@ -6503,7 +6591,7 @@ var TableRowEditor$1 = function TableRowEditor(props) {
  */
 
 
-var TableSelector$1 = function TableSelector(props) {
+var TableSelector$2 = function TableSelector(props) {
   var schema = props.schema,
       _props$actions2 = props.actions,
       actions = _props$actions2 === void 0 ? [] : _props$actions2;
@@ -6541,8 +6629,10 @@ var TableSelector$1 = function TableSelector(props) {
       action: function action() {
         return _action(checked, pageContext, function () {
           try {
-            return Promise.resolve(pageContext.load()).then(function () {
-              setPageContext(Object.assign({}, pageContext));
+            return Promise.resolve(pageContext.clearChecks()).then(function () {
+              return Promise.resolve(pageContext.load()).then(function () {
+                setPageContext(Object.assign({}, pageContext));
+              });
             });
           } catch (e) {
             return Promise.reject(e);
@@ -6566,7 +6656,7 @@ var TableSelector$1 = function TableSelector(props) {
  */
 
 
-var TableQueries$1 = function TableQueries(props) {
+var TableQueries$2 = function TableQueries(props) {
   var remove = function remove(id) {
     try {
       return Promise.resolve(pageContext.removeQuery(id, user)).then(function () {
@@ -6628,7 +6718,7 @@ var TableQueries$1 = function TableQueries(props) {
  */
 
 
-var TableFilters$1 = function TableFilters(props) {
+var TableFilters$2 = function TableFilters(props) {
   var reload = function reload() {
     try {
       return Promise.resolve(pageContext.load(form)).then(function () {
@@ -6724,7 +6814,7 @@ var TableFilters$1 = function TableFilters(props) {
  */
 
 
-var TableEditor$1 = function TableEditor(props) {
+var TableEditor$2 = function TableEditor(props) {
   var checkOne = function checkOne(id, field, value) {
     check([id], value);
     return Promise.resolve();
@@ -6956,8 +7046,8 @@ var TableEditor$1 = function TableEditor(props) {
  * Table Context
  */
 
-var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
-  var API = TableAPI$1(url, host, params);
+var TableContext$2 = function TableContext(url, field, host, urlQuery, params) {
+  var API = TableAPI$2(url, host, params);
   return {
     all: [],
     checked: new Set([]),
@@ -6968,7 +7058,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this2 = this;
 
-        var _temp5 = _catch$1(function () {
+        var _temp5 = _catch$2(function () {
           var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
             var field = filter[key];
 
@@ -7014,6 +7104,9 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
         });
       }
     },
+    clearChecks: function clearChecks() {
+      this.checked = new Set([]);
+    },
     select: function select(id) {
       var result = this.all.find(function (item) {
         return item.id === id;
@@ -7027,7 +7120,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this5 = this;
 
-        var _temp7 = _catch$1(function () {
+        var _temp7 = _catch$2(function () {
           return Promise.resolve(API.create(form)).then(function () {
             return Promise.resolve(_this5.load()).then(function () {});
           });
@@ -7044,7 +7137,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this7 = this;
 
-        var _temp9 = _catch$1(function () {
+        var _temp9 = _catch$2(function () {
           return Promise.resolve(API.update(form)).then(function () {
             return Promise.resolve(_this7.load()).then(function () {});
           });
@@ -7061,7 +7154,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this9 = this;
 
-        var _temp11 = _catch$1(function () {
+        var _temp11 = _catch$2(function () {
           return Promise.resolve(API.remove(id)).then(function () {
             return Promise.resolve(_this9.load()).then(function () {});
           });
@@ -7081,7 +7174,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this11 = this;
 
-        var _temp13 = _catch$1(function () {
+        var _temp13 = _catch$2(function () {
           return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
             _this11.queries = _API$queries;
           });
@@ -7098,7 +7191,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this13 = this;
 
-        var _temp15 = _catch$1(function () {
+        var _temp15 = _catch$2(function () {
           return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
             return Promise.resolve(_this13.loadQueries(user)).then(function () {});
           });
@@ -7115,7 +7208,7 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
       try {
         var _this15 = this;
 
-        var _temp17 = _catch$1(function () {
+        var _temp17 = _catch$2(function () {
           return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
             return Promise.resolve(_this15.loadQueries(user)).then(function () {});
           });
@@ -7135,6 +7228,1023 @@ var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
  */
 
 
+var TableAPI$2 = function TableAPI(url, host, params) {
+  if (params === void 0) {
+    params = "";
+  }
+
+  var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
+  return {
+    all: function all(filters) {
+      var queryParams = "?" + params;
+
+      if (filters) {
+        var filterQuery = Object.keys(filters).reduce(function (query, key) {
+          var value = filters[key];
+
+          if (typeof value === 'boolean') {
+            return query.concat(key + "=" + value + "&");
+          } else if (Array.isArray(value)) {
+            var param = value.length === 0 ? '' : value.reduce(function (param, item) {
+              param = param.concat(key + "=" + item + "&");
+              return param;
+            }, "");
+            return query.concat(param);
+          } else {
+            return query.concat(key + "=%" + filters[key] + "%&");
+          }
+        }, "");
+        queryParams = queryParams.concat(filterQuery);
+      }
+
+      return http.GET(url + queryParams);
+    },
+    find: function find(id) {
+      return http.GET(url + "/" + id);
+    },
+    create: function create(form) {
+      var body = JSON.stringify(form);
+      return http.POST(url, body);
+    },
+    update: function update(form) {
+      var body = JSON.stringify(form);
+      return http.PUT(url + "/" + form.id, body);
+    },
+    remove: function remove(id) {
+      return http.DELETE(url + "/" + id);
+    },
+    queries: function queries(user, url2) {
+      var url3 = url2 ? url2 : url;
+      url3 = url3 + "queries";
+      if (user) url3 = url3 + ("?user=" + user);
+      return http.GET(url3);
+    },
+    createQuery: function createQuery(form, url2) {
+      var url3 = url2 ? url2 : url;
+      var body = JSON.stringify(form);
+      return http.POST(url3 + "queries", body);
+    },
+    removeQuery: function removeQuery(id, url2) {
+      var url3 = url2 ? url2 : url;
+      return http.DELETE(url3 + "queries/" + id);
+    }
+  };
+};
+
+/**
+ * Table Page
+ */
+
+function _catch$1(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+
+  return result;
+}
+/**
+ * TableRowEditor
+ */
+
+
+var TablePage2 = function TablePage2(props) {
+  var save = function save() {
+    try {
+      return Promise.resolve(pageContext.update(form)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var reload = function reload() {
+    try {
+      return Promise.resolve(pageContext.load()).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var site = React.useContext(SiteContext);
+  var _props$id = props.id,
+      id = _props$id === void 0 ? "table" : _props$id,
+      icon = props.icon,
+      title = props.title,
+      name = props.name,
+      schema = props.schema,
+      url = props.url,
+      field = props.field,
+      host = props.host,
+      _props$params = props.params,
+      params = _props$params === void 0 ? "" : _props$params,
+      _props$canQuery = props.canQuery,
+      canQuery = _props$canQuery === void 0 ? false : _props$canQuery,
+      urlQuery = props.urlQuery,
+      user = props.user,
+      editable = props.editable,
+      _props$autosave = props.autosave,
+      autosave = _props$autosave === void 0 ? true : _props$autosave,
+      _props$delay = props.delay,
+      delay = _props$delay === void 0 ? 1000 : _props$delay,
+      _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      tableActions = props.tableActions,
+      _props$selectionActio = props.selectionActions,
+      selectionActions = _props$selectionActio === void 0 ? [] : _props$selectionActio,
+      _props$canFilter = props.canFilter,
+      canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
+      _props$canAdd = props.canAdd,
+      canAdd = _props$canAdd === void 0 ? true : _props$canAdd,
+      _props$canDelete = props.canDelete,
+      canDelete = _props$canDelete === void 0 ? true : _props$canDelete,
+      _props$canEdit = props.canEdit,
+      canEdit = _props$canEdit === void 0 ? true : _props$canEdit,
+      groupBy = props.groupBy,
+      validator = props.validator,
+      formFilter = props.formFilter,
+      tableFilter = props.tableFilter,
+      _props$editorFilter = props.editorFilter,
+      editorFilter = _props$editorFilter === void 0 ? false : _props$editorFilter,
+      tabbedBy = props.tabbedBy,
+      tableClassName = props.tableClassName,
+      children = props.children;
+
+  var _useContext = React.useContext(PageContext),
+      setPageContext = _useContext[1];
+
+  var context = TableContext$1(url, field, host, urlQuery, params);
+  var _pageContext = pageContext,
+      selected = _pageContext.selected;
+  var timer = React.useRef(null);
+
+  var _useState = React.useState(selected),
+      form = _useState[0],
+      setForm = _useState[1];
+
+  React.useEffect(function () {
+    try {
+      return Promise.resolve(context.load()).then(function () {
+        function _temp2() {
+          setPageContext(context);
+        }
+
+        var _temp = function () {
+          if (canQuery) return Promise.resolve(context.loadQueries(user)).then(function () {});
+        }();
+
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+  React.useEffect(function () {
+    setForm(selected);
+  }, [selected]);
+  React.useEffect(function () {
+    if (autosave) {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(function () {
+        if (canSave()) save();
+      }, delay);
+    }
+  }, [form]);
+
+  function add() {
+    var onOK = function onOK(form) {
+      try {
+        return Promise.resolve(pageContext.create(form)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    site.openDialog( /*#__PURE__*/React__default["default"].createElement(CreateContentDialog, {
+      label: "Crear " + name,
+      type: schema,
+      onOK: onOK,
+      validator: validator,
+      filter: formFilter
+    }));
+  }
+
+  function saveQuery(filters) {
+    var onOK = function onOK(form) {
+      try {
+        form.filters = filters;
+        form.layout = {};
+        form.user = user;
+        form.url = url;
+        return Promise.resolve(pageContext.createQuery(form, user)).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    site.openDialog( /*#__PURE__*/React__default["default"].createElement(CreateContentDialog, {
+      label: "Nueva query",
+      type: QUERY,
+      onOK: onOK
+    }));
+  }
+
+  function change(next) {
+    setForm(next);
+  }
+
+  function canSave() {
+    var can = !equal__default["default"](form, selected);
+    return can;
+  }
+
+  function closeAside() {
+    pageContext.select(null);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function renderAside() {
+    var rowSelected = selected && form;
+    var rowChecked = pageContext.checked && pageContext.checked.size > 0;
+
+    if (rowSelected || rowChecked) {
+      return /*#__PURE__*/React__default["default"].createElement("aside", {
+        className: "table-page"
+      }, rowSelected ? /*#__PURE__*/React__default["default"].createElement(TableRowEditor$1, {
+        content: new Content(schema, form),
+        filter: editorFilter,
+        onChange: change,
+        onClose: closeAside,
+        editable: canEdit
+      }) : null, rowChecked ? /*#__PURE__*/React__default["default"].createElement(TableSelector$1, {
+        schema: schema,
+        actions: selectionActions
+      }) : null);
+    }
+
+    return null;
+  }
+
+  function renderActions() {
+    return actions.map(function (element) {
+      var action = function action() {
+        return element.props.action(pageContext);
+      };
+
+      var clone = React__default["default"].cloneElement(element, {
+        action: action
+      });
+      return clone;
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    className: "table-page",
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+  }, canAdd ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    icon: "add",
+    label: "A\xF1adir",
+    action: add,
+    raised: true
+  }) : null, "\xA0", /*#__PURE__*/React__default["default"].createElement(Button, {
+    icon: "refresh",
+    label: "Reload",
+    action: reload
+  }), renderActions()), canQuery || canFilter ? /*#__PURE__*/React__default["default"].createElement("menu", {
+    className: "table-page"
+  }, canQuery ? /*#__PURE__*/React__default["default"].createElement(TableQueries$1, {
+    schema: schema,
+    url: url,
+    user: user
+  }) : null, canFilter ? /*#__PURE__*/React__default["default"].createElement(TableFilters$1, {
+    schema: schema,
+    onSave: canQuery ? saveQuery : null
+  }) : null) : null, /*#__PURE__*/React__default["default"].createElement("main", {
+    key: id,
+    className: "table-page"
+  }, /*#__PURE__*/React__default["default"].createElement(TableEditor$1, {
+    icon: icon,
+    title: name,
+    schema: schema,
+    delay: delay,
+    editable: editable,
+    tabbedBy: tabbedBy,
+    groupBy: groupBy,
+    filter: tableFilter,
+    actions: tableActions,
+    canDelete: canDelete,
+    className: tableClassName
+  }), children ? /*#__PURE__*/React__default["default"].createElement("article", null, children) : null), renderAside());
+};
+
+var TableRowEditor$1 = function TableRowEditor(props) {
+  var name = props.name,
+      content = props.content,
+      filter = props.filter,
+      editable = props.editable,
+      onChange = props.onChange,
+      onClose = props.onClose;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "table-row-editor"
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    icon: "local_offer",
+    title: name || "Propiedades"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    action: onClose
+  })), /*#__PURE__*/React__default["default"].createElement("main", null, editable ? /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+    content: content,
+    onChange: onChange,
+    filter: filter
+  }) : /*#__PURE__*/React__default["default"].createElement(ContentViewer, {
+    content: content
+  })));
+};
+/**
+ * Table Selector
+ */
+
+
+var TableSelector$1 = function TableSelector(props) {
+  var schema = props.schema,
+      _props$actions2 = props.actions,
+      actions = _props$actions2 === void 0 ? [] : _props$actions2;
+
+  var _useContext2 = React.useContext(PageContext),
+      pageContext = _useContext2[0],
+      setPageContext = _useContext2[1];
+
+  var all = pageContext.all,
+      checked = pageContext.checked;
+  var count = checked.size + "/" + all.length;
+  var columns = Object.keys(schema).filter(function (key) {
+    return schema[key].selectorColumn === true;
+  }).map(function (key) {
+    var field = schema[key];
+    return {
+      id: field.id,
+      label: field.label
+    };
+  });
+  var rows = all.filter(function (item) {
+    return checked.has(item.id);
+  });
+  var table = {
+    columns: columns,
+    rows: rows || []
+  };
+  var buttons = actions.map(function (_ref) {
+    var label = _ref.label,
+        _action = _ref.action,
+        validate = _ref.validate;
+    return /*#__PURE__*/React__default["default"].createElement(Button, {
+      label: label,
+      raised: true,
+      action: function action() {
+        return _action(checked, pageContext, function () {
+          try {
+            return Promise.resolve(pageContext.load()).then(function () {
+              setPageContext(Object.assign({}, pageContext));
+            });
+          } catch (e) {
+            return Promise.reject(e);
+          }
+        }, rows);
+      },
+      disabled: !validate(checked, rows)
+    });
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "table-selector"
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    icon: "checklist_rtl",
+    title: "Selecci\xF3n"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "size"
+  }, count)), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(DataTable, table)), /*#__PURE__*/React__default["default"].createElement("footer", null, buttons));
+};
+/**
+ * Table Queries
+ */
+
+
+var TableQueries$1 = function TableQueries(props) {
+  var remove = function remove(id) {
+    try {
+      return Promise.resolve(pageContext.removeQuery(id, user)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext3 = React.useContext(PageContext),
+      pageContext = _useContext3[0],
+      setPageContext = _useContext3[1];
+
+  var url = props.url,
+      user = props.user;
+  var _pageContext$queries = pageContext.queries,
+      queries = _pageContext$queries === void 0 ? [] : _pageContext$queries;
+
+  var _useState2 = React.useState(),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  function select(query) {
+    setSelected(query.id);
+    pageContext.changeFilters(query.filters);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    className: "table-queries",
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Queries")
+  }), /*#__PURE__*/React__default["default"].createElement("main", {
+    className: "table-queries"
+  }, queries ? queries.filter(function (query) {
+    return query.url === url;
+  }).map(function (query) {
+    var style = selected === query.id ? "selected" : "";
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "table-queries-item " + style,
+      onClick: function onClick() {
+        return select(query);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "star",
+      size: "small"
+    }), /*#__PURE__*/React__default["default"].createElement("label", null, query.name), /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: function action() {
+        return remove(query.id);
+      }
+    }));
+  }) : /*#__PURE__*/React__default["default"].createElement("div", null, "...empty...")));
+};
+/**
+ * Table Filters
+ */
+
+
+var TableFilters$1 = function TableFilters(props) {
+  var reload = function reload() {
+    try {
+      return Promise.resolve(pageContext.load(form)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var change = function change(next) {
+    try {
+      setForm(next);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var _useContext4 = React.useContext(PageContext),
+      pageContext = _useContext4[0],
+      setPageContext = _useContext4[1];
+
+  var filters = pageContext.filters;
+  var schema = props.schema,
+      onSave = props.onSave;
+
+  var _useState3 = React.useState({}),
+      form = _useState3[0],
+      setForm = _useState3[1];
+
+  var filterSchema = React.useMemo(function () {
+    var filterSchema = Object.assign({}, schema);
+
+    for (var key in filterSchema) {
+      if (filterSchema[key].filter === false) {
+        delete filterSchema[key];
+      } else {
+        if (filterSchema[key].type === TYPES.ENTITY) {
+          var fs = filterSchema[key].item;
+
+          for (var key in fs) {
+            if (fs[key].filter === false) delete fs[key];
+          }
+        }
+      }
+    } //Object.values(filterSchema).forEach(field => field.section = null)
+
+
+    delete filterSchema.flows;
+    return filterSchema;
+  }, [schema]);
+  React.useEffect(function () {
+    if (filters) setForm(filters);
+  }, [filters]);
+  React.useEffect(function () {
+    reload();
+  }, [form]);
+
+  function clear() {
+    change({});
+  }
+
+  function save() {
+    if (onSave) {
+      onSave(form);
+    }
+  }
+
+  var content = new Content(filterSchema, form);
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    className: "table-filters",
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, "Filters")
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "filter_list_off",
+    size: "small",
+    clickable: true,
+    action: clear
+  }), onSave ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "save",
+    size: "small",
+    clickable: true,
+    action: save
+  }) : null), /*#__PURE__*/React__default["default"].createElement("main", {
+    className: "table-filters"
+  }, /*#__PURE__*/React__default["default"].createElement(ContentEditor, {
+    content: content,
+    onChange: change
+  })));
+};
+/**
+ * Table Editor
+ */
+
+
+var TableEditor$1 = function TableEditor(props) {
+  var checkOne = function checkOne(id, field, value) {
+    check([id], value);
+    return Promise.resolve();
+  };
+
+  var check = function check(ids, value) {
+    try {
+      pageContext.check(ids, value);
+      setPageContext(Object.assign({}, pageContext));
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var select = function select(row, event) {
+    try {
+      clear();
+      return Promise.resolve(pageContext.select(row.id)).then(function () {
+        setPageContext(Object.assign({}, pageContext));
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var remove = function remove(id) {
+    try {
+      return Promise.resolve(site.confirm("Are you sure ?")).then(function (confirm) {
+        var _temp5 = function () {
+          if (confirm) {
+            return Promise.resolve(pageContext.remove(id)).then(function () {
+              pageContext.clear();
+              setPageContext(Object.assign({}, pageContext));
+            });
+          }
+        }();
+
+        if (_temp5 && _temp5.then) return _temp5.then(function () {});
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var site = React.useContext(SiteContext);
+
+  var _useContext5 = React.useContext(PageContext),
+      pageContext = _useContext5[0],
+      setPageContext = _useContext5[1];
+
+  var _pageContext$all = pageContext.all,
+      all = _pageContext$all === void 0 ? [] : _pageContext$all;
+  var icon = props.icon,
+      title = props.title,
+      schema = props.schema,
+      editable = props.editable,
+      canDelete = props.canDelete,
+      filter = props.filter,
+      actions = props.actions,
+      className = props.className;
+
+  var _useState4 = React.useState(props.groupBy),
+      groupBy = _useState4[0],
+      setGroupBy = _useState4[1];
+
+  var _useState5 = React.useState(0),
+      tab = _useState5[0];
+
+  React.useEffect(function () {
+    try {
+      var _temp4 = function () {
+        if (tab) {
+          var _filter2;
+
+          var _filter = (_filter2 = {}, _filter2[tab.field] = tab.value, _filter2);
+
+          return Promise.resolve(pageContext.load(_filter, [])).then(function () {
+            setPageContext(Object.assign({}, pageContext));
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [tab]);
+
+  function changeGroup(id, value) {
+    setGroupBy(value);
+  }
+
+  function change(rowID, cellID, value) {
+    var _Object$assign;
+
+    var row = all.find(function (r) {
+      return r.id === rowID;
+    });
+    var next = Object.assign({}, row, (_Object$assign = {}, _Object$assign[cellID] = value, _Object$assign));
+    delete next.actions;
+    pageContext.update(next);
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function clear() {
+    pageContext.clear();
+    setPageContext(Object.assign({}, pageContext));
+  }
+
+  function run(action, item) {
+    action.action(item.id, pageContext, function () {
+      try {
+        return Promise.resolve(pageContext.load()).then(function () {
+          setPageContext(Object.assign({}, pageContext));
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    });
+  }
+
+  function buildGroupOptions(schema) {
+    return Object.values(schema).filter(function (field) {
+      return field.grouper === true;
+    }).map(function (field) {
+      return {
+        label: field.label,
+        value: field.id
+      };
+    });
+  }
+
+  function renderGroupLabel(groupName) {
+    var grouper = schema[groupBy];
+    if (!groupName || !grouper) return "";
+
+    if (grouper.options) {
+      var options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options;
+      var option = options.find(function (option) {
+        return option.value === groupName;
+      });
+      return option ? option.label : groupName;
+    } else {
+      return groupName;
+    }
+  }
+
+  var tabField = Object.values(schema).find(function (field) {
+    return field.tab === true;
+  });
+  var tabs = tabField ? tabField.options.map(function (option) {
+    return Object.assign({}, option, {
+      field: tabField.id
+    });
+  }) : [];
+  var table = React.useMemo(function () {
+    return {
+      columns: Object.values(schema).filter(function (field) {
+        return field.column === true;
+      }).map(function (field) {
+        var options = field.options;
+
+        if (options && typeof options == 'function') {
+          options = options();
+        }
+
+        return {
+          id: field.id,
+          label: field.label,
+          type: field.type,
+          format: field.format,
+          item: field.item ? field.item : [],
+          onChange: field.id === "checked" ? checkOne : field.editable ? change : null,
+
+          /* checked has it´s own handler */
+          options: options
+        };
+      }),
+      rows: []
+    };
+  }, [schema]);
+  var items = filter ? filter(all) : all;
+  if (items.length === 0) return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "empty-message"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "search_off"
+  }), /*#__PURE__*/React__default["default"].createElement(Text, null, "No Result Found"));
+  var groups = items.reduce(function (groups, item) {
+    var groupName = item[groupBy];
+    if (!groups[groupName]) groups[groupName] = [];
+    groups[groupName].push(item);
+    return groups;
+  }, {});
+  var sections = Object.keys(groups).map(function (groupName) {
+    var rows = groups[groupName].map(function (item) {
+      item.checked = pageContext.checked ? pageContext.checked.has(item.id) : false;
+      item.actions = actions ? actions.map(function (_action2) {
+        return _action2.filter ? _action2.filter(item) ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+          icon: _action2.icon,
+          clickable: true,
+          size: "small",
+          action: function action() {
+            return run(_action2, item);
+          }
+        }) : null : /*#__PURE__*/React__default["default"].createElement(Icon, {
+          icon: _action2.icon,
+          clickable: true,
+          size: "small",
+          action: function action() {
+            return run(_action2, item);
+          }
+        });
+      }) : [];
+      if (canDelete) item.actions.push( /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "delete",
+        size: "small",
+        clickable: true,
+        action: function action() {
+          return remove(item.id);
+        }
+      }));
+      return item;
+    });
+    table.rows = rows;
+    return {
+      id: groupName,
+      checked: false,
+      title: renderGroupLabel(groupName),
+      info: groups[groupName].length,
+      open: true,
+      children: /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
+        onRowSelection: select,
+        editable: editable,
+        onCheckAll: check,
+        className: className
+      }))
+    };
+  });
+  return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+    icon: icon,
+    title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+  }, groupBy ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
+    id: "groupBy",
+    label: "Agrupar Por",
+    value: groupBy,
+    options: buildGroupOptions(schema),
+    onChange: changeGroup
+  }) : null, tabbedBy ? /*#__PURE__*/React__default["default"].createElement(Tabs, {
+    fillRight: true,
+    fillLeft: false
+  }, tabs.map(function (tab) {
+    return /*#__PURE__*/React__default["default"].createElement(Tab, {
+      id: tab.value,
+      label: tab.label
+    });
+  })) : ''), /*#__PURE__*/React__default["default"].createElement("main", {
+    className: "table-editor"
+  }, /*#__PURE__*/React__default["default"].createElement(Accordion, {
+    sections: sections
+  })));
+};
+/**
+ * Table Context
+ */
+
+var TableContext$1 = function TableContext(url, field, host, urlQuery, params) {
+  var API = TableAPI$1(url, host, params);
+  return {
+    all: [],
+    checked: new Set([]),
+    selected: null,
+    filters: {},
+    queries: [],
+    load: function load(filter) {
+      try {
+        var _this2 = this;
+
+        var _temp7 = _catch$1(function () {
+          var filters = filter ? Object.keys(filter).reduce(function (filters, key) {
+            var field = filter[key];
+
+            if (field) {
+              if (CHECK['isObject'](field)) {
+                Object.keys(field).forEach(function (key2) {
+                  var subfield = field[key2];
+                  if (subfield) filters[key + "." + key2] = subfield;
+                });
+              } else {
+                filters[key] = field;
+              }
+            }
+
+            return filters;
+          }, {}) : [];
+          return Promise.resolve(API.all(filters)).then(function (data) {
+            _this2.all = field ? data[field] : data;
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    check: function check(ids, isChecked) {
+      var _this3 = this;
+
+      if (isChecked === void 0) {
+        isChecked = true;
+      }
+
+      if (isChecked) {
+        ids.forEach(function (id) {
+          return _this3.checked.add(id);
+        });
+      } else {
+        ids.forEach(function (id) {
+          return _this3.checked["delete"](id);
+        });
+      }
+    },
+    select: function select(id) {
+      var result = this.all.find(function (item) {
+        return item.id === id;
+      });
+      this.selected = result;
+    },
+    clear: function clear() {
+      this.selected = null;
+    },
+    create: function create(form) {
+      try {
+        var _this5 = this;
+
+        var _temp9 = _catch$1(function () {
+          return Promise.resolve(API.create(form)).then(function () {
+            return Promise.resolve(_this5.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    update: function update(form) {
+      try {
+        var _this7 = this;
+
+        var _temp11 = _catch$1(function () {
+          return Promise.resolve(API.update(form)).then(function () {
+            return Promise.resolve(_this7.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp11 && _temp11.then ? _temp11.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    remove: function remove(id) {
+      try {
+        var _this9 = this;
+
+        var _temp13 = _catch$1(function () {
+          return Promise.resolve(API.remove(id)).then(function () {
+            return Promise.resolve(_this9.load()).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp13 && _temp13.then ? _temp13.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    changeFilters: function changeFilters(filters) {
+      this.filters = filters;
+    },
+    loadQueries: function loadQueries(user) {
+      try {
+        var _this11 = this;
+
+        var _temp15 = _catch$1(function () {
+          return Promise.resolve(API.queries(user, urlQuery)).then(function (_API$queries) {
+            _this11.queries = _API$queries;
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp15 && _temp15.then ? _temp15.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    createQuery: function createQuery(query, user) {
+      try {
+        var _this13 = this;
+
+        var _temp17 = _catch$1(function () {
+          return Promise.resolve(API.createQuery(query, urlQuery)).then(function () {
+            return Promise.resolve(_this13.loadQueries(user)).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp17 && _temp17.then ? _temp17.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    removeQuery: function removeQuery(id, user) {
+      try {
+        var _this15 = this;
+
+        var _temp19 = _catch$1(function () {
+          return Promise.resolve(API.removeQuery(id, urlQuery)).then(function () {
+            return Promise.resolve(_this15.loadQueries(user)).then(function () {});
+          });
+        }, function (error) {
+          console.log(error);
+        });
+
+        return Promise.resolve(_temp19 && _temp19.then ? _temp19.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  };
+};
+/**
+ * Table API
+ */
+
+
 var TableAPI$1 = function TableAPI(url, host, params) {
   if (params === void 0) {
     params = "";
@@ -8300,6 +9410,7 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
+exports.Accordion = Accordion;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Calendar = Calendar;
@@ -8359,8 +9470,9 @@ exports.Tab = Tab;
 exports.TabbedContentEditor = TabbedContentEditor;
 exports.TabbedTablePage = TabbedTablePage;
 exports.TabbedView = TabbedView;
-exports.TableEditor = TableEditor$1;
+exports.TableEditor = TableEditor$2;
 exports.TablePage = TablePage;
+exports.TablePage2 = TablePage2;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;