From 74e7d7d4e8136a19ed39f5c304bd4694ebe8f08a Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 12 Mar 2020 20:44:20 +0100
Subject: [PATCH] clear filter button

---
 packages/datalib/src/GridDisplay.ts            | 12 ++++++++++++
 packages/web/src/datagrid/DataFilterControl.js |  3 ++-
 packages/web/src/datagrid/DataGridCore.js      | 16 ++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts
index 5f30ce98..626499ba 100644
--- a/packages/datalib/src/GridDisplay.ts
+++ b/packages/datalib/src/GridDisplay.ts
@@ -338,4 +338,16 @@ export abstract class GridDisplay {
     });
     this.reload();
   }
+
+  get filterCount() {
+    return _.compact(_.values(this.config.filters)).length;
+  }
+
+  clearFilters() {
+    this.setConfig({
+      ...this.config,
+      filters: {},
+    });
+    this.reload();
+  }
 }
diff --git a/packages/web/src/datagrid/DataFilterControl.js b/packages/web/src/datagrid/DataFilterControl.js
index 2d2a24d9..1ad2fb71 100644
--- a/packages/web/src/datagrid/DataFilterControl.js
+++ b/packages/web/src/datagrid/DataFilterControl.js
@@ -207,7 +207,8 @@ export default function DataFilterControl({ isReadOnly = false, filterType, filt
 
   React.useEffect(() => {
     editorRef.current.value = filter || '';
-  }, []);
+    updateFilterState();
+  }, [filter]);
 
   const handleShowMenu = () => {
     const rect = buttonRef.current.getBoundingClientRect();
diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js
index 75be9449..95bccf70 100644
--- a/packages/web/src/datagrid/DataGridCore.js
+++ b/packages/web/src/datagrid/DataGridCore.js
@@ -312,12 +312,20 @@ export default function DataGridCore(props) {
     });
   }
 
+  const hederColwidthPx = '40px';
+  const filterCount = display.filterCount;
+
+  const handleClearFilters = () => {
+    display.clearFilters();
+  };
+
   // console.log('visibleRealColumnIndexes', visibleRealColumnIndexes);
   return (
     <GridContainer ref={containerRef}>
       <Table>
         <TableHead>
           <TableHeaderRow ref={headerRowRef}>
+            <TableHeaderCell />
             {realColumns.map(col => (
               <TableHeaderCell
                 key={col.uniqueName}
@@ -328,6 +336,13 @@ export default function DataGridCore(props) {
             ))}
           </TableHeaderRow>
           <TableHeaderRow>
+            <TableHeaderCell style={{ width: hederColwidthPx, minWidth: hederColwidthPx, maxWidth: hederColwidthPx }}>
+              {filterCount > 0 && (
+                <button onClick={handleClearFilters}>
+                  <i className="fas fa-times" />
+                </button>
+              )}
+            </TableHeaderCell>
             {realColumns.map(col => (
               <TableFilterCell
                 key={col.uniqueName}
@@ -347,6 +362,7 @@ export default function DataGridCore(props) {
             .slice(firstVisibleRowScrollIndex, firstVisibleRowScrollIndex + visibleRowCountUpperBound)
             .map((row, index) => (
               <TableBodyRow key={firstVisibleRowScrollIndex + index}>
+                <TableHeaderCell>{firstVisibleRowScrollIndex + index + 1}</TableHeaderCell>
                 {realColumns.map(col => (
                   <TableBodyCell
                     key={col.uniqueName}