@helpdice/ui 1.3.4 → 1.3.6

package/dist/index.js

@@ -14410,9 +14410,9 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
   var changeHandle = React.useCallback(function (ev) {
     if (isDisabled) return;
     var selfEvent = {
-      target: {
+      target: _objectSpread2(_objectSpread2({}, ev.target), {}, {
         checked: !selfChecked
-      },
+      }),
       stopPropagation: ev.stopPropagation,
       preventDefault: ev.preventDefault,
       nativeEvent: ev
@@ -42836,238 +42836,576 @@ function Placeholder(_ref) {
   }, msg));
 }
 
-var TableBody = function TableBody(_ref) {
-  var data = _ref.data,
-    emptyText = _ref.emptyText,
-    onRow = _ref.onRow,
-    onCell = _ref.onCell,
-    rowClassName = _ref.rowClassName,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+function DataTable(_ref) {
+  var _ref$cols = _ref.cols,
+    cols = _ref$cols === undefined ? [] : _ref$cols,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === undefined ? [] : _ref$rows,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    onSelected = _ref.onSelected;
-  var theme = useTheme();
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === undefined ? [] : _ref$heading,
+    _ref$filter = _ref.filter,
+    filter = _ref$filter === undefined ? true : _ref$filter,
+    menu = _ref.menu,
+    _ref$sideMenu = _ref.sideMenu,
+    sideMenu = _ref$sideMenu === undefined ? false : _ref$sideMenu,
+    _ref$style = _ref.style,
+    style = _ref$style === undefined ? {} : _ref$style,
+    children = _ref.children,
+    _ref$onBack = _ref.onBack,
+    onBack = _ref$onBack === undefined ? function () {
+      window.history.back();
+    } : _ref$onBack,
+    onRefresh = _ref.onRefresh,
+    onFilters = _ref.onFilters,
+    onSelectedDelete = _ref.onSelectedDelete,
+    onSelectedEdit = _ref.onSelectedEdit,
+    onSelected = _ref.onSelected,
+    _ref$disableViewColum = _ref.disableViewColumn,
+    disableViewColumn = _ref$disableViewColum === undefined ? false : _ref$disableViewColum,
+    _ref$rowDraggable = _ref.rowDraggable,
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    onDragOver = _ref.onDragOver,
+    onDragEnter = _ref.onDragEnter,
+    onDragLeave = _ref.onDragLeave,
+    onDrop = _ref.onDrop,
+    onRowClick = _ref.onRowClick,
+    dataLength = _ref.dataLength,
+    viewLength = _ref.viewLength,
+    _onPageChange = _ref.onPageChange,
+    _ref$disableMenu = _ref.disableMenu,
+    disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
+  var TABLE_ID = _.uniqueId('tbl');
+  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
-  var _useTableContext = useTableContext(),
-    columns = _useTableContext.columns;
-  // const rowClickHandler = (row: TableDataItem, index: number) => {
-  //   onRow && onRow(row, index)
-  // }
+  // const [table_filters] = useDebounce(filters, 500);
+  // const open = Boolean(anchorEl);
+  // const handleMenuOpen = (event: any) => {
+  //     setAnchorEl(event.currentTarget);
+  // };
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hideColumn = _useState4[0],
+    setHideColumn = _useState4[1];
+  // const handleMenuClose = () => {
+  //     setAnchorEl(null);
+  // };
 
-  var handleClick = function handleClick(_event, id) {
-    if (readOnly) {
-      return true;
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openFilter = _useState6[0],
+    setOpenFilter = _useState6[1];
+  var handleShowFilter = function handleShowFilter() {
+    return setOpenFilter(!openFilter);
+  };
+  React.useEffect(function () {
+    if (selected.length > 0 && onSelected) {
+      onSelected(selected);
     }
-    var selectedIndex = selected.indexOf(id);
+  }, [selected]);
+  React.useEffect(function () {
+    cols.forEach(function (col) {
+      if (hideColumn.includes(col.name)) {
+        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
+          el.style.display = 'none';
+        });
+      } else {
+        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
+          el.style.display = '';
+        });
+      }
+    });
+  }, [hideColumn, cols, rows]);
+  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
+    var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, id);
+      newSelected = newSelected.concat(hideColumn, id);
     } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
