🐛 pin add row to bottom

Author: anaisberg

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DatabaseBlock/DatabaseGrid.tsx

@@ -5,7 +5,7 @@ import {
   ICellRendererParams,
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 import { Box } from '@/components';
 import {
@@ -88,7 +88,7 @@ export const DatabaseGrid = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableData]);
 
-  useEffect(() => {
+  const addNewRow = useMemo(() => {
     const columnNames = getColumnNames(colDefs);
     const lastRow = rowData?.[rowData.length - 1];
     if (lastRow && Object.values(lastRow).length > 0) {
@@ -97,8 +97,9 @@ export const DatabaseGrid = ({
         return;
       }
     }
-    const addNewRow = createNewRow({ value: ADD_NEW_ROW, columnNames });
-    setRowData((prev) => [...(prev ? prev : []), addNewRow]);
+    const newRow = createNewRow({ value: ADD_NEW_ROW, columnNames });
+
+    return newRow;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colDefs]);
 
@@ -167,6 +168,7 @@ export const DatabaseGrid = ({
           domLayout="autoHeight"
           enableCellSpan={true}
           onCellEditingStopped={onCellEditingStopped}
+          pinnedBottomRowData={[addNewRow]}
         />
       </Box>
       <AddButtonComponent addColumn={addColumn} />