From 0061b8b7e3c5d6b0328411f1c712902f6b5f8add Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin94@gmail.com>
Date: Thu, 8 Sep 2022 15:51:45 +0530
Subject: [PATCH] Make table always apply filters and expose filtered data
 (#3968)

* Make table always apply filters and expose filtered data

* Re-render table when computed table data changes

* Re-apply global filter using search text when table data changes

* Stringify table data before sending it as dependency for table data to be displayed

* Use data returned from Table internal state to ensure filters are always applied

* Do not autoreset filteres in table when data changes

* Show row count of filtered row set in Table
---
 .../src/Editor/Components/Table/Table.jsx     | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 48857058fd..9edef64d3a 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -43,6 +43,7 @@ export function Table({
   fireEvent,
   setExposedVariable,
   registerAction,
+  properties,
 }) {
   const color =
     component.definition.styles.textColor.value !== '#000'
@@ -751,7 +752,12 @@ export function Table({
 
   const data = useMemo(
     () => tableData,
-    [tableData.length, componentState.changeSet, component.definition.properties.data.value]
+    [
+      tableData.length,
+      componentState.changeSet,
+      component.definition.properties.data.value,
+      JSON.stringify(properties.data),
+    ]
   );
 
   const computedStyles = {
@@ -777,12 +783,15 @@ export function Table({
     setAllFilters,
     preGlobalFilteredRows,
     setGlobalFilter,
-    state: { pageIndex, pageSize },
+    state: { pageIndex, globalFilter },
     exportData,
     selectedFlatRows,
+    globalFilteredRows,
   } = useTable(
     {
       autoResetPage: false,
+      autoResetGlobalFilter: false,
+      autoResetFilters: false,
       columns,
       data,
       defaultColumn,
@@ -874,6 +883,13 @@ export function Table({
 
   const tableRef = React.useRef();
 
+  useEffect(() => {
+    setExposedVariable(
+      'filteredData',
+      globalFilteredRows.map((row) => row.original)
+    );
+  }, [JSON.stringify(globalFilteredRows.map((row) => row.original))]);
+
   return (
     <div
       data-disabled={parsedDisabledState}
@@ -1082,7 +1098,7 @@ export function Table({
                   </button>
                 </>
               ) : (
-                <span>{`${preGlobalFilteredRows.length} Records`}</span>
+                <span>{`${globalFilteredRows.length} Records`}</span>
               )}
             </div>
           </div>