fix(Computer): ✨ update selectFirstRowOnMount logic

* Introduce selectFirstRowOnMount to manage row selection on component mount.
* Update useEffect dependencies to include selectFirstRowOnMount.
* Ensure first row selection logic handles cases where keyField is not defined.

src/Gridler/components/Computer.tsx

@@ -25,9 +25,10 @@ export const Computer = React.memo(() => {
     scrollToRowKey,
     searchStr,
     selectedRowKey,
+    selectFirstRowOnMount,
     setState,
     setStateFN,
-    values,
+    values
   } = useGridlerStore((s) => ({
     _glideref: s._glideref,
     _gridSelectionRows: s._gridSelectionRows,
@@ -44,6 +45,7 @@ export const Computer = React.memo(() => {
     scrollToRowKey: s.scrollToRowKey,
     searchStr: s.searchStr,
     selectedRowKey: s.selectedRowKey,
+    selectFirstRowOnMount:s.selectFirstRowOnMount,
     setState: s.setState,
     setStateFN: s.setStateFN,
     uniqueid: s.uniqueid,
@@ -268,18 +270,25 @@ export const Computer = React.memo(() => {
   //Logic to select first row on mount
   useEffect(() => {
     const _events = getState('_events');
+
     const loadPage = () => {
       const selectFirstRowOnMount = getState('selectFirstRowOnMount');
+      const ready = getState('ready');
+
       if (ready && selectFirstRowOnMount) {
+
         const scrollToRowKey = getState('scrollToRowKey');
+        
+      
         if (scrollToRowKey && scrollToRowKey >= 0) {
           return;
         }
+        
         const keyField = getState('keyField') ?? 'id';
         const page_data = getState('_page_data');
 
         const firstBuffer = page_data?.[0]?.[0];
-        const firstRow = firstBuffer?.[keyField];
+        const firstRow = firstBuffer?.[keyField] ?? -1;
         const currentValues = getState('values') ?? [];
 
         if (
@@ -290,6 +299,7 @@ export const Computer = React.memo(() => {
         ) {
           const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
 
+
           const onChange = getState('onChange');
           //console.log('Selecting first row:', firstRow, firstBuffer, values);
           if (onChange) {
@@ -308,7 +318,7 @@ export const Computer = React.memo(() => {
     return () => {
       _events?.removeEventListener('loadPage', loadPage);
     };
-  }, [ready]);
+  }, [ready, selectFirstRowOnMount]);
 
   /// logic to apply the selected row.
   // useEffect(() => {