Work on grid

src/Gridler/components/Computer.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 
-import { useStore } from './Store';
+import { useGridlerStore } from './Store';
 
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
 export const Computer = React.memo(() => {
   const refFirstRun = useRef(0);
+  const refLastFilters = useRef<any>(null);
   const {
     _glideref,
-
+    colFilters,
     colOrder,
     colSize,
     colSort,
@@ -15,7 +16,7 @@ export const Computer = React.memo(() => {
     loadPage,
     setState,
     setStateFN,
-  } = useStore((s) => ({
+  } = useGridlerStore((s) => ({
     _glideref: s._glideref,
     colFilters: s.colFilters,
     colOrder: s.colOrder,
@@ -59,6 +60,17 @@ export const Computer = React.memo(() => {
     });
   }, [colSort]);
 
+  useEffect(() => {
+    if (!colFilters) {
+      return;
+    }
+    
+    if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
+      loadPage(0, 'all');
+      refLastFilters.current = colFilters;
+    }
+  }, [colFilters]);
+
   useEffect(() => {
     if (!colSize) {
       return;