diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
index 56be883800..3bf7bde69d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
@@ -38,7 +38,7 @@ export const Grid = ({ viewId }: { viewId: string }) => {
                 <GridTableRows onOpenRow={onOpenRow} allRows={rows} viewId={viewId} controller={controller} />
               </table>
 
-              <GridAddRow />
+              <GridAddRow controller={controller} />
             </div>
 
             <GridTableCount />
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts
index 517e2964a2..4014e4d6b8 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts
@@ -1,7 +1,8 @@
-export const useGridAddRow = () => {
-  function addRow() {
-    // create a new row
-    console.log('create a new row');
+import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
+
+export const useGridAddRow = (controller: DatabaseController) => {
+  async function addRow() {
+    await controller.createRow();
   }
 
   return {
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx
index 846e9654c9..ad55a67b31 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx
@@ -1,7 +1,8 @@
+import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
 import AddSvg from '../../_shared/svg/AddSvg';
 import { useGridAddRow } from './GridAddRow.hooks';
-export const GridAddRow = () => {
-  const { addRow } = useGridAddRow();
+export const GridAddRow = ({ controller }: { controller: DatabaseController }) => {
+  const { addRow } = useGridAddRow(controller);
 
   return (
     <div>