@helpdice/ui 1.1.9 → 1.2.1

package/dist/index.d.ts

@@ -77,7 +77,7 @@ export { default as Spacer } from './spacer';
 export type { SpacerProps } from './spacer';
 export { default as Spinner } from './spinner';
 export type { SpinnerProps } from './spinner';
-export { default as Table } from './table';
+export { default as Table, DataTable } from './table';
 export type { TableProps, TableColumnProps } from './table';
 export { default as Tabs } from './tabs';
 export type { TabsProps } from './tabs';

package/dist/index.js

@@ -2962,7 +2962,7 @@ const ArrowLeft = ({ color, strokeWidth, set }) => {
     }
 };
 ArrowLeft.displayName = "ArrowLeft";
-createIcon(ArrowLeft);
+var ArrowLeft$1 = createIcon(ArrowLeft);
 
 const ArrowCircleRight = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -5376,7 +5376,7 @@ const Delete = ({ color, strokeWidth, set }) => {
     }
 };
 Delete.displayName = "Delete";
-createIcon(Delete);
+var Delete$1 = createIcon(Delete);
 
 const Dislike = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -5738,7 +5738,7 @@ const Edit1 = ({ color, strokeWidth, set }) => {
     }
 };
 Edit1.displayName = "Edit1";
-createIcon(Edit1);
+var Edit = createIcon(Edit1);
 
 const Edit2 = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -6201,7 +6201,7 @@ const Filters1 = ({ color, strokeWidth, set }) => {
     }
 };
 Filters1.displayName = "Filters1";
-createIcon(Filters1);
+var Filters = createIcon(Filters1);
 
 const Filters2 = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -9505,7 +9505,7 @@ const Refresh = ({ color, strokeWidth, set }) => {
     }
 };
 Refresh.displayName = "Refresh";
-createIcon(Refresh);
+var Refresh$1 = createIcon(Refresh);
 
 const ResizeCircleHorizontal = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -12463,7 +12463,7 @@ const Columns = ({ color, strokeWidth, set }) => {
     }
 };
 Columns.displayName = "Columns";