+      newSelected = newSelected.concat(hideColumn.slice(1));
+    } else if (selectedIndex === hideColumn.length - 1) {
+      newSelected = newSelected.concat(hideColumn.slice(0, -1));
     } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+      newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
     }
-    setSelected(newSelected);
+    setHideColumn(newSelected);
   };
 
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //   if (event.target.checked) {
-  //     const newSelecteds = data.map((n: any) => n._id);
-  //     setSelected(newSelecteds as never[]);
-  //     return;
-  //   }
-  //   setSelected([]);
-  // };
-
-  // Push Selected Rows
+  // Children change reset selected
   React.useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
-  function renderRow(cols, row, index) {
-    var _row$style;
-    var urid = _.uniqueId();
-    var className = rowClassName(row, index);
-    var rw = _objectSpread2({}, row);
-    var rowStyle = (_row$style = row === null || row === undefined ? undefined : row.style) !== null && _row$style !== undefined ? _row$style : {};
-    var onDragStart = row === null || row === undefined ? undefined : row.onDragStart;
-    delete rw.table;
-    delete rw.style;
-    delete rw.onDragStart;
-    // console.log(row);
-    // const frow = Object.fromEntries(
-    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
-    // ) as unknown as TableDataItem
-    // console.log(frow);
-    var isRowSelected = selected.indexOf(row) !== -1;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
-      draggable: rowDraggable,
-      role: "checkbox",
-      onDragStart: onDragStart,
-      "aria-checked": selected.indexOf(row) !== -1,
-      tabIndex: -1,
-      key: urid,
-      style: _objectSpread2({
-        cursor: 'pointer',
-        backgroundColor: isRowSelected ? '#efefef' : ''
-      }, rowStyle),
-      onClick: function onClick(e) {
-        if (!rowDraggable) {
-          if (onRow) {
-            onRow(row, index);
-          } else {
-            handleClick(e, row);
-          }
-        }
-      },
-      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      columns: cols,
-      row: rw,
-      rowIndex: index,
-      emptyText: emptyText,
-      onCellClick: onCell
-    })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2019708038",
-      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-  }
-  if ((data === null || data === undefined ? undefined : data.length) === 0) {
-    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      colSpan: columns === null || columns === undefined ? undefined : columns.length
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
-      empty: true,
-      msg: "No Entries Found"
-    })))));
-  }
-  return /*#__PURE__*/React.createElement("tbody", {
-    className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-  }, data.map(function (row, index) {
-    var qid = _.uniqueId();
-    if (row === null || row === undefined) {
-      var uid = _.uniqueId();
-      return /*#__PURE__*/React.createElement("tr", {
-        key: uid,
-        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-      }, /*#__PURE__*/React.createElement("td", {
-        colSpan: columns.length,
-        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-      }, "\u2003"));
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
-      key: qid,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    }, /*#__PURE__*/React.createElement("td", {
-      style: {
-        padding: '1rem'
-      },
-      colSpan: columns.length,
-      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    })));
+    setSelected([]);
+  }, [children]);
 
-    // return (
-    //   <tr
-    //     key={`tbody-row-${index}`}
-    //     className={useClasses({ hover }, className)}
-    //     onClick={() => rowClickHandler(row, index)}>
-    //     <TableCell<TableDataItem>
-    //       columns={columns}
-    //       row={row}
-    //       rowIndex={index}
-    //       emptyText={emptyText}
-    //       onCellClick={onCell}
-    //     />
-    //   </tr>
-    // )
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1422656197",
-    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
-};
-TableBody.displayName = 'TableBody';
+  // const tableHeadStyle = {
+  //     position: 'sticky',
+  //     // backgroundColor: '#fafafb',
+  //     // boxShadow: '0 2px 2px -1px rgba(0, 0, 0, 0.4)',
+  //     top: 0,
+  //     zIndex: 9,
+  //     '& .MuiTableCell-root': {
+  //         fontSize: '14px !important',
+  //         py: 0.2
+  //     }
+  //     // ...borderStyle
+  // };
 
-/* "use client" */
+  // const borderStyle = {
+  //     '& .MuiTableCell-root': {
+  //         py: 0.2,
+  //         px: 1
+  //         // borderLeft: '1px solid #ccc !important',
+  //         // borderRight: '1px solid #ccc !important'
+  //     },
+  //     '& td:first-of-type': {
+  //         borderLeft: 'none !important'
+  //     },
+  //     '& td:last-child': {
+  //         borderRight: 'none !important'
+  //     }
+  //     // '& tr': { borderBottom: '1px solid #ccc !important' }
+  // };
 
-var TableColumn = function TableColumn(columnProps) {
-  var _ref = columnProps,
-    children = _ref.children,
-    prop = _ref.prop,
-    label = _ref.label,
-    width = _ref.width,
-    filter = _ref.filter,
-    options = _ref.options,
-    noWrap = _ref.noWrap,
-    align = _ref.align,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    renderHandler = _ref.render;
-  var _useTableContext = useTableContext(),
-    updateColumn = _useTableContext.updateColumn;
-  var safeProp = "".concat(prop.toString()).trim();
-  if (!safeProp) {
-    useWarning('The props "prop" is required.', 'Table.Column');
-  }
-  React.useEffect(function () {
-    updateColumn({
-      label: children || label,
-      filter: filter,
-      noWrap: noWrap,
-      options: options,
-      prop: safeProp,
-      width: width,
-      align: align,
-      fontSize: fontSize,
-      className: className,
-      renderHandler: function renderHandler() {}
+  var COLUMNS = cols.filter(function (col) {
+    return !hideColumn.includes(col.name);
+  });
+  var content = function content() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      return /*#__PURE__*/React.createElement(Popover.Item, {
+        key: colunqid
+        // selected={!hideColumn.includes(option.name as never)}
+        ,
+        onClick: function onClick(e) {
+          return handleHideColumnClick(e, option.name);
+        }
+      }, /*#__PURE__*/React.createElement("span", null, option.name));
+    }));
+  };
+  return /*#__PURE__*/React.createElement(GridContainer, {
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid.Container, {
+    style: {
+      marginBottom: '0.5rem',
+      marginTop: '0.5rem'
+    }
+  }, heading && /*#__PURE__*/React.createElement(Grid, {
+    sm: disableMenu ? 24 : 12,
+    xs: 24
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1rem'
+    }
+  }, children && /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ArrowLeft$1, null),
+    onClick: onBack
+  }), heading)), !disableMenu && /*#__PURE__*/React.createElement(Grid, {
+    sm: 12,
+    xs: 24
+  }, /*#__PURE__*/React.createElement(GridContainer, {
+    width: "100%",
+    style: {
+      margin: 0,
+      gap: '0.6rem'
+    },
+    justify: "flex-end",
+    alignContent: "center"
+  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Edit Selected",
+    placement: "bottom",
+    font: 0.8,
+    px: 0.6,
+    py: 0.4,
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return onSelectedEdit(selected[0]);
+    },
+    iconRight: /*#__PURE__*/React.createElement(Edit, null),
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6
+  })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Delete Selected",
+    placement: "bottom",
+    font: 0.8,
+    px: 0.6,
+    py: 0.4,
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return onSelectedDelete(selected);
+    },
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
+  })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Refresh",
+    placement: "bottom",
+    font: 0.8,
+    px: 0.6,
+    py: 0.4,
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return onRefresh();
+    },
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
+  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Filters",
+    placement: "bottomEnd",
+    font: 0.8,
+    px: 0.6,
+    py: 0.4,
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleShowFilter,
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(Filters, null)
+  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Columns",
+    placement: "bottomEnd",
+    font: 0.8,
+    px: 0.6,
+    py: 0.4,
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    placement: "bottomEnd",
+    child: content
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {},
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(Columns$1, null)
+  })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '1rem'
+    }
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      gap: 5,
+      display: 'flex',
+      flexDirection: sideMenu ? 'row' : 'column'
+    }
+  }, sideMenu && /*#__PURE__*/React.createElement(GridContainer, {
+    direction: "column",
+    style: {
+      width: '15rem',
+      padding: '0.5rem 0.7rem',
+      border: '1px solid #cfcfcf',
+      borderRadius: '5px'
+    }
+  }, sideMenu), /*#__PURE__*/React.createElement("div", {
+    onDragOver: onDragOver,
+    onDragEnter: onDragEnter,
+    onDragLeave: onDragLeave,
+    onDrop: onDrop,
+    id: TABLE_ID,
+    style: _objectSpread2({
+      overflow: 'auto',
+      position: 'relative',
+      height: 'calc(100vh - 8.5rem)',
+      maxWidth: 'calc(100vw - 1rem)',
+      width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
+    }, style)
+  }, /*#__PURE__*/React.createElement(Table, {
+    stickyHeader: true,
+    dataLength: dataLength,
+    viewLength: viewLength,
+    onPageChange: function onPageChange(page, start, end) {
+      if (_onPageChange) {
+        _onPageChange(page, start, end);
+      }
+    },
+    onRow: onRowClick,
+    rowDraggable: rowDraggable,
+    showFilters: openFilter,
+    onSelected: function onSelected(selected) {
+      return setSelected(selected);
+    },
+    onFilters: onFilters,
+    data: rows,
+    style: {
+      borderCollapse: 'collapse',
+      overflow: 'auto'
+    }
+  }, COLUMNS.map(function (column, index) {
+    return /*#__PURE__*/React.createElement(Table.Column, {
+      options: column === null || column === undefined ? undefined : column.options,
+      fontSize: column === null || column === undefined ? undefined : column.fontSize,
+      key: "".concat(column.id, "-").concat(index),
+      prop: column.id,
+      label: column.name,
+      filter: column === null || column === undefined ? undefined : column.filter,
+      noWrap: column === null || column === undefined ? undefined : column.noWrap,
+      align: column === null || column === undefined ? undefined : column.align
     });
-  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
-  return null;
-};
-TableColumn.displayName = 'TableColumn';
+  })))));
+}
+var DataTable$1 = /*#__PURE__*/React.memo(DataTable);
 
-var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
-function TableComponent(tableProps) {
-  /* eslint-disable  @typescript-eslint/no-unused-vars */
-  var _ref = tableProps,
-    children = _ref.children,
-    customData = _ref.data,
-    _ref$initialData = _ref.initialData,
-    initialData = _ref$initialData === undefined ? [] : _ref$initialData,
-    _ref$hover = _ref.hover,
-    hover = _ref$hover === undefined ? true : _ref$hover,
-    _ref$emptyText = _ref.emptyText,
-    emptyText = _ref$emptyText === undefined ? '' : _ref$emptyText,
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+    emptyText = _ref.emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    rowClassName = _ref.rowClassName,
     _ref$rowDraggable = _ref.rowDraggable,
     rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    onRow = _ref.onRow,
-    onCell = _ref.onCell;
-    _ref.onChange;
-    var onFilters = _ref.onFilters,
-    onPageChange = _ref.onPageChange,
-    _ref$showFilters = _ref.showFilters,
-    showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
-    _ref$stickyHeader = _ref.stickyHeader,
-    stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
-    onSelected = _ref.onSelected,
-    dataLength = _ref.dataLength,
-    viewLength = _ref.viewLength,
-    _ref$className = _ref.className,
-    className = _ref$className === undefined ? '' : _ref$className,
-    _ref$rowClassName = _ref.rowClassName,
-    rowClassName = _ref$rowClassName === undefined ? function () {
-      return '';
-    } : _ref$rowClassName,
+    onSelected = _ref.onSelected;
+  var theme = useTheme();
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var _useTableContext = useTableContext(),
+    columns = _useTableContext.columns;
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
+  var handleClick = function handleClick(_event, id) {
+    if (readOnly) {
+      return true;
+    }
+    var selectedIndex = selected.indexOf(id);
+    var newSelected = [];
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+    setSelected(newSelected);
+    if (newSelected.length > 0 && onSelected) {
+      onSelected(newSelected);
+    }
+  };
+
+  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
+  //   if (event.target.checked) {
+  //     const newSelecteds = data.map((n: any) => n._id);
+  //     setSelected(newSelecteds as never[]);
+  //     return;
+  //   }
+  //   setSelected([]);
+  // };
+
+  // Push Selected Rows
+  // useEffect(() => {
+  //   if (selected.length > 0 && onSelected) {
+  //     onSelected(selected);
+  //   }
+  // }, [selected]);
+
+  function renderRow(cols, row, index) {
+    var _row$style;
+    var urid = _.uniqueId();
+    var className = rowClassName(row, index);
+    var rw = _objectSpread2({}, row);
+    var rowStyle = (_row$style = row === null || row === undefined ? undefined : row.style) !== null && _row$style !== undefined ? _row$style : {};
+    var onDragStart = row === null || row === undefined ? undefined : row.onDragStart;
+    delete rw.table;
+    delete rw.style;
+    delete rw.onDragStart;
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
+    var isRowSelected = selected.indexOf(row) !== -1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+      draggable: rowDraggable,
+      role: "checkbox",
+      onDragStart: onDragStart,
+      "aria-checked": selected.indexOf(row) !== -1,
+      tabIndex: -1,
+      key: urid,
+      style: _objectSpread2({
+        cursor: 'pointer',
+        backgroundColor: isRowSelected ? '#efefef' : ''
+      }, rowStyle),
+      onClick: function onClick(e) {
+        if (!rowDraggable) {
+          if (onRow) {
+            onRow(row, index);
+          } else {
+            handleClick(e, row);
+          }
+        }
+      },
+      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      columns: cols,
+      row: rw,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    })), /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "2019708038",
+      dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+  }
+  if ((data === null || data === undefined ? undefined : data.length) === 0) {
+    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      colSpan: columns === null || columns === undefined ? undefined : columns.length
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Placeholder, {
+      empty: true,
+      msg: "No Entries Found"
+    })))));
+  }
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
+    var qid = _.uniqueId();
+    if (row === null || row === undefined) {
+      var uid = _.uniqueId();
+      return /*#__PURE__*/React.createElement("tr", {
+        key: uid,
+        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+      }, /*#__PURE__*/React.createElement("td", {
+        colSpan: columns.length,
+        className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+      }, "\u2003"));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
+      key: qid,
+      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+    }, /*#__PURE__*/React.createElement("td", {
+      style: {
+        padding: '1rem'
+      },
+      colSpan: columns.length,
+      className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+    }, /*#__PURE__*/React.createElement(DataTable$1, {
+      readOnly: true,
+      stickyHeader: false,
+      style: _objectSpread2({
+        height: 'auto !important'
+      }, row === null || row === undefined || (_row$table = row.table) === null || _row$table === undefined ? undefined : _row$table.style),
+      menu: (_row$table2 = row.table) === null || _row$table2 === undefined ? undefined : _row$table2.menu,
+      rows: (_row$table3 = row.table) === null || _row$table3 === undefined ? undefined : _row$table3.rows,
+      heading: (_row$table4 = row.table) === null || _row$table4 === undefined ? undefined : _row$table4.heading,
+      cols: (_row$table5 = row.table) === null || _row$table5 === undefined ? undefined : _row$table5.cols
+    }))));
+
+    // return (
+    //   <tr
+    //     key={`tbody-row-${index}`}
+    //     className={useClasses({ hover }, className)}
+    //     onClick={() => rowClickHandler(row, index)}>
+    //     <TableCell<TableDataItem>
+    //       columns={columns}
+    //       row={row}
+    //       rowIndex={index}
+    //       emptyText={emptyText}
+    //       onCellClick={onCell}
+    //     />
+    //   </tr>
+    // )
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1422656197",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+TableBody.displayName = 'TableBody';
+
+/* "use client" */
+
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+    children = _ref.children,
+    prop = _ref.prop,
+    label = _ref.label,
+    width = _ref.width,
+    filter = _ref.filter,
+    options = _ref.options,
+    noWrap = _ref.noWrap,
+    align = _ref.align,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    renderHandler = _ref.render;
+  var _useTableContext = useTableContext(),
+    updateColumn = _useTableContext.updateColumn;
+  var safeProp = "".concat(prop.toString()).trim();
+  if (!safeProp) {
+    useWarning('The props "prop" is required.', 'Table.Column');
+  }
+  React.useEffect(function () {
+    updateColumn({
+      label: children || label,
+      filter: filter,
+      noWrap: noWrap,
+      options: options,
+      prop: safeProp,
+      width: width,
+      align: align,
+      fontSize: fontSize,
+      className: className,
+      renderHandler: function renderHandler() {}
+    });
+  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  return null;
+};
+TableColumn.displayName = 'TableColumn';
+
+var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+function TableComponent(tableProps) {
+  /* eslint-disable  @typescript-eslint/no-unused-vars */
+  var _ref = tableProps,
+    children = _ref.children,
+    customData = _ref.data,
+    _ref$initialData = _ref.initialData,
+    initialData = _ref$initialData === undefined ? [] : _ref$initialData,
+    _ref$hover = _ref.hover,
+    hover = _ref$hover === undefined ? true : _ref$hover,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === undefined ? '' : _ref$emptyText,
+    _ref$rowDraggable = _ref.rowDraggable,
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell;
+    _ref.onChange;
+    var onFilters = _ref.onFilters,
+    onPageChange = _ref.onPageChange,
+    _ref$showFilters = _ref.showFilters,
+    showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
+    onSelected = _ref.onSelected,
+    dataLength = _ref.dataLength,
+    viewLength = _ref.viewLength,
+    _ref$className = _ref.className,
+    className = _ref$className === undefined ? '' : _ref$className,
+    _ref$rowClassName = _ref.rowClassName,
+    rowClassName = _ref$rowClassName === undefined ? function () {
+      return '';
+    } : _ref$rowClassName,
     props = _objectWithoutProperties(_ref, _excluded$9);
   /* eslint-enable @typescript-eslint/no-unused-vars */
   var _useScale = useScale(),
@@ -43164,357 +43502,6 @@ TableComponent.Column = TableColumn;
 var Table = withScale(TableComponent);
 Table.Column = TableColumn;
 
-function DataTable(_ref) {
-  var _ref$cols = _ref.cols,
-    cols = _ref$cols === undefined ? [] : _ref$cols,
-    _ref$rows = _ref.rows,
-    rows = _ref$rows === undefined ? [] : _ref$rows,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
-    _ref$heading = _ref.heading,
-    heading = _ref$heading === undefined ? [] : _ref$heading,
-    _ref$filter = _ref.filter,
-    filter = _ref$filter === undefined ? true : _ref$filter,
-    menu = _ref.menu,
-    _ref$sideMenu = _ref.sideMenu,
-    sideMenu = _ref$sideMenu === undefined ? false : _ref$sideMenu,
-    _ref$style = _ref.style,
-    style = _ref$style === undefined ? {} : _ref$style,
-    children = _ref.children,
-    _ref$onBack = _ref.onBack,
-    onBack = _ref$onBack === undefined ? function () {
-      window.history.back();
-    } : _ref$onBack,
-    onRefresh = _ref.onRefresh,
-    onFilters = _ref.onFilters,
-    onSelectedDelete = _ref.onSelectedDelete,
-    onSelectedEdit = _ref.onSelectedEdit,
-    onSelected = _ref.onSelected,
-    _ref$disableViewColum = _ref.disableViewColumn,
-    disableViewColumn = _ref$disableViewColum === undefined ? false : _ref$disableViewColum,
-    _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
-    onDragOver = _ref.onDragOver,
-    onDragEnter = _ref.onDragEnter,
-    onDragLeave = _ref.onDragLeave,
-    onDrop = _ref.onDrop,
-    onRowClick = _ref.onRowClick,
-    dataLength = _ref.dataLength,
-    viewLength = _ref.viewLength,
-    _onPageChange = _ref.onPageChange,
-    _ref$disableMenu = _ref.disableMenu,
-    disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
-  var TABLE_ID = _.uniqueId('tbl');
-  // const [anchorEl, setAnchorEl] = useState(null);
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
-  var _useState3 = React.useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hideColumn = _useState4[0],
-    setHideColumn = _useState4[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
-
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    openFilter = _useState6[0],
-    setOpenFilter = _useState6[1];
-  var handleShowFilter = function handleShowFilter() {
-    return setOpenFilter(!openFilter);
-  };
-  React.useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
-  React.useEffect(function () {
-    cols.forEach(function (col) {
-      if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
-          el.style.display = 'none';
-        });
-      } else {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
-          el.style.display = '';
-        });
-      }
-    });
-  }, [hideColumn, cols, rows]);
-
-  // const handleClick = (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, id: any) => {
-  //     if (readOnly) {
-  //         return true;
-  //     }
-  //     const selectedIndex = selected.indexOf(id as never);
-  //     let newSelected: never[] | ((prevState: never[]) => never[]) = [];
-  //     if (selectedIndex === -1) {
-  //         newSelected = newSelected.concat(selected, id);
-  //     } else if (selectedIndex === 0) {
-  //         newSelected = newSelected.concat(selected.slice(1));
-  //     } else if (selectedIndex === selected.length - 1) {
-  //         newSelected = newSelected.concat(selected.slice(0, -1));
-  //     } else if (selectedIndex > 0) {
-  //         newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
-  //     }
-  //     setSelected(newSelected);
-  // };
-
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //     if (event.target.checked) {
-  //         const newSelecteds = rows.map((n: { _id: any }) => n._id);
-  //         setSelected(newSelecteds as never[]);
-  //         return;
-  //     }
-  //     setSelected([]);
-  // };
-
-  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
-    var selectedIndex = hideColumn.indexOf(id);
-    var newSelected = [];
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(hideColumn, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(hideColumn.slice(1));
-    } else if (selectedIndex === hideColumn.length - 1) {
-      newSelected = newSelected.concat(hideColumn.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
-    }
-    setHideColumn(newSelected);
-  };
-
-  // Children change reset selected
-  React.useEffect(function () {
-    setSelected([]);
-  }, [children]);
-
-  // const tableHeadStyle = {
-  //     position: 'sticky',
-  //     // backgroundColor: '#fafafb',
-  //     // boxShadow: '0 2px 2px -1px rgba(0, 0, 0, 0.4)',
-  //     top: 0,
-  //     zIndex: 9,
-  //     '& .MuiTableCell-root': {
-  //         fontSize: '14px !important',
-  //         py: 0.2
-  //     }
-  //     // ...borderStyle
-  // };
-
-  // const borderStyle = {
-  //     '& .MuiTableCell-root': {
-  //         py: 0.2,
-  //         px: 1
-  //         // borderLeft: '1px solid #ccc !important',
-  //         // borderRight: '1px solid #ccc !important'
-  //     },
-  //     '& td:first-of-type': {
-  //         borderLeft: 'none !important'
-  //     },
-  //     '& td:last-child': {
-  //         borderRight: 'none !important'
-  //     }
-  //     // '& tr': { borderBottom: '1px solid #ccc !important' }
-  // };
-
-  var COLUMNS = cols.filter(function (col) {
-    return !hideColumn.includes(col.name);
-  });
-  var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
-      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      return /*#__PURE__*/React.createElement(Popover.Item, {
-        key: colunqid
-        // selected={!hideColumn.includes(option.name as never)}
-        ,
-        onClick: function onClick(e) {
-          return handleHideColumnClick(e, option.name);
-        }
-      }, /*#__PURE__*/React.createElement("span", null, option.name));
-    }));
-  };
-  return /*#__PURE__*/React.createElement(GridContainer, {
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Grid.Container, {
-    style: {
-      marginBottom: '0.5rem',
-      marginTop: '0.5rem'
-    }
-  }, heading && /*#__PURE__*/React.createElement(Grid, {
-    sm: disableMenu ? 24 : 12,
-    xs: 24
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1rem'
-    }
-  }, children && /*#__PURE__*/React.createElement(Button, {
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(ArrowLeft$1, null),
-    onClick: onBack
-  }), heading)), !disableMenu && /*#__PURE__*/React.createElement(Grid, {
-    sm: 12,
-    xs: 24
-  }, /*#__PURE__*/React.createElement(GridContainer, {
-    width: "100%",
-    style: {
-      margin: 0,
-      gap: '0.6rem'
-    },
-    justify: "flex-end",
-    alignContent: "center"
-  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Edit Selected",
-    placement: "bottom",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return onSelectedEdit(selected[0]);
-    },
-    iconRight: /*#__PURE__*/React.createElement(Edit, null),
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6
-  })) : null, onSelectedDelete ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Delete Selected",
-    placement: "bottom",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return onSelectedDelete(selected);
-    },
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
-  })) : null), onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Refresh",
-    placement: "bottom",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return onRefresh();
-    },
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Filters",
-    placement: "bottomEnd",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleShowFilter,
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
-    text: "Columns",
-    placement: "bottomEnd",
-    font: 0.8,
-    px: 0.6,
-    py: 0.4,
-    type: "dark"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    placement: "bottomEnd",
-    child: content
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {},
-    auto: true,
-    scale: 2 / 3,
-    px: 0.6,
-    iconRight: /*#__PURE__*/React.createElement(Columns$1, null)
-  })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '1rem'
-    }
-  }, children) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      gap: 5,
-      display: 'flex',
-      flexDirection: sideMenu ? 'row' : 'column'
-    }
-  }, sideMenu && /*#__PURE__*/React.createElement(GridContainer, {
-    direction: "column",
-    style: {
-      width: '15rem',
-      padding: '0.5rem 0.7rem',
-      border: '1px solid #cfcfcf',
-      borderRadius: '5px'
-    }
-  }, sideMenu), /*#__PURE__*/React.createElement("div", {
-    onDragOver: onDragOver,
-    onDragEnter: onDragEnter,
-    onDragLeave: onDragLeave,
-    onDrop: onDrop,
-    id: TABLE_ID,
-    style: _objectSpread2({
-      overflow: 'auto',
-      position: 'relative',
-      height: 'calc(100vh - 8.5rem)',
-      maxWidth: 'calc(100vw - 1rem)',
-      width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
-    }, style)
-  }, /*#__PURE__*/React.createElement(Table, {
-    stickyHeader: true,
-    dataLength: dataLength,
-    viewLength: viewLength,
-    onPageChange: function onPageChange(page, start, end) {
-      if (_onPageChange) {
-        _onPageChange(page, start, end);
-      }
-    },
-    onRow: onRowClick,
-    rowDraggable: rowDraggable,
-    showFilters: openFilter,
-    onSelected: function onSelected(selected) {
-      return setSelected(selected);
-    },
-    onFilters: onFilters,
-    data: rows,
-    style: {
-      borderCollapse: 'collapse',
-      overflow: 'auto'
-    }
-  }, COLUMNS.map(function (column, index) {
-    return /*#__PURE__*/React.createElement(Table.Column, {
-      options: column === null || column === undefined ? undefined : column.options,
-      fontSize: column === null || column === undefined ? undefined : column.fontSize,
-      key: "".concat(column.id, "-").concat(index),
-      prop: column.id,
-      label: column.name,
-      filter: column === null || column === undefined ? undefined : column.filter,
-      noWrap: column === null || column === undefined ? undefined : column.noWrap,
-      align: column === null || column === undefined ? undefined : column.align
-    });
-  })))));
-}
-var dataTable = /*#__PURE__*/React.memo(DataTable);
-
 /* "use client" */
 
 var defaultContext$1 = {
@@ -46262,7 +46249,7 @@ exports.Code = Code;
 exports.Collapse = Collapse;
 exports.Container = GridContainer;
 exports.CssBaseline = MemoCssBaseline;
-exports.DataTable = dataTable;
+exports.DataTable = DataTable$1;
 exports.Description = Description;
 exports.Display = Display;
 exports.Divider = Divider;