From b292a56bfdd8ed945174cd26df6b42aa06fdc1e1 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Fri, 9 Apr 2021 11:09:27 +0530
Subject: [PATCH] Feature: Global searchf or data table

---
 frontend/src/Editor/Components/Table.jsx | 52 ++++++++++++++++++++----
 1 file changed, 45 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Editor/Components/Table.jsx b/frontend/src/Editor/Components/Table.jsx
index eef3df8f36..0d3f80894c 100644
--- a/frontend/src/Editor/Components/Table.jsx
+++ b/frontend/src/Editor/Components/Table.jsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect } from "react";
-import { useTable, useFilters, useSortBy } from "react-table";
+import { useTable, useFilters, useSortBy, useGlobalFilter, useAsyncDebounce } from "react-table";
 import { resolve } from '@/_helpers/utils';
 import Skeleton from 'react-loading-skeleton';
 
@@ -76,16 +76,49 @@ export function Table({ id, component, onComponentClick, currentState, onEvent }
         getTableBodyProps,
         headerGroups,
         rows,
+		state,
         prepareRow,
-		setFilter
+		setFilter,
+		preGlobalFilteredRows,
+    	setGlobalFilter,
     } = useTable( {
         columns,
         data
     },
 	useFilters,
+	useGlobalFilter,
 	useSortBy
 	);
 
+	function GlobalFilter({
+		preGlobalFilteredRows,
+		globalFilter,
+		setGlobalFilter,
+	  }) {
+		const count = preGlobalFilteredRows.length
+		const [value, setValue] = React.useState(globalFilter)
+		const onChange = useAsyncDebounce(value => {
+		  setGlobalFilter(value || undefined)
+		}, 200)
+	  
+		return (
+		  <div class="ms-2 d-inline-block">
+			Search:{' '}
+			<input
+			  value={value || ""}
+			  onChange={e => {
+				setValue(e.target.value);
+				onChange(e.target.value);
+			  }}
+			  placeholder={`${count} records`}
+			  style={{
+				border: '0',
+			  }}
+			/>
+		  </div>
+		)
+	  }
+
 
       return (
 		<div class="card" style={{width: '702px'}} onClick={() => onComponentClick(id, component) }>
@@ -99,15 +132,18 @@ export function Table({ id, component, onComponentClick, currentState, onEvent }
 			  entries
 			</div>
 			<div class="ms-auto text-muted">
-			  Search:
-			  <div class="ms-2 d-inline-block">
-				<input
+			  
+				{/* <input
 					className="form-control form-control-sm"
 					value={filterInput}
 					onChange={handleFilterChange}
 					placeholder={"Search name"}
+				/> */}
+				<GlobalFilter
+					preGlobalFilteredRows={preGlobalFilteredRows}
+					globalFilter={state.globalFilter}
+					setGlobalFilter={setGlobalFilter}
 				/>
-			  </div>
 			</div>
 		  </div>
 		</div>
@@ -153,7 +189,9 @@ export function Table({ id, component, onComponentClick, currentState, onEvent }
             }
 		</div>
 		<div class="card-footer d-flex align-items-center">
-		  <p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
+			<p class="m-0 text-muted">
+				Showing the first 10 results of {rows.length} rows 
+			</p>
 		  <ul class="pagination m-0 ms-auto">
 			<li class="page-item disabled">
 			  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">