Forward Ref and selection/scrollto

src/Gridler/stories/Examples.goapi.tsx

@@ -1,10 +1,11 @@
-import { Checkbox, Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
+import { Button, Checkbox, Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import type { GridlerColumns } from '../components/Column';
 
 import { GlidlerAPIAdaptorForGoLangv2 } from '../components/adaptors';
+import { type GridlerRef } from '../components/GridlerStore';
 import { Gridler } from '../Gridler';
 
 export const GridlerGoAPIExampleEventlog = () => {
@@ -12,6 +13,7 @@ export const GridlerGoAPIExampleEventlog = () => {
     defaultValue: 'http://localhost:8080/api',
     key: 'apiurl',
   });
+  const ref = useRef<GridlerRef>(null);
   const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
   const [selectRow, setSelectRow] = useState<string | undefined>('');
   const [values, setValues] = useState<Array<Record<string, any>>>([]);
@@ -106,8 +108,9 @@ export const GridlerGoAPIExampleEventlog = () => {
           //console.log('GridlerGoAPIExampleEventlog onChange', v);
           setValues(v);
         }}
+        ref={ref}
+        scrollToRowKey={selectRow ? parseInt(selectRow, 10) : undefined}
         sections={{ ...sections, rightElementDisabled: false }}
-        selectedRow={selectRow ? parseInt(selectRow, 10) : undefined}
         selectFirstRowOnMount={true}
         selectMode="row"
         title="Go API Example"
@@ -142,6 +145,43 @@ export const GridlerGoAPIExampleEventlog = () => {
         />
         ;
       </Group>
+      <Group>
+        <Button
+          onClick={() => {
+            ref.current?.refresh();
+          }}
+        >
+          Refresh
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.selectRow(20523);
+          }}
+        >
+          Select 20523
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.selectRow(4);
+          }}
+        >
+          Select 4
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.reloadRow(20523);
+          }}
+        >
+          Reload 20523
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.scrollToRow(16272);
+          }}
+        >
+          Goto 2050
+        </Button>
+      </Group>
     </Stack>
   );
 };