-createIcon(Columns);
+var Columns$1 = createIcon(Columns);
 
 const Folder = ({ color, strokeWidth, set }) => {
     const Outline = () => (React.createElement("g", null,
@@ -42115,7 +42115,8 @@ var TableHead = function TableHead(props) {
   var _ref = props,
     columns = _ref.columns,
     width = _ref.width,
-    onFilters = _ref.onFilters;
+    onFilters = _ref.onFilters,
+    showFilters = _ref.showFilters;
   var isScalableWidth = React.useMemo(function () {
     return columns.find(function (item) {
       return !!item.width;
@@ -42144,16 +42145,19 @@ var TableHead = function TableHead(props) {
       var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       if (accessor === 'fixed') {
+        var _filters$filterName;
         // Dropdown filter for categorical data (category, status)
-        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
+        return /*#__PURE__*/React.createElement("td", {
+          "data-column": Header
+        }, /*#__PURE__*/React.createElement(Select, {
           key: unq_accessor,
           name: filterName,
-          value: filters[filterName],
+          value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
           onChange: function onChange(newValue) {
             return handleFilterChange(filterName, newValue);
           }
         }, /*#__PURE__*/React.createElement(Select.Option, {
-          value: ""
+          value: "All"
         }, "All ", Header), options ? options.map(function (option) {
           return /*#__PURE__*/React.createElement(Select.Option, {
             value: option.value
@@ -42163,8 +42167,10 @@ var TableHead = function TableHead(props) {
       if (accessor === 'date') {
         // Date filter
         return /*#__PURE__*/React.createElement("th", {
+          "data-column": Header,
           key: unq_accessor
         }, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-date-".concat(filterName),
           htmlType: "date",
           name: filterName,
           value: filters[filterName],
@@ -42173,25 +42179,28 @@ var TableHead = function TableHead(props) {
           }
         }));
       }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        ,
-        name: filterName,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filters[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        },
-        placeholder: "Search...",
-        fullWidth: true
-      }));
+      if (accessor === 'search') {
+        // Text search filter
+        return /*#__PURE__*/React.createElement("th", {
+          "data-column": Header
+        }, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-search-".concat(filterName),
+          htmlType: "text"
+          // ref={filterRefs.current[filterName]} // Dynamically set ref}
+          ,
+          name: filterName,
+          style: {
+            height: 30,
+            minWidth: 160
+          },
+          value: filters[filterName],
+          onChange: function onChange(e) {
+            return handleFilterChange(filterName, e.target.value);
+          },
+          placeholder: "Search...",
+          fullWidth: true
+        }));
+      }
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
@@ -42201,6 +42210,7 @@ var TableHead = function TableHead(props) {
   }, columns.map(function (column, index) {
     return /*#__PURE__*/React.createElement("th", {
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      "data-column": column.label,
       className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
       className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
@@ -42212,7 +42222,7 @@ var TableHead = function TableHead(props) {
       },
       className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
-  })), /*#__PURE__*/React.createElement("tr", {
+  })), showFilters && /*#__PURE__*/React.createElement("tr", {
     className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "134865897",
@@ -42239,6 +42249,7 @@ var TableCell = function TableCell(_ref) {
         color: "".concat(column === null || column === undefined ? undefined : column.color),
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
+      "data-column": column.label,
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -42270,18 +42281,37 @@ var TableBody = function TableBody(_ref) {
     onCell = _ref.onCell,
     rowClassName = _ref.rowClassName,
     _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable;
-    _ref.readOnly;
-    var onSelected = _ref.onSelected;
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onSelected = _ref.onSelected;
   var theme = useTheme();
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0];
-    _useState2[1];
+    selected = _useState2[0],
+    setSelected = _useState2[1];
   var _useTableContext = useTableContext(),
     columns = _useTableContext.columns;
-  var rowClickHandler = function rowClickHandler(row, index) {
-    onRow && onRow(row, index);
+  // 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);
   };
 
   // const handleSelectAllClick = (event: { target: { checked: any } }) => {
@@ -42309,16 +42339,11 @@ var TableBody = function TableBody(_ref) {
     delete rw.table;
     delete rw.style;
     delete rw.onDragStart;
-    console.log(row);
-    var frow = Object.fromEntries(Object.entries(row).filter(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        ky = _ref3[0];
-        _ref3[1];
-      return ky !== '_id' && cols.map(function (col) {
-        return col.id;
-      }).includes(ky);
-    }));
-    console.log(frow);
+    // 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("tr", {
       draggable: rowDraggable,
@@ -42336,8 +42361,10 @@ var TableBody = function TableBody(_ref) {
       }, rowStyle),
       onClick: function onClick(e) {
         if (!rowDraggable) {
-          {
-            rowClickHandler(row, index);
+          if (onRow) {
+            onRow(row, index);
+          } else {
+            handleClick(e, row);
           }
         }
       }
@@ -42404,6 +42431,7 @@ var TableColumn = function TableColumn(columnProps) {
     label = _ref.label,
     width = _ref.width,
     filter = _ref.filter,
+    options = _ref.options,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     renderHandler = _ref.render;
@@ -42417,17 +42445,18 @@ var TableColumn = function TableColumn(columnProps) {
     updateColumn({
       label: children || label,
       filter: filter,
+      options: options,
       prop: safeProp,
       width: width,
       className: className,
       renderHandler: function renderHandler() {}
     });
-  }, [children, filter, label, prop, width, className, renderHandler]);
+  }, [children, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onSelected", "className", "rowClassName"];
+var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -42447,6 +42476,8 @@ function TableComponent(tableProps) {
     onCell = _ref.onCell;
     _ref.onChange;
     var onFilters = _ref.onFilters,
+    _ref$showFilters = _ref.showFilters,
+    showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
     onSelected = _ref.onSelected,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
@@ -42505,6 +42536,7 @@ function TableComponent(tableProps) {
   }), /*#__PURE__*/React.createElement(TableHead, {
     columns: columns,
     onFilters: onFilters,
+    showFilters: showFilters,
     width: width
   }), /*#__PURE__*/React.createElement(TableBody, {
     data: data,
@@ -42526,6 +42558,325 @@ 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,
+    _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];
+    _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([]);
+  // };
+
+  // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
+  //     const selectedIndex = hideColumn.indexOf(id as never);
+  //     let newSelected: any[] | ((prevState: never[]) => never[]) = [];
+  //     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 as never[]);
+  // };
+
+  // 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);
+  });
+  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(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: 'hidden',
+      height: 'calc(100vh - 8.5rem)',
+      maxWidth: 'calc(100vw - 1rem)',
+      width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
+    }, style)
+  }, /*#__PURE__*/React.createElement(Table, {
+    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, {
+      key: "".concat(column.id, "-").concat(index),
+      prop: column.id,
+      label: column.name,
+      filter: column.filter
+    });
+  })))));
+}
+var dataTable = /*#__PURE__*/React.memo(DataTable);
+
 /* "use client" */
 
 var defaultContext$1 = {
@@ -45436,6 +45787,7 @@ exports.Code = Code;
 exports.Collapse = Collapse;
 exports.Container = GridContainer;
 exports.CssBaseline = MemoCssBaseline;
+exports.DataTable = dataTable;
 exports.Description = Description;
 exports.Display = Display;
 exports.Divider = Divider;

package/dist/table/data-table.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+type DataTableProps = {
+    cols: any[];
+    rows: any[];
+    readOnly?: boolean;
+    loading?: boolean;
+    heading?: never[];
+    filter?: boolean;
+    menu?: never;
+    sideMenu?: boolean;
+    style?: object;
+    children?: React.ReactNode;
+    stickyHeader?: boolean;
+    hasMore?: boolean;
+    nextFn?: () => void;
+    onBack?: () => void;
+    infiniteLoader?: React.ReactNode;
+    endMessage?: React.ReactNode;
+    onRefresh?: () => void;
+    onFilters?: (filters: object) => void;
+    onSelectedDelete?: (selected: never[]) => void;
+    onSelectedEdit?: (selected: never) => void;
+    onSelected?: (selected: any) => void;
+    disableViewColumn?: boolean;
+    rowDraggable?: boolean;
+    onDragOver?: () => void;
+    onDragEnter?: () => void;
+    onDragLeave?: () => void;
+    onDrop?: () => void;
+    onRowClick?: (row: any) => void;
+    disableMenu?: boolean;
+};
+declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
+onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, disableMenu }: DataTableProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DataTable>;
+export default _default;

package/dist/table/index.d.ts

@@ -1,5 +1,6 @@
 import Table from './table';
 export type { TableProps } from './table';
 export type { TableColumnProps } from './table-column';
-export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender, } from './table-types';
+export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from './table-types';
+export { default as DataTable } from './data-table';
 export default Table;