@helpdice/ui 1.5.2 → 1.5.4

package/dist/index.js

@@ -26341,6 +26341,7 @@ var TableHead = function TableHead(props) {
   }, 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();
+    console.log('Column Hide:', dataName);
     return /*#__PURE__*/React$1.createElement("th", {
       style: _objectSpread2({
         // textAlign: `${column?.align} !important`,
@@ -44232,28 +44233,29 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
+  var COLUMNS = cols.filter(function (col) {
+    var _String;
+    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
+  });
   // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React$1.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
-  var _useState3 = React$1.useState({}),
+  // State for filter values
+  var _useState3 = React$1.useState(COLUMNS.reduce(function (acc, col) {
+      acc[col.filter] = '';
+      return acc;
+    }, {})),
     _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
+    filterValues = _useState4[0],
+    setFilterValues = _useState4[1];
   // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
   var _useState5 = React$1.useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     hideColumn = _useState6[0],
     setHideColumn = _useState6[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
-
   var _useState7 = React$1.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     openFilter = _useState8[0],
@@ -44263,8 +44265,8 @@ function DataTable(_ref) {
   }
   React$1.useEffect(function () {
     cols.forEach(function (col) {
-      var _String;
-      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var _String2;
+      var dataName = (_String2 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
         document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
@@ -44277,8 +44279,8 @@ function DataTable(_ref) {
     });
   }, [hideColumn, cols]);
   function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String3;
+    var id = (_String3 = String(_id)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -44327,27 +44329,16 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var COLUMNS = cols.filter(function (col) {
-    var _String3;
-    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;
-    });
+    setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty$1({}, name, value)));
   };
   var generateFilterInputs = function generateFilterInputs() {
     return COLUMNS.map(function (col) {
-      var _String4, _filters$filterName;
-      var Header = col.label,
+      var _String4, _filterValues$filterN;
+      var Header = col.name,
         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 filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
@@ -44356,17 +44347,16 @@ function DataTable(_ref) {
       //     </th>
       //   )
       // }
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React$1.createElement(Popover.Item, {
         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',
+      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select, {
+        key: filterName,
+        name: filterName,
+        value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
           return handleFilterChange(filterName, newValue);
         }
@@ -44379,26 +44369,27 @@ function DataTable(_ref) {
       }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
+        key: filterName,
+        htmlType: "date",
+        name: filterName,
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         }
       }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
+        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
         ,
+        name: filterName,
         style: {
           height: 30,
           minWidth: 160
         },
-        value: filters[filterName],
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         },
@@ -44422,6 +44413,15 @@ function DataTable(_ref) {
       }, /*#__PURE__*/React$1.createElement("span", null, option.name));
     }));
   };
+  var filterContent = function filterContent() {
+    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, generateFilterInputs(), /*#__PURE__*/React$1.createElement(Popover.Item, null, /*#__PURE__*/React$1.createElement(Button, {
+      onClick: function onClick() {
+        if (onFilters) {
+          onFilters(filterValues);
+        }
+      }
+    }, "Apply")));
+  };
   return /*#__PURE__*/React$1.createElement(GridContainer, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -44513,6 +44513,11 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React$1.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
   }, /*#__PURE__*/React$1.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -44520,7 +44525,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React$1.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
+  }))) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
@@ -44548,15 +44553,16 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu || openFilter ? /*#__PURE__*/React$1.createElement(GridContainer, {
+  }, sideMenu ? /*#__PURE__*/React$1.createElement(GridContainer, {
     direction: "column",
     style: {
       width: '15rem',
+      gap: 5,
       padding: '0.5rem 0.7rem',
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, openFilter ? generateFilterInputs() : sideMenu) : null, /*#__PURE__*/React$1.createElement("div", {
+  }, sideMenu) : null, /*#__PURE__*/React$1.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,

package/dist/table/index.js

@@ -1030,6 +1030,7 @@ var TableHead = function TableHead(props) {
   }, 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();
+    console.log('Column Hide:', dataName);
     return /*#__PURE__*/React.createElement("th", {
       style: _objectSpread2({
         // textAlign: `${column?.align} !important`,
@@ -31520,28 +31521,29 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
+  var COLUMNS = cols.filter(function (col) {
+    var _String;
+    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
+  });
   // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
-  var _useState3 = React.useState({}),
+  // State for filter values
+  var _useState3 = React.useState(COLUMNS.reduce(function (acc, col) {
+      acc[col.filter] = '';
+      return acc;
+    }, {})),
     _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
+    filterValues = _useState4[0],
+    setFilterValues = _useState4[1];
   // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
   var _useState5 = React.useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     hideColumn = _useState6[0],
     setHideColumn = _useState6[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
-
   var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     openFilter = _useState8[0],
@@ -31551,8 +31553,8 @@ function DataTable(_ref) {
   }
   React.useEffect(function () {
     cols.forEach(function (col) {
-      var _String;
-      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var _String2;
+      var dataName = (_String2 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
         document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
@@ -31565,8 +31567,8 @@ function DataTable(_ref) {
     });
   }, [hideColumn, cols]);
   function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String3;
+    var id = (_String3 = String(_id)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -31615,27 +31617,16 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var COLUMNS = cols.filter(function (col) {
-    var _String3;
-    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({}, name, value));
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
+    setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty({}, name, value)));
   };
   var generateFilterInputs = function generateFilterInputs() {
     return COLUMNS.map(function (col) {
-      var _String4, _filters$filterName;
-      var Header = col.label,
+      var _String4, _filterValues$filterN;
+      var Header = col.name,
         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 filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
@@ -31644,17 +31635,16 @@ function DataTable(_ref) {
       //     </th>
       //   )
       // }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Popover.Item, {
         style: {
           padding: '3px'
         },
         "data-column": Header,
         key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
+        key: filterName,
+        name: filterName,
+        value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
           return handleFilterChange(filterName, newValue);
         }
@@ -31667,26 +31657,27 @@ function DataTable(_ref) {
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
+        key: filterName,
+        htmlType: "date",
+        name: filterName,
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
+        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
         ,
+        name: filterName,
         style: {
           height: 30,
           minWidth: 160
         },
-        value: filters[filterName],
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         },
@@ -31710,6 +31701,15 @@ function DataTable(_ref) {
       }, /*#__PURE__*/React.createElement("span", null, option.name));
     }));
   };
+  var filterContent = function filterContent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        if (onFilters) {
+          onFilters(filterValues);
+        }
+      }
+    }, "Apply")));
+  };
   return /*#__PURE__*/React.createElement(GridContainer, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -31801,6 +31801,11 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -31808,7 +31813,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
+  }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
     text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
@@ -31836,15 +31841,16 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu || openFilter ? /*#__PURE__*/React.createElement(GridContainer, {
+  }, sideMenu ? /*#__PURE__*/React.createElement(GridContainer, {
     direction: "column",
     style: {
       width: '15rem',
+      gap: 5,
       padding: '0.5rem 0.7rem',
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, openFilter ? generateFilterInputs() : sideMenu) : null, /*#__PURE__*/React.createElement("div", {
+  }, sideMenu) : null, /*#__PURE__*/React.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,

package/esm/table/data-table.js

@@ -66,28 +66,29 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
+  var COLUMNS = cols.filter(function (col) {
+    var _String;
+    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
+  });
   // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
-  var _useState3 = useState({}),
+  // State for filter values
+  var _useState3 = useState(COLUMNS.reduce(function (acc, col) {
+      acc[col.filter] = '';
+      return acc;
+    }, {})),
     _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
+    filterValues = _useState4[0],
+    setFilterValues = _useState4[1];
   // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
   var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     hideColumn = _useState6[0],
     setHideColumn = _useState6[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
-
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     openFilter = _useState8[0],
@@ -97,8 +98,8 @@ function DataTable(_ref) {
   }
   useEffect(function () {
     cols.forEach(function (col) {
-      var _String;
-      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var _String2;
+      var dataName = (_String2 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
         document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
@@ -111,8 +112,8 @@ function DataTable(_ref) {
     });
   }, [hideColumn, cols]);
   function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String3;
+    var id = (_String3 = String(_id)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -161,27 +162,16 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var COLUMNS = cols.filter(function (col) {
-    var _String3;
-    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 = _extends({}, prevFilters, _defineProperty({}, name, value));
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
+    setFilterValues(_extends({}, filterValues, _defineProperty({}, name, value)));
   };
   var generateFilterInputs = function generateFilterInputs() {
     return COLUMNS.map(function (col) {
-      var _String4, _filters$filterName;
-      var Header = col.label,
+      var _String4, _filterValues$filterN;
+      var Header = col.name,
         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 filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
@@ -190,17 +180,16 @@ function DataTable(_ref) {
       //     </th>
       //   )
       // }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Popover.Item, {
         style: {
           padding: '3px'
         },
         "data-column": Header,
         key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
+        key: filterName,
+        name: filterName,
+        value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
           return handleFilterChange(filterName, newValue);
         }
@@ -213,26 +202,27 @@ function DataTable(_ref) {
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
+        key: filterName,
+        htmlType: "date",
+        name: filterName,
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
+        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
         ,
+        name: filterName,
         style: {
           height: 30,
           minWidth: 160
         },
-        value: filters[filterName],
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         },
@@ -256,6 +246,15 @@ function DataTable(_ref) {
       }, /*#__PURE__*/React.createElement("span", null, option.name));
     }));
   };
+  var filterContent = function filterContent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        if (onFilters) {
+          onFilters(filterValues);
+        }
+      }
+    }, "Apply")));
+  };
   return /*#__PURE__*/React.createElement(Container, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -347,6 +346,11 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -354,7 +358,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
+  }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
     text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
@@ -382,15 +386,16 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu || openFilter ? /*#__PURE__*/React.createElement(Container, {
+  }, sideMenu ? /*#__PURE__*/React.createElement(Container, {
     direction: "column",
     style: {
       width: '15rem',
+      gap: 5,
       padding: '0.5rem 0.7rem',
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, openFilter ? generateFilterInputs() : sideMenu) : null, /*#__PURE__*/React.createElement("div", {
+  }, sideMenu) : null, /*#__PURE__*/React.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,

package/esm/table/table-head.js

@@ -43,6 +43,7 @@ var TableHead = function TableHead(props) {
   }, 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();
+    console.log('Column Hide:', dataName);
     return /*#__PURE__*/React.createElement("th", {
       style: _extends({
         // textAlign: `${column?.align} !important`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -106,8 +106,6 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "polished": "^4.3.1",
-    "push": "^0.1.1",
-    "pusher": "^5.2.0",
     "react-fast-compare": "^3.2.2",
     "react-is": "^19.0.0",
     "react-syntax-highlighter": "^15.6.1",