Search working

src/Gridler/components/Computer.tsx

@@ -1,4 +1,5 @@
 import { CompactSelection } from '@glideapps/glide-data-grid';
+import { useDebouncedValue } from '@mantine/hooks';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './GridlerStore';
@@ -21,6 +22,7 @@ export const Computer = React.memo(() => {
     ready,
 
     scrollToRowKey,
+    searchStr,
     selectedRowKey,
     setState,
     setStateFN,
@@ -39,6 +41,7 @@ export const Computer = React.memo(() => {
     ready: s.ready,
 
     scrollToRowKey: s.scrollToRowKey,
+    searchStr: s.searchStr,
     selectedRowKey: s.selectedRowKey,
     setState: s.setState,
     setStateFN: s.setStateFN,
@@ -46,6 +49,10 @@ export const Computer = React.memo(() => {
     values: s.values,
   }));
 
+  const debouncedSearchStr = useDebouncedValue(searchStr, 400, {
+    leading: true,
+  });
+
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
@@ -161,6 +168,21 @@ export const Computer = React.memo(() => {
     );
   }, [columns]);
 
+  useEffect(() => {
+    if (debouncedSearchStr === undefined || debouncedSearchStr === null) {
+      return;
+    }
+
+    loadPage(0, 'all').then(() => {
+      getState('refreshCells')?.();
+      getState('_events')?.dispatchEvent?.(
+        new CustomEvent('onSearched', {
+          detail: { search: debouncedSearchStr },
+        })
+      );
+    });
+  }, [debouncedSearchStr]);
+
   useEffect(() => {
     if (!colSort) {
       return;

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -76,7 +76,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
               ?.forEach((filter: any) => {
                 ops.push({
                   name: `${filter.id}`,
-                  op: filter.operator,
+                  op: 'contains',
                   type: 'searchor',
                   value: searchStr,
                 });

src/Gridler/stories/Examples.goapi.tsx

@@ -17,6 +17,7 @@ export const GridlerGoAPIExampleEventlog = () => {
   const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
   const [selectRow, setSelectRow] = useState<string | undefined>('');
   const [values, setValues] = useState<Array<Record<string, any>>>([]);
+  const [search, setSearch] = useState<string>('');
   const [sections, setSections] = useState<Record<string, unknown> | undefined>(undefined);
   const columns: GridlerColumns = [
     {
@@ -110,6 +111,7 @@ export const GridlerGoAPIExampleEventlog = () => {
         }}
         ref={ref}
         scrollToRowKey={selectRow ? parseInt(selectRow, 10) : undefined}
+        searchStr={search}
         sections={{ ...sections, rightElementDisabled: false }}
         selectFirstRowOnMount={true}
         selectMode="row"
@@ -131,6 +133,13 @@ export const GridlerGoAPIExampleEventlog = () => {
       </Gridler>
       <Divider />
       <Group>
+        <TextInput
+          leftSection={<>S</>}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search"
+          value={search}
+          w="190px"
+        />
         <TextInput
           onChange={(e) => setSelectRow(e.target.value)}
           placeholder="row"