@helpdice/ui 1.5.1 → 1.5.2

package/dist/index.js

@@ -26300,6 +26300,123 @@ var SpinnerComponent = function SpinnerComponent(_ref) {
 SpinnerComponent.displayName = 'Spinner';
 var Spinner = withScale(SpinnerComponent);
 
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React$1.createElement("colgroup", null);
+  return /*#__PURE__*/React$1.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React$1.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _ref = props,
+    columns = _ref.columns,
+    width = _ref.width,
+    stickyHeader = _ref.stickyHeader;
+  var isScalableWidth = React$1.useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = React$1.useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React$1.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, colgroup, /*#__PURE__*/React$1.createElement("thead", {
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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]]])
+  }, /*#__PURE__*/React$1.createElement("tr", {
+    style: {
+      backgroundColor: '#fff'
+    },
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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]]])
+  }, columns.map(function (column, index) {
+    var _String;
+    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return /*#__PURE__*/React$1.createElement("th", {
+      style: _objectSpread2({
+        // textAlign: `${column?.align} !important`,
+        // paddingLeft: '0.3rem',
+        // paddingRight: '0.3rem',
+        backgroundColor: '#fff',
+        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
+        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
+      }, column === null || column === void 0 ? void 0 : column.style),
+      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      "data-column": dataName,
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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$1.createElement("div", {
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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"
+    }, column.label, /*#__PURE__*/React$1.createElement("br", {
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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]]])
+    }), /*#__PURE__*/React$1.createElement("span", {
+      style: {
+        textAlign: 'center'
+      },
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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$1.createElement(_JSXStyle, {
+    id: "2156261549",
+    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+};
+TableHead.displayName = 'TableHead';
+
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    emptyText = _ref.emptyText,
+    onCellClick = _ref.onCellClick;
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, columns.map(function (column, index) {
+    var _String;
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return /*#__PURE__*/React$1.createElement("td", {
+      style: _objectSpread2({
+        fontSize: "".concat(column === null || column === void 0 ? void 0 : column.fontSize),
+        textAlign: "".concat(column === null || column === void 0 ? void 0 : column.align, " !important"),
+        paddingLeft: '0.3rem',
+        paddingRight: '0.3rem',
+        color: "".concat(column === null || column === void 0 ? void 0 : column.color),
+        boxSizing: 'border-box',
+        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
+      }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
+      "data-column": dataName,
+      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React$1.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+
+/* "use client" */
+
+var defaultContext$2 = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+var TableContext = /*#__PURE__*/React$1.createContext(defaultContext$2);
+var useTableContext = function useTableContext() {
+  return React$1.useContext(TableContext);
+};
+
 var lodash$1 = {exports: {}};
 
 /**
@@ -43512,213 +43629,6 @@ function requireLodash () {
 var lodashExports = requireLodash();
 var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
-var makeColgroup = function makeColgroup(width, columns) {
-  var unsetWidthCount = columns.filter(function (c) {
-    return !c.width;
-  }).length;
-  var customWidthTotal = columns.reduce(function (pre, current) {
-    return current.width ? pre + current.width : pre;
-  }, 0);
-  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
-  if (averageWidth <= 0) return /*#__PURE__*/React$1.createElement("colgroup", null);
-  return /*#__PURE__*/React$1.createElement("colgroup", null, columns.map(function (column, index) {
-    return /*#__PURE__*/React$1.createElement("col", {
-      key: "colgroup-".concat(index),
-      width: column.width || averageWidth
-    });
-  }));
-};
-var TableHead = function TableHead(props) {
-  var theme = useTheme();
-  var _React$useState = React$1.useState({}),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    filters = _React$useState2[0],
-    setFilters = _React$useState2[1];
-  var _ref = props,
-    columns = _ref.columns,
-    width = _ref.width,
-    onFilters = _ref.onFilters,
-    showFilters = _ref.showFilters,
-    stickyHeader = _ref.stickyHeader;
-  var isScalableWidth = React$1.useMemo(function () {
-    return columns.find(function (item) {
-      return !!item.width;
-    });
-  }, [columns]);
-  var colgroup = React$1.useMemo(function () {
-    if (!isScalableWidth) return /*#__PURE__*/React$1.createElement("colgroup", null);
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width]);
-  var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
-  };
-
-  // const applyFilters = () => {
-  //   if (onFilters) {
-  //     onFilters(filters);
-  //   }
-  // }
-
-  var generateFilterInputs = function generateFilterInputs() {
-    return columns.map(function (col) {
-      var _String, _filters$filterName;
-      var Header = col.label,
-        accessor = col.filter,
-        options = col.options;
-      var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
-      var unq_accessor = _.uniqueId(filterName);
-      // if (Header === 'actions') {
-      //   return (
-      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
-      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
-      //     </th>
-      //   )
-      // }
-      return /*#__PURE__*/React$1.createElement("th", {
-        style: {
-          padding: '3px'
-        },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
-        onChange: function onChange(newValue) {
-          return handleFilterChange(filterName, newValue);
-        }
-      }, /*#__PURE__*/React$1.createElement(Select.Option, {
-        value: "All"
-      }, "All ", Header), options ? options.map(function (option) {
-        return /*#__PURE__*/React$1.createElement(Select.Option, {
-          value: option.value
-        }, option.name);
-      }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
-      // id={`filter-date-${filterName}`}
-      , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        }
-      }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
-      // id={`filter-search-${filterName}`}
-      , {
-        htmlType: "text",
-        autoComplete: "off"
-        // 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$1.createElement(React$1.Fragment, null, colgroup, /*#__PURE__*/React$1.createElement("thead", {
-    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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]]])
-  }, /*#__PURE__*/React$1.createElement("tr", {
-    style: {
-      backgroundColor: '#fff'
-    },
-    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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]]])
-  }, columns.map(function (column, index) {
-    var _String2;
-    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
-    return /*#__PURE__*/React$1.createElement("th", {
-      style: _objectSpread2({
-        // textAlign: `${column?.align} !important`,
-        // paddingLeft: '0.3rem',
-        // paddingRight: '0.3rem',
-        backgroundColor: '#fff',
-        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
-        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
-      }, column === null || column === void 0 ? void 0 : column.style),
-      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      "data-column": dataName,
-      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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$1.createElement("div", {
-      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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"
-    }, column.label, /*#__PURE__*/React$1.createElement("br", {
-      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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]]])
-    }), /*#__PURE__*/React$1.createElement("span", {
-      style: {
-        textAlign: 'center'
-      },
-      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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)));
-  })), showFilters && /*#__PURE__*/React$1.createElement("tr", {
-    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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$1.createElement(_JSXStyle, {
-    id: "2156261549",
-    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", 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.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
-};
-TableHead.displayName = 'TableHead';
-
-var TableCell = function TableCell(_ref) {
-  var columns = _ref.columns,
-    row = _ref.row,
-    rowIndex = _ref.rowIndex,
-    emptyText = _ref.emptyText,
-    onCellClick = _ref.onCellClick;
-  /* eslint-disable react/jsx-no-useless-fragment */
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, columns.map(function (column, index) {
-    var _String;
-    var currentRowValue = row[column.prop];
-    var cellValue = currentRowValue || emptyText;
-    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
-    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
-    return /*#__PURE__*/React$1.createElement("td", {
-      style: _objectSpread2({
-        fontSize: "".concat(column === null || column === void 0 ? void 0 : column.fontSize),
-        textAlign: "".concat(column === null || column === void 0 ? void 0 : column.align, " !important"),
-        paddingLeft: '0.3rem',
-        paddingRight: '0.3rem',
-        color: "".concat(column === null || column === void 0 ? void 0 : column.color),
-        boxSizing: 'border-box',
-        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
-      }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
-      "data-column": dataName,
-      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
-      onClick: function onClick() {
-        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
-      },
-      className: column.className
-    }, /*#__PURE__*/React$1.createElement("div", {
-      className: "cell"
-    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
-  }));
-  /* eslint-enable */
-};
-
-/* "use client" */
-
-var defaultContext$2 = {
-  columns: [],
-  updateColumn: function updateColumn() {}
-};
-var TableContext = /*#__PURE__*/React$1.createContext(defaultContext$2);
-var useTableContext = function useTableContext() {
-  return React$1.useContext(TableContext);
-};
-
 function Empty() {
   return /*#__PURE__*/React$1.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -44293,7 +44203,7 @@ function DataTable(_ref) {
       window.history.back();
     } : _ref$onBack,
     onRefresh = _ref.onRefresh,
-    _onFilters = _ref.onFilters,
+    onFilters = _ref.onFilters,
     onSelectedDelete = _ref.onSelectedDelete,
     onSelectedEdit = _ref.onSelectedEdit,
     onSelected = _ref.onSelected,
@@ -44327,31 +44237,30 @@ function DataTable(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
+  var _useState3 = React$1.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
   // const [table_filters] = useDebounce(filters, 500);
   // const open = Boolean(anchorEl);
   // const handleMenuOpen = (event: any) => {
   //     setAnchorEl(event.currentTarget);
   // };
-  var _useState3 = React$1.useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hideColumn = _useState4[0],
-    setHideColumn = _useState4[1];
+  var _useState5 = React$1.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hideColumn = _useState6[0],
+    setHideColumn = _useState6[1];
   // const handleMenuClose = () => {
   //     setAnchorEl(null);
   // };
 
-  var _useState5 = React$1.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    openFilter = _useState6[0],
-    setOpenFilter = _useState6[1];
+  var _useState7 = React$1.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    openFilter = _useState8[0],
+    setOpenFilter = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
-  React$1.useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
   React$1.useEffect(function () {
     cols.forEach(function (col) {
       var _String;
@@ -44423,11 +44332,86 @@ function DataTable(_ref) {
     var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     return !hideColumn.includes(dataName);
   });
+  var handleFilterChange = function handleFilterChange(name, value) {
+    setFilters(function (prevFilters) {
+      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
+      if (onFilters) {
+        onFilters(updatedFilters);
+      }
+      return updatedFilters;
+    });
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return COLUMNS.map(function (col) {
+      var _String4, _filters$filterName;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
+      var unq_accessor = _.uniqueId(filterName);
+      // if (Header === 'actions') {
+      //   return (
+      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
+      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
+      //     </th>
+      //   )
+      // }
+      return /*#__PURE__*/React$1.createElement("div", {
+        style: {
+          padding: '3px'
+        },
+        "data-column": Header,
+        key: unq_accessor
+      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select
+      // key={unq_accessor}
+      // name={filterName}
+      , {
+        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+        onChange: function onChange(newValue) {
+          return handleFilterChange(filterName, newValue);
+        }
+      }, /*#__PURE__*/React$1.createElement(Select.Option, {
+        value: "All"
+      }, "All ", Header), options ? options.map(function (option) {
+        return /*#__PURE__*/React$1.createElement(Select.Option, {
+          value: option.value
+        }, option.name);
+      }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
+      // id={`filter-date-${filterName}`}
+      , {
+        htmlType: "date"
+        // name={filterName}
+        ,
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        }
+      }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
+      // id={`filter-search-${filterName}`}
+      , {
+        htmlType: "text",
+        autoComplete: "off"
+        // 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
+      }));
+    });
+  };
   var content = function content() {
     return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, index) {
-      var _String4;
+      var _String5;
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
+      var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React$1.createElement(Popover.Item, {
         selected: isSelected,
@@ -44474,7 +44458,7 @@ function DataTable(_ref) {
     },
     justify: "flex-end",
     alignContent: "center"
-  }, menu, !children && !readOnly ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, onSelected && onSelected, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
+  }, menu, !children && !readOnly ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Edit Selected",
     placement: "bottom",
     font: 0.8,
@@ -44522,7 +44506,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React$1.createElement(Refresh$1, null)
-  })) : null, _onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
@@ -44564,7 +44548,7 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu && /*#__PURE__*/React$1.createElement(GridContainer, {
+  }, sideMenu || openFilter ? /*#__PURE__*/React$1.createElement(GridContainer, {
     direction: "column",
     style: {
       width: '15rem',
@@ -44572,7 +44556,7 @@ function DataTable(_ref) {
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, sideMenu), /*#__PURE__*/React$1.createElement("div", {
+  }, openFilter ? generateFilterInputs() : sideMenu) : null, /*#__PURE__*/React$1.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,
@@ -44607,9 +44591,6 @@ function DataTable(_ref) {
     onSelected: function onSelected(selected) {
       return setSelected(selected);
     },
-    onFilters: function onFilters(filters) {
-      return _onFilters && _onFilters(filters);
-    },
     data: rows,
     style: {
       borderCollapse: 'collapse',
@@ -44848,7 +44829,7 @@ var TableColumn = function TableColumn(columnProps) {
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -44874,11 +44855,9 @@ function TableComponent(tableProps) {
     onRow = _ref.onRow,
     onCell = _ref.onCell;
     _ref.onChange;
-    var onFilters = _ref.onFilters,
-    onPageChange = _ref.onPageChange,
-    _ref$showFilters = _ref.showFilters,
-    showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
-    _ref$stickyHeader = _ref.stickyHeader,
+    var onPageChange = _ref.onPageChange;
+    _ref.showFilters;
+    var _ref$stickyHeader = _ref.stickyHeader,
     stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
     onSelected = _ref.onSelected,
     dataLength = _ref.dataLength,
@@ -44941,15 +44920,6 @@ function TableComponent(tableProps) {
       endIndex: endIndex
     };
   };
-  var _useState5 = React$1.useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    filters = _useState6[0],
-    setFilters = _useState6[1];
-  React$1.useEffect(function () {
-    if (onFilters) {
-      onFilters(filters);
-    }
-  }, [filters]);
   return /*#__PURE__*/React$1.createElement(TableContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React$1.createElement("table", _extends({
@@ -44959,10 +44929,6 @@ function TableComponent(tableProps) {
   }), /*#__PURE__*/React$1.createElement(TableHead, {
     stickyHeader: stickyHeader,
     columns: columns,
-    onFilters: function onFilters(filters) {
-      return setFilters(filters);
-    },
-    showFilters: showFilters,
     width: width
   }), /*#__PURE__*/React$1.createElement(TableBody, {
     data: data,