ywana-core8 0.0.570 → 0.0.573

package/dist/index.umd.js

@@ -11,7 +11,7 @@
   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) {
@@ -43,7 +43,7 @@
         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;
 
@@ -144,6 +144,24 @@
     }
   };
 
+  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 
    */
@@ -176,6 +194,99 @@
     }, 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
    */
@@ -495,24 +606,6 @@
     }, 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
    */
@@ -853,7 +946,7 @@
     };
 
     return /*#__PURE__*/React__default["default"].createElement("section", {
-      className: "section2 " + className
+      className: "section " + className
     }, /*#__PURE__*/React__default["default"].createElement(Header, {
       icon: icon,
       title: title
@@ -1384,7 +1477,6 @@
       setOpen(false);
       var label = verbose ? option.label : "";
       setLabel(label);
-      console.log("dd.select", value);
       if (onChange) onChange(id, next);
     }
 
@@ -2045,7 +2137,6 @@
 
     function changeDropDown(fid, value) {
       var next = Array.isArray(tokens) ? tokens.concat(value) : [value];
-      console.log("next", next);
       if (onChange) onChange(id, next);
       setValue('');
     }
@@ -2071,7 +2162,6 @@
     }
 
     var tks = Array.isArray(tokens) ? tokens : [];
-    console.log("render", tks);
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "tokenField"
     }, /*#__PURE__*/React__default["default"].createElement("label", null, label), tks.map(function (text, index) {
@@ -3624,7 +3714,9 @@
             return _goto(id);
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
-          text: title
+          text: title,
+          top: ".5rem",
+          left: "2rem"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           key: id,
           icon: icon,
@@ -4195,13 +4287,13 @@
    * 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],
@@ -4286,9 +4378,9 @@
    * 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;
@@ -4353,13 +4445,13 @@
    * 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,
@@ -4446,11 +4538,11 @@
    * 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;
@@ -4510,13 +4602,13 @@
    */
 
 
-  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,
@@ -4632,12 +4724,12 @@
    * 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,
@@ -4670,11 +4762,11 @@
    */
 
 
-  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) {
@@ -4694,12 +4786,12 @@
    * 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;
@@ -4738,15 +4830,17 @@
    * 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,
@@ -4768,42 +4862,24 @@
       }
     }
 
-    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, {
@@ -4813,12 +4889,12 @@
       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, {
@@ -4833,9 +4909,9 @@
    * 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],
@@ -4904,7 +4980,7 @@
    */
 
 
-  var TableEditor$2 = function TableEditor(props) {
+  var TableEditor$3 = function TableEditor(props) {
     var select = function select(row) {
       try {
         if (onSelect) onSelect(row.id);
@@ -5248,7 +5324,7 @@
    * Collection Page
    */
 
-  function _catch$2(body, recover) {
+  function _catch$3(body, recover) {
     try {
       var result = body();
     } catch (e) {
@@ -5825,7 +5901,7 @@
         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;
             });
@@ -5874,7 +5950,7 @@
       },
       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);
@@ -5890,7 +5966,7 @@
         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 () {});
             });
@@ -5907,7 +5983,7 @@
         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 () {});
             });
@@ -5924,7 +6000,7 @@
         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 () {});
             });
@@ -5941,7 +6017,7 @@
         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 () {});
             });
@@ -5958,7 +6034,7 @@
         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 () {});
             });
@@ -6171,7 +6247,7 @@
    * Table Page
    */
 
-  function _catch$1(body, recover) {
+  function _catch$2(body, recover) {
     try {
       var result = body();
     } catch (e) {
@@ -6298,7 +6374,7 @@
         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);
 
@@ -6398,13 +6474,13 @@
       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);
@@ -6445,17 +6521,17 @@
       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,
@@ -6469,7 +6545,7 @@
     }), 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,
@@ -6498,7 +6574,7 @@
    */
 
 
-  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;
@@ -6536,8 +6612,10 @@
         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);
@@ -6561,7 +6639,7 @@
    */
 
 
-  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 () {
@@ -6623,7 +6701,7 @@
    */
 
 
-  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 () {
@@ -6719,7 +6797,7 @@
    */
 
 
-  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();
@@ -6951,8 +7029,8 @@
    * 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([]),
@@ -6963,7 +7041,7 @@
         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];
 
@@ -7009,6 +7087,9 @@
           });
         }
       },
+      clearChecks: function clearChecks() {
+        this.checked = new Set([]);
+      },
       select: function select(id) {
         var result = this.all.find(function (item) {
           return item.id === id;
@@ -7022,7 +7103,7 @@
         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 () {});
             });
@@ -7039,7 +7120,7 @@
         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 () {});
             });
@@ -7056,7 +7137,7 @@
         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 () {});
             });
@@ -7076,7 +7157,7 @@
         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;
             });
@@ -7093,7 +7174,7 @@
         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 () {});
             });
@@ -7110,7 +7191,7 @@
         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 () {});
             });
@@ -7130,6 +7211,1023 @@
    */
 
 
+  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 = "";
@@ -8295,6 +9393,7 @@
     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;
@@ -8354,8 +9453,9 @@
   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;