clear filter button

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();
+  }
 }

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();

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}