Merge pull request #75 from certego/develop

v0.1.12

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 **[Get it on npm](https://www.npmjs.com/package/certego-ui)**
 
+## [v0.1.12](https://github.com/certego/certego-ui/releases/tag/v0.1.12)
+Fixed auto-update DataTable when removed a filter with the cross icon 
+
 ## [v0.1.11](https://github.com/certego/certego-ui/releases/tag/v0.1.11)
 Removed debounce filter for columns
 

example/src/layouts/AppFooter.jsx

@@ -5,7 +5,7 @@ import { FaTwitter } from "react-icons/fa";
 import { Toaster, ScrollToTopButton, useToastr } from "@certego/certego-ui";
 
 // constants
-const CERTEGO_UI_VERSION = "v0.1.11";
+const CERTEGO_UI_VERSION = "v0.1.12";
 const selector = (state) => state.toasts;
 
 function AppFooter() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@certego/certego-ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "certego components library (react.js, reactstrap, etc)",
   "author": "certego",
   "license": "MIT",

src/components/table/filters.jsx

@@ -23,7 +23,14 @@ function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
         "input-dark"
       )}
       value={inputValue}
-      onChange={(e) => setInputValue(e.target.value)}
+      onChange={(e) => {
+        setInputValue(e.target.value);
+        // if the user clears the filter
+        if(e.target.value.length === 0) {
+          // Set undefined to remove the filter entirely
+          setFilter(undefined);
+        }
+      }}
       onKeyDown={(e) => {
         // the request is sent if the user presses 'enter'
         if (e.key === "Enter") {
@@ -33,7 +40,7 @@ function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
       onKeyUp={(e) => {
         // if the user presses 'backspace' 
         // the request is sent if input value is empty
-        if (e.key === "Backspace" && e.target.value === "") {
+        if (e.key === "Backspace" && e.target.value.length === 0) {
           // Set undefined to remove the filter entirely
           setFilter(undefined);
         }