From 41d8feb84b0243db15d731b95d9b8e42bc7a598e Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Thu, 30 Mar 2023 15:03:08 +0530
Subject: [PATCH 01/36] =?UTF-8?q?=E2=9C=A8=20feat(App.tsx):=20add=20route?=
 =?UTF-8?q?=20for=20ProvidedArraySubTablePage=20at=20/array-sub-table/:doc?=
 =?UTF-8?q?Path/:subTableKey?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index ea283a01..d169bb1e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ import useKeyPressWithAtom from "@src/hooks/useKeyPressWithAtom";
 
 import TableGroupRedirectPage from "./pages/TableGroupRedirectPage";
 import SignOutPage from "@src/pages/Auth/SignOutPage";
+import ProvidedArraySubTablePage from "./pages/Table/ProvidedArraySubTablePage";
 
 // prettier-ignore
 const AuthPage = lazy(() => import("@src/pages/Auth/AuthPage" /* webpackChunkName: "AuthPage" */));
@@ -134,6 +135,27 @@ export default function App() {
                     }
                   />
                 </Route>
+                <Route path={ROUTES.arraySubTable}>
+                  <Route index element={<NotFound />} />
+                  <Route
+                    path=":docPath/:subTableKey"
+                    element={
+                      <Suspense
+                        fallback={
+                          <Backdrop
+                            key="sub-table-modal-backdrop"
+                            open
+                            sx={{ zIndex: "modal" }}
+                          >
+                            <Loading />
+                          </Backdrop>
+                        }
+                      >
+                        <ProvidedArraySubTablePage />
+                      </Suspense>
+                    }
+                  />
+                </Route>
               </Route>
             </Route>
 

From bc815afe74dc543c58a5f970406701b539128597 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Thu, 6 Apr 2023 17:16:26 +0300
Subject: [PATCH 02/36] update the connector field default value

---
 src/components/fields/Connector/utils.ts | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/fields/Connector/utils.ts b/src/components/fields/Connector/utils.ts
index 921997ad..ecbe3f52 100644
--- a/src/components/fields/Connector/utils.ts
+++ b/src/components/fields/Connector/utils.ts
@@ -11,16 +11,19 @@ export const replacer = (data: any) => (m: string, key: string) => {
   return get(data, objKey, defaultValue);
 };
 
-export const baseFunction = `const connectorFn: Connector = async ({query, row, user, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-  logging.log("connectorFn started")
-  
-  // Import any NPM package needed
-  // const lodash = require('lodash');
-  
-  return [];
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-};`;
+export const baseFunction = `// Import any NPM package needed
+import lodash from "lodash";
+
+const connector: Connector = async ({ query, row, user, logging }) => {
+  logging.log("connector started");
+  // return [
+  //   { id: "a", name: "Apple" },
+  //   { id: "b", name: "Banana" },
+  // ];
+};
+
+export default connector;
+`;
 
 export const getLabel = (config: any, row: TableRow) => {
   if (!config.labelFormatter) {

From 0bc104d07e8c72404f169c88ed83923b82aebe98 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Thu, 6 Apr 2023 17:18:59 +0300
Subject: [PATCH 03/36] convert the import into comment

---
 src/components/fields/Connector/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/Connector/utils.ts b/src/components/fields/Connector/utils.ts
index ecbe3f52..88a90ed2 100644
--- a/src/components/fields/Connector/utils.ts
+++ b/src/components/fields/Connector/utils.ts
@@ -12,7 +12,7 @@ export const replacer = (data: any) => (m: string, key: string) => {
 };
 
 export const baseFunction = `// Import any NPM package needed
-import lodash from "lodash";
+// import _ from "lodash";
 
 const connector: Connector = async ({ query, row, user, logging }) => {
   logging.log("connector started");

From 13c1b693864d419998d9ccfc7b0b778078bdff55 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Thu, 6 Apr 2023 17:26:03 +0300
Subject: [PATCH 04/36] update the action and the redo code templates

---
 src/components/fields/Action/templates.ts | 110 +++++++++++-----------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/components/fields/Action/templates.ts b/src/components/fields/Action/templates.ts
index 46b0a0b5..294eab3e 100644
--- a/src/components/fields/Action/templates.ts
+++ b/src/components/fields/Action/templates.ts
@@ -1,67 +1,67 @@
-export const RUN_ACTION_TEMPLATE = `const action:Action = async ({row,ref,db,storage,auth,actionParams,user,logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-  logging.log("action started")
-  
-  // Import any NPM package needed
-  // const lodash = require('lodash');
-  
-  // Example:
-  /*
-  const authToken = await rowy.secrets.get("service")
-  try {
-    const resp = await fetch('https://example.com/api/v1/users/'+ref.id,{
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': authToken
-      },
-      body: JSON.stringify(row)
-    })
-    return {
-      success: true,
-      message: 'User updated successfully on example service',  
-      status: "upto date"
-    }
-  } catch (error) {
-    return {
-      success: false,
-      message: 'User update failed on example service',
-    }
-  }
-  */
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-}`;
+export const RUN_ACTION_TEMPLATE = `// Import any NPM package needed
+// import _ from "lodash";
+
+const action: Action = async ({ row, ref, db, storage, auth, actionParams, user, logging }) => {
+  logging.log("action started");
 
-export const UNDO_ACTION_TEMPLATE = `const action : Action = async ({row,ref,db,storage,auth,actionParams,user,logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-  logging.log("action started")
-  
-  // Import any NPM package needed
-  // const lodash = require('lodash');
-  
-  // Example:
   /*
-  const authToken = await rowy.secrets.get("service")
+  // Example:
+  const authToken = await rowy.secrets.get("service");
   try {
-    const resp = await fetch('https://example.com/api/v1/users/'+ref.id,{
-      method: 'DELETE',
+    const resp = await fetch("https://example.com/api/v1/users/" + ref.id, {
+      method: "PUT",
       headers: {
-        'Content-Type': 'application/json',
-        'Authorization': authToken
+        "Content-Type": "application/json",
+        Authorization: authToken,
       },
-      body: JSON.stringify(row)
-    })
+      body: JSON.stringify(row),
+    });
     return {
       success: true,
-      message: 'User deleted successfully on example service',
-      status: null
-    }
+      message: "User updated successfully on example service",
+      status: "upto date",
+    };
   } catch (error) {
     return {
       success: false,
-      message: 'User delete failed on example service',
-    }
+      message: "User update failed on example service",
+    };
   }
   */
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-}`;
+};
+
+export default action;
+`;
+
+export const UNDO_ACTION_TEMPLATE = `// Import any NPM package needed
+// import _ from "lodash";
+
+const action: Action = async ({ row, ref, db, storage, auth, actionParams, user, logging }) => {
+  logging.log("action started");
+
+  /*
+  // Example:
+  const authToken = await rowy.secrets.get("service");
+  try {
+    const resp = await fetch("https://example.com/api/v1/users/" + ref.id, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: authToken,
+      },
+      body: JSON.stringify(row),
+    });
+    return {
+      success: true,
+      message: "User deleted successfully on example service",
+      status: null,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: "User delete failed on example service",
+    };
+  }
+  */
+};
+`;

From e841c994e5a174965a154613c20afd2e44393b15 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Thu, 6 Apr 2023 17:30:21 +0300
Subject: [PATCH 05/36] Update the derivative default template

---
 src/components/fields/Derivative/Settings.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 1c2486d2..0ca5dd51 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -75,18 +75,19 @@ export default function Settings({
   ${config.script.replace(/utilFns.getSecret/g, "rowy.secrets.get")}
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`
-    : `const derivative:Derivative = async ({row,ref,db,storage,auth,logging})=>{
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-  logging.log("derivative started")
-  
-  // Import any NPM package needed
-  // const lodash = require('lodash');
-  
+    : `// Import any NPM package needed
+// import _ from "lodash";
+
+const derivative: Derivative = async ({ row, ref, db, storage, auth, logging }) => {
+  logging.log("derivative started");
+
   // Example:
   // const sum = row.a + row.b;
   // return sum;
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-}`;
+};
+
+export default derivative;
+`;
 
   return (
     <>

From 8254623c2cbafa8fb7e56927c25554cf1d5c2479 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Thu, 6 Apr 2023 17:38:40 +0300
Subject: [PATCH 06/36] fix redo action template

---
 src/components/fields/Action/templates.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/fields/Action/templates.ts b/src/components/fields/Action/templates.ts
index 294eab3e..3a9baf7a 100644
--- a/src/components/fields/Action/templates.ts
+++ b/src/components/fields/Action/templates.ts
@@ -64,4 +64,6 @@ const action: Action = async ({ row, ref, db, storage, auth, actionParams, user,
   }
   */
 };
+
+export default action;
 `;

From d0dd89b00b177102c3951cf7040289907a6f0498 Mon Sep 17 00:00:00 2001
From: Yaman Katby <m.yaman.katby@gmail.com>
Date: Thu, 6 Apr 2023 17:38:53 +0300
Subject: [PATCH 07/36] update default value function template

---
 .../ColumnConfigModal/DefaultValueInput.tsx      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx b/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
index 5146c387..b5e3dc05 100644
--- a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
+++ b/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
@@ -61,15 +61,19 @@ function CodeEditor({ type, column, handleChange }: ICodeEditorProps) {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`;
   } else {
-    dynamicValueFn = `const dynamicValueFn: DefaultValue = async ({row,ref,db,storage,auth,logging})=>{
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-  logging.log("dynamicValueFn started")
-  
+    dynamicValueFn = `// Import any NPM package needed
+// import _ from "lodash";
+
+const defaultValue: DefaultValue = async ({ row, ref, db, storage, auth, logging }) => {
+  logging.log("dynamicValueFn started");
+
   // Example: generate random hex color
   // const color = "#" + Math.floor(Math.random() * 16777215).toString(16);
   // return color;
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
-}`;
+};
+
+export default defaultValue;
+`;
   }
 
   return (

From 4fc88e36f8f21a70e18d5322ea3d279888d201ac Mon Sep 17 00:00:00 2001
From: Harini Janakiraman <harinijanakiraman@gmail.com>
Date: Sun, 9 Apr 2023 11:18:33 +1000
Subject: [PATCH 08/36] Update README.md

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index e4aa71b8..c064ca7e 100644
--- a/README.md
+++ b/README.md
@@ -13,12 +13,12 @@ Low-code for Firebase and Google Cloud.
 
 <div align="center">
 
-[![Discord](https://img.shields.io/discord/853498675484819476?color=%234200FF&label=Chat%20with%20us&logo=discord&logoColor=%23FFFFFF&style=for-the-badge)](https://discord.gg/fjBugmvzZP)
+[![Rowy Discord](https://dcbadge.vercel.app/api/server/fjBugmvzZP)](https://discord.gg/fjBugmvzZP)
 
 <p align="center">
     <a href="http://www.rowy.io"><b>Website</b></a> •
     <a href="http://docs.rowy.io"><b>Documentation</b></a> •
-    <a href="https://discord.gg/fjBugmvzZP"><b>Discord</b></a> • 
+    <a href="https://discord.gg/fjBugmvzZP"><b>Chat with us</b></a> • 
     <a href="https://twitter.com/rowyio"><b>Twitter</b></a>
 </p>
 
@@ -27,11 +27,11 @@ Low-code for Firebase and Google Cloud.
 
 </div>
 
-## Live Demo
+## Live Demo 🛝
 
-💥 Check out the [live demo](https://demo.rowy.io/) of Rowy 💥
+💥 Explore Rowy on [live demo playground](https://demo.rowy.io/) 💥
 
-## Features
+## Features ✨
 
 <!-- <table>
     <tr>
@@ -39,7 +39,7 @@ Low-code for Firebase and Google Cloud.
       <a href="#">Database</a>
     </th>
     <th>
-      <a href="#">Code</a>
+      <a href="#">Automation</a>
     </th>
     </tr>
     <tr>

From 5bf33f097c8f4998ca80e8eab2ec5e9f4d0da688 Mon Sep 17 00:00:00 2001
From: Bobby Wang <bofei@mail.com>
Date: Mon, 10 Apr 2023 15:18:34 +0800
Subject: [PATCH 09/36] optimise endpoint call for listSecrets

---
 src/atoms/projectScope/project.ts             | 13 +++
 .../CodeEditor/useMonacoCustomizations.ts     | 47 ++++-----
 .../WebhooksModal/Schemas/basic.tsx           | 11 +--
 .../WebhooksModal/Schemas/firebaseAuth.tsx    | 11 +--
 .../WebhooksModal/Schemas/sendgrid.tsx        | 11 +--
 .../WebhooksModal/Schemas/stripe.tsx          | 99 ++++++++++++-------
 .../WebhooksModal/Schemas/typeform.tsx        | 11 +--
 .../WebhooksModal/Schemas/webform.tsx         | 11 +--
 .../TableModals/WebhooksModal/Step1Auth.tsx   | 35 +------
 .../TableModals/WebhooksModal/utils.tsx       |  6 --
 .../useTableFunctions.ts                      | 41 ++++++++
 11 files changed, 147 insertions(+), 149 deletions(-)

diff --git a/src/atoms/projectScope/project.ts b/src/atoms/projectScope/project.ts
index 222ee942..0cd213fb 100644
--- a/src/atoms/projectScope/project.ts
+++ b/src/atoms/projectScope/project.ts
@@ -133,3 +133,16 @@ export const FunctionsIndexAtom = atom<FunctionSettings[]>([]);
 export const updateFunctionAtom = atom<
   UpdateCollectionDocFunction<FunctionSettings> | undefined
 >(undefined);
+
+export interface ISecretNames {
+  loading: boolean;
+  secretNames: null | string[];
+}
+
+export const secretNamesAtom = atom<ISecretNames>({
+  loading: true,
+  secretNames: null,
+});
+export const updateSecretNamesAtom = atom<
+  ((clearSecretNames?: boolean) => Promise<void>) | undefined
+>(undefined);
diff --git a/src/components/CodeEditor/useMonacoCustomizations.ts b/src/components/CodeEditor/useMonacoCustomizations.ts
index d145d72e..012bf4c9 100644
--- a/src/components/CodeEditor/useMonacoCustomizations.ts
+++ b/src/components/CodeEditor/useMonacoCustomizations.ts
@@ -19,8 +19,7 @@ import firebaseStorageDefs from "!!raw-loader!./firebaseStorage.d.ts";
 import utilsDefs from "!!raw-loader!./utils.d.ts";
 import rowyUtilsDefs from "!!raw-loader!./rowy.d.ts";
 import extensionsDefs from "!!raw-loader!./extensions.d.ts";
-import { runRoutes } from "@src/constants/runRoutes";
-import { rowyRunAtom, projectScope } from "@src/atoms/projectScope";
+import { projectScope, secretNamesAtom } from "@src/atoms/projectScope";
 import { getFieldProp } from "@src/components/fields";
 
 export interface IUseMonacoCustomizationsProps {
@@ -53,8 +52,8 @@ export default function useMonacoCustomizations({
   const theme = useTheme();
   const monaco = useMonaco();
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
-  const [rowyRun] = useAtom(rowyRunAtom, projectScope);
   const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
+  const [secretNames] = useAtom(secretNamesAtom, projectScope);
 
   useEffect(() => {
     return () => {
@@ -206,26 +205,6 @@ export default function useMonacoCustomizations({
     //}
   };
 
-  const setSecrets = async () => {
-    // set secret options
-    try {
-      const listSecrets = await rowyRun({
-        route: runRoutes.listSecrets,
-      });
-      const secretsDef = `type SecretNames = ${listSecrets
-        .map((secret: string) => `"${secret}"`)
-        .join(" | ")}
-        enum secrets {
-          ${listSecrets
-            .map((secret: string) => `${secret} = "${secret}"`)
-            .join("\n")}
-        }
-        `;
-      monaco?.languages.typescript.javascriptDefaults.addExtraLib(secretsDef);
-    } catch (error) {
-      console.error("Could not set secret definitions: ", error);
-    }
-  };
   //TODO: types
   const setBaseDefinitions = () => {
     const rowDefinition =
@@ -275,14 +254,24 @@ export default function useMonacoCustomizations({
     } catch (error) {
       console.error("Could not set basic", error);
     }
-    // set available secrets from secretManager
-    try {
-      setSecrets();
-    } catch (error) {
-      console.error("Could not set secrets: ", error);
-    }
   }, [monaco, tableColumnsOrdered]);
 
+  useEffect(() => {
+    if (!monaco) return;
+    if (secretNames.loading) return;
+    if (!secretNames.secretNames) return;
+    const secretsDef = `type SecretNames = ${secretNames.secretNames
+      .map((secret: string) => `"${secret}"`)
+      .join(" | ")}
+        enum secrets {
+          ${secretNames.secretNames
+            .map((secret: string) => `${secret} = "${secret}"`)
+            .join("\n")}
+        }
+       `;
+    monaco?.languages.typescript.javascriptDefaults.addExtraLib(secretsDef);
+  }, [monaco, secretNames]);
+
   let boxSx: SystemStyleObject<Theme> = {
     minWidth: 400,
     minHeight,
diff --git a/src/components/TableModals/WebhooksModal/Schemas/basic.tsx b/src/components/TableModals/WebhooksModal/Schemas/basic.tsx
index dfb3e90f..1ee073db 100644
--- a/src/components/TableModals/WebhooksModal/Schemas/basic.tsx
+++ b/src/components/TableModals/WebhooksModal/Schemas/basic.tsx
@@ -1,10 +1,7 @@
 import { Typography } from "@mui/material";
 import WarningIcon from "@mui/icons-material/WarningAmber";
 import { TableSettings } from "@src/types/table";
-import {
-  IWebhook,
-  ISecret,
-} from "@src/components/TableModals/WebhooksModal/utils";
+import { IWebhook } from "@src/components/TableModals/WebhooksModal/utils";
 
 const requestType = [
   "declare type WebHookRequest {",
@@ -101,11 +98,7 @@ export const webhookBasic = {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`,
   },
-  auth: (
-    webhookObject: IWebhook,
-    setWebhookObject: (w: IWebhook) => void,
-    secrets: ISecret
-  ) => {
+  Auth: (webhookObject: IWebhook, setWebhookObject: (w: IWebhook) => void) => {
     return (
       <Typography color="text.disabled">
         <WarningIcon aria-label="Warning" style={{ verticalAlign: "bottom" }} />
diff --git a/src/components/TableModals/WebhooksModal/Schemas/firebaseAuth.tsx b/src/components/TableModals/WebhooksModal/Schemas/firebaseAuth.tsx
index 21d2d3fd..217eb095 100644
--- a/src/components/TableModals/WebhooksModal/Schemas/firebaseAuth.tsx
+++ b/src/components/TableModals/WebhooksModal/Schemas/firebaseAuth.tsx
@@ -1,10 +1,7 @@
 import { Typography, Link, TextField } from "@mui/material";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import { TableSettings } from "@src/types/table";
-import {
-  IWebhook,
-  ISecret,
-} from "@src/components/TableModals/WebhooksModal/utils";
+import { IWebhook } from "@src/components/TableModals/WebhooksModal/utils";
 
 export const webhookFirebaseAuth = {
   name: "firebaseAuth",
@@ -41,11 +38,7 @@ export const webhookFirebaseAuth = {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`,
   },
-  auth: (
-    webhookObject: IWebhook,
-    setWebhookObject: (w: IWebhook) => void,
-    secrets: ISecret
-  ) => {
+  Auth: (webhookObject: IWebhook, setWebhookObject: (w: IWebhook) => void) => {
     return (
       <>
         <Typography variant="inherit" paragraph>
diff --git a/src/components/TableModals/WebhooksModal/Schemas/sendgrid.tsx b/src/components/TableModals/WebhooksModal/Schemas/sendgrid.tsx
index ea24dabe..e23bef18 100644
--- a/src/components/TableModals/WebhooksModal/Schemas/sendgrid.tsx
+++ b/src/components/TableModals/WebhooksModal/Schemas/sendgrid.tsx
@@ -1,10 +1,7 @@
 import { Typography, Link, TextField } from "@mui/material";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import { TableSettings } from "@src/types/table";
-import {
-  IWebhook,
-  ISecret,
-} from "@src/components/TableModals/WebhooksModal/utils";
+import { IWebhook } from "@src/components/TableModals/WebhooksModal/utils";
 
 export const webhookSendgrid = {
   name: "SendGrid",
@@ -51,11 +48,7 @@ export const webhookSendgrid = {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`,
   },
-  auth: (
-    webhookObject: IWebhook,
-    setWebhookObject: (w: IWebhook) => void,
-    secrets: ISecret
-  ) => {
+  Auth: (webhookObject: IWebhook, setWebhookObject: (w: IWebhook) => void) => {
     return (
       <>
         <Typography gutterBottom>
diff --git a/src/components/TableModals/WebhooksModal/Schemas/stripe.tsx b/src/components/TableModals/WebhooksModal/Schemas/stripe.tsx
index bbf8c5a5..9c34383f 100644
--- a/src/components/TableModals/WebhooksModal/Schemas/stripe.tsx
+++ b/src/components/TableModals/WebhooksModal/Schemas/stripe.tsx
@@ -1,14 +1,18 @@
-import { Typography, Link, TextField, Alert } from "@mui/material";
+import { useAtom } from "jotai";
+import { Typography, Link, TextField, Alert, Box } from "@mui/material";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import { TableSettings } from "@src/types/table";
+import { IWebhook } from "@src/components/TableModals/WebhooksModal/utils";
 import {
-  IWebhook,
-  ISecret,
-} from "@src/components/TableModals/WebhooksModal/utils";
+  projectScope,
+  secretNamesAtom,
+  updateSecretNamesAtom,
+} from "@src/atoms/projectScope";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
+import LoadingButton from "@mui/lab/LoadingButton";
 
 export const webhookStripe = {
   name: "Stripe",
@@ -49,11 +53,10 @@ export const webhookStripe = {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`,
   },
-  auth: (
-    webhookObject: IWebhook,
-    setWebhookObject: (w: IWebhook) => void,
-    secrets: ISecret
-  ) => {
+  Auth: (webhookObject: IWebhook, setWebhookObject: (w: IWebhook) => void) => {
+    const [secretNames] = useAtom(secretNamesAtom, projectScope);
+    const [updateSecretNames] = useAtom(updateSecretNamesAtom, projectScope);
+
     return (
       <>
         <Typography gutterBottom>
@@ -77,8 +80,9 @@ export const webhookStripe = {
         </Typography>
 
         {webhookObject.auth.secretKey &&
-          !secrets.loading &&
-          !secrets.keys.includes(webhookObject.auth.secretKey) && (
+          !secretNames.loading &&
+          secretNames.secretNames &&
+          !secretNames.secretNames.includes(webhookObject.auth.secretKey) && (
             <Alert severity="error" sx={{ height: "auto!important" }}>
               Your previously selected key{" "}
               <code>{webhookObject.auth.secretKey}</code> does not exist in
@@ -86,34 +90,55 @@ export const webhookStripe = {
             </Alert>
           )}
 
-        <FormControl fullWidth margin={"normal"}>
-          <InputLabel id="stripe-secret-key">Secret key</InputLabel>
-          <Select
-            labelId="stripe-secret-key"
-            id="stripe-secret-key"
-            label="Secret key"
-            variant="filled"
-            value={webhookObject.auth.secretKey}
-            onChange={(e) => {
-              setWebhookObject({
-                ...webhookObject,
-                auth: { ...webhookObject.auth, secretKey: e.target.value },
-              });
-            }}
-          >
-            {secrets.keys.map((secret) => {
-              return <MenuItem value={secret}>{secret}</MenuItem>;
-            })}
-            <MenuItem
-              onClick={() => {
-                const secretManagerLink = `https://console.cloud.google.com/security/secret-manager/create?project=${secrets.projectId}`;
-                window?.open?.(secretManagerLink, "_blank")?.focus();
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginY: 1,
+          }}
+        >
+          <FormControl fullWidth>
+            <InputLabel id="stripe-secret-key">Secret key</InputLabel>
+            <Select
+              labelId="stripe-secret-key"
+              id="stripe-secret-key"
+              label="Secret key"
+              variant="filled"
+              value={webhookObject.auth.secretKey}
+              onChange={(e) => {
+                setWebhookObject({
+                  ...webhookObject,
+                  auth: { ...webhookObject.auth, secretKey: e.target.value },
+                });
               }}
             >
-              Add a key in Secret Manager
-            </MenuItem>
-          </Select>
-        </FormControl>
+              {secretNames.secretNames?.map((secret) => {
+                return <MenuItem value={secret}>{secret}</MenuItem>;
+              })}
+              <MenuItem
+                onClick={() => {
+                  const secretManagerLink = `https://console.cloud.google.com/security/secret-manager/create`;
+                  window?.open?.(secretManagerLink, "_blank")?.focus();
+                }}
+              >
+                Add a key in Secret Manager
+              </MenuItem>
+            </Select>
+          </FormControl>
+          <LoadingButton
+            sx={{
+              height: "100%",
+              marginLeft: 1,
+            }}
+            loading={secretNames.loading}
+            onClick={() => {
+              updateSecretNames?.();
+            }}
+          >
+            Refresh
+          </LoadingButton>
+        </Box>
         <TextField
           id="stripe-signing-secret"
           label="Signing key"
diff --git a/src/components/TableModals/WebhooksModal/Schemas/typeform.tsx b/src/components/TableModals/WebhooksModal/Schemas/typeform.tsx
index 6fb1b683..18c60569 100644
--- a/src/components/TableModals/WebhooksModal/Schemas/typeform.tsx
+++ b/src/components/TableModals/WebhooksModal/Schemas/typeform.tsx
@@ -1,10 +1,7 @@
 import { Typography, Link, TextField } from "@mui/material";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import { TableSettings } from "@src/types/table";
-import {
-  IWebhook,
-  ISecret,
-} from "@src/components/TableModals/WebhooksModal/utils";
+import { IWebhook } from "@src/components/TableModals/WebhooksModal/utils";
 
 export const webhookTypeform = {
   name: "Typeform",
@@ -83,11 +80,7 @@ export const webhookTypeform = {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`,
   },
-  auth: (
-    webhookObject: IWebhook,
-    setWebhookObject: (w: IWebhook) => void,
-    secrets: ISecret
-  ) => {
+  Auth: (webhookObject: IWebhook, setWebhookObject: (w: IWebhook) => void) => {
     return (
       <>
         <Typography gutterBottom>
diff --git a/src/components/TableModals/WebhooksModal/Schemas/webform.tsx b/src/components/TableModals/WebhooksModal/Schemas/webform.tsx
index bcc1b028..848bad07 100644
--- a/src/components/TableModals/WebhooksModal/Schemas/webform.tsx
+++ b/src/components/TableModals/WebhooksModal/Schemas/webform.tsx
@@ -1,10 +1,7 @@
 import { Typography, Link, TextField } from "@mui/material";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
 import { TableSettings } from "@src/types/table";
-import {
-  IWebhook,
-  ISecret,
-} from "@src/components/TableModals/WebhooksModal/utils";
+import { IWebhook } from "@src/components/TableModals/WebhooksModal/utils";
 
 export const webhook = {
   name: "Web Form",
@@ -51,11 +48,7 @@ export const webhook = {
   // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`,
   },
-  auth: (
-    webhookObject: IWebhook,
-    setWebhookObject: (w: IWebhook) => void,
-    secrets: ISecret
-  ) => {
+  Auth: (webhookObject: IWebhook, setWebhookObject: (w: IWebhook) => void) => {
     return (
       <>
         <Typography gutterBottom>
diff --git a/src/components/TableModals/WebhooksModal/Step1Auth.tsx b/src/components/TableModals/WebhooksModal/Step1Auth.tsx
index 59bafba9..94f4f2eb 100644
--- a/src/components/TableModals/WebhooksModal/Step1Auth.tsx
+++ b/src/components/TableModals/WebhooksModal/Step1Auth.tsx
@@ -1,41 +1,13 @@
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
 import { IWebhookModalStepProps } from "./WebhookModal";
 
 import { FormControlLabel, Checkbox, Typography } from "@mui/material";
 
-import {
-  projectIdAtom,
-  projectScope,
-  rowyRunAtom,
-} from "@src/atoms/projectScope";
-import { runRoutes } from "@src/constants/runRoutes";
-import { webhookSchemas, ISecret } from "./utils";
+import { webhookSchemas } from "./utils";
 
 export default function Step1Endpoint({
   webhookObject,
   setWebhookObject,
 }: IWebhookModalStepProps) {
-  const [rowyRun] = useAtom(rowyRunAtom, projectScope);
-  const [projectId] = useAtom(projectIdAtom, projectScope);
-  const [secrets, setSecrets] = useState<ISecret>({
-    loading: true,
-    keys: [],
-    projectId,
-  });
-
-  useEffect(() => {
-    rowyRun({
-      route: runRoutes.listSecrets,
-    }).then((secrets) => {
-      setSecrets({
-        loading: false,
-        keys: secrets as string[],
-        projectId,
-      });
-    });
-  }, []);
-
   return (
     <>
       <Typography variant="inherit" paragraph>
@@ -63,10 +35,9 @@ export default function Step1Endpoint({
       />
 
       {webhookObject.auth?.enabled &&
-        webhookSchemas[webhookObject.type].auth(
+        webhookSchemas[webhookObject.type].Auth(
           webhookObject,
-          setWebhookObject,
-          secrets
+          setWebhookObject
         )}
       {}
     </>
diff --git a/src/components/TableModals/WebhooksModal/utils.tsx b/src/components/TableModals/WebhooksModal/utils.tsx
index e43c747b..f8f85ff4 100644
--- a/src/components/TableModals/WebhooksModal/utils.tsx
+++ b/src/components/TableModals/WebhooksModal/utils.tsx
@@ -119,12 +119,6 @@ export interface IWebhook {
   auth?: any;
 }
 
-export interface ISecret {
-  loading: boolean;
-  keys: string[];
-  projectId: string;
-}
-
 export const webhookSchemas = {
   basic,
   typeform,
diff --git a/src/sources/ProjectSourceFirebase/useTableFunctions.ts b/src/sources/ProjectSourceFirebase/useTableFunctions.ts
index cceaca98..a1af1169 100644
--- a/src/sources/ProjectSourceFirebase/useTableFunctions.ts
+++ b/src/sources/ProjectSourceFirebase/useTableFunctions.ts
@@ -22,6 +22,10 @@ import {
   AdditionalTableSettings,
   MinimumTableSettings,
   currentUserAtom,
+  updateSecretNamesAtom,
+  projectIdAtom,
+  rowyRunAtom,
+  secretNamesAtom,
 } from "@src/atoms/projectScope";
 import { firebaseDbAtom } from "./init";
 
@@ -34,10 +38,15 @@ import { rowyUser } from "@src/utils/table";
 import { TableSettings, TableSchema, SubTablesSchema } from "@src/types/table";
 import { FieldType } from "@src/constants/fields";
 import { getFieldProp } from "@src/components/fields";
+import { runRoutes } from "@src/constants/runRoutes";
 
 export function useTableFunctions() {
   const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
   const [currentUser] = useAtom(currentUserAtom, projectScope);
+  const [projectId] = useAtom(projectIdAtom, projectScope);
+  const [rowyRun] = useAtom(rowyRunAtom, projectScope);
+  const [secretNames, setSecretNames] = useAtom(secretNamesAtom, projectScope);
+  const [updateSecretNames] = useAtom(updateSecretNamesAtom, projectScope);
 
   // Create a function to get the latest tables from project settings,
   // so we don’t create new functions when tables change
@@ -330,4 +339,36 @@ export function useTableFunctions() {
       return tableSchema as TableSchema;
     });
   }, [firebaseDb, readTables, setGetTableSchema]);
+
+  // Set the deleteTable function
+  const setUpdateSecretNames = useSetAtom(updateSecretNamesAtom, projectScope);
+  useEffect(() => {
+    if (!projectId || !rowyRun || !secretNamesAtom) return;
+    setUpdateSecretNames(() => async (clearSecretNames?: boolean) => {
+      setSecretNames({
+        loading: true,
+        secretNames: clearSecretNames ? null : secretNames.secretNames,
+      });
+      rowyRun({
+        route: runRoutes.listSecrets,
+      })
+        .then((secrets: string[]) => {
+          setSecretNames({
+            loading: false,
+            secretNames: secrets,
+          });
+        })
+        .catch((e) => {
+          setSecretNames({
+            loading: false,
+            secretNames: clearSecretNames ? null : secretNames.secretNames,
+          });
+        });
+    });
+  }, [projectId, rowyRun, setUpdateSecretNames]);
+  useEffect(() => {
+    if (updateSecretNames) {
+      updateSecretNames(true);
+    }
+  }, [updateSecretNames]);
 }

From da0cf161dfb2c9dd63572ee7d5f06d1ee5b36fd0 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Wed, 12 Apr 2023 17:43:07 +0530
Subject: [PATCH 10/36] worked on array subtable

---
 src/assets/icons/ArraySubTable.tsx            |   9 +
 src/atoms/tableScope/rowActions.test.ts       |  36 +-
 src/atoms/tableScope/rowActions.ts            |  47 ++-
 src/atoms/tableScope/ui.ts                    |   1 +
 .../ColumnModals/FieldsDropdown.tsx           |  23 +-
 src/components/SideDrawer/FieldWrapper.tsx    |  10 +-
 src/components/SideDrawer/MemoizedField.tsx   |   5 +-
 src/components/SideDrawer/SideDrawer.tsx      |  20 +-
 .../SideDrawer/SideDrawerFields.tsx           |  24 +-
 .../Table/ContextMenu/MenuContents.tsx        | 119 +++---
 src/components/Table/EmptyTable.tsx           |  81 ++--
 .../Table/FinalColumn/FinalColumn.tsx         | 119 +++---
 src/components/Table/TableBody.tsx            |   5 +-
 .../Table/TableCell/EditorCellController.tsx  |   1 +
 src/components/Table/TableCell/TableCell.tsx  |   4 +
 .../Table/useKeyboardNavigation.tsx           |   5 +
 src/components/Table/useMenuAction.tsx        |  17 +-
 src/components/TableToolbar/AddRow.tsx        |  86 +++++
 src/components/TableToolbar/TableToolbar.tsx  |  55 ++-
 src/components/fields/Action/index.tsx        |   1 +
 .../fields/ArraySubTable/DisplayCell.tsx      |  46 +++
 .../fields/ArraySubTable/Settings.tsx         |  32 ++
 .../fields/ArraySubTable/SideDrawerField.tsx  |  56 +++
 src/components/fields/ArraySubTable/index.tsx |  36 ++
 src/components/fields/ArraySubTable/utils.ts  |  34 ++
 src/components/fields/CreatedAt/index.tsx     |   1 +
 src/components/fields/CreatedBy/index.tsx     |   1 +
 src/components/fields/Derivative/index.tsx    |   1 +
 src/components/fields/File/EditorCell.tsx     |   9 +-
 .../fields/File/SideDrawerField.tsx           |   8 +-
 src/components/fields/File/useFileUpload.ts   |  19 +-
 src/components/fields/Image/EditorCell.tsx    |  18 +-
 .../fields/Image/SideDrawerField.tsx          |  14 +-
 src/components/fields/SubTable/index.tsx      |   1 +
 src/components/fields/UpdatedAt/index.tsx     |   1 +
 src/components/fields/UpdatedBy/index.tsx     |   1 +
 src/components/fields/index.ts                |   2 +
 src/components/fields/types.ts                |   5 +-
 src/constants/fields.ts                       |   1 +
 src/constants/routes.tsx                      |   2 +
 .../useFirestoreDocAsCollectionWithAtom.ts    | 357 ++++++++++++++++++
 src/pages/Table/ProvidedArraySubTablePage.tsx | 156 ++++++++
 src/pages/Table/TablePage.tsx                 |   9 +-
 .../ArraySubTableSourceFirestore.tsx          | 143 +++++++
 src/types/table.d.ts                          |  29 +-
 src/utils/table.ts                            |   1 +
 46 files changed, 1450 insertions(+), 201 deletions(-)
 create mode 100644 src/assets/icons/ArraySubTable.tsx
 create mode 100644 src/components/fields/ArraySubTable/DisplayCell.tsx
 create mode 100644 src/components/fields/ArraySubTable/Settings.tsx
 create mode 100644 src/components/fields/ArraySubTable/SideDrawerField.tsx
 create mode 100644 src/components/fields/ArraySubTable/index.tsx
 create mode 100644 src/components/fields/ArraySubTable/utils.ts
 create mode 100644 src/hooks/useFirestoreDocAsCollectionWithAtom.ts
 create mode 100644 src/pages/Table/ProvidedArraySubTablePage.tsx
 create mode 100644 src/sources/TableSourceFirestore/ArraySubTableSourceFirestore.tsx

diff --git a/src/assets/icons/ArraySubTable.tsx b/src/assets/icons/ArraySubTable.tsx
new file mode 100644
index 00000000..d7f5a2ad
--- /dev/null
+++ b/src/assets/icons/ArraySubTable.tsx
@@ -0,0 +1,9 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+
+export function ArraySubTable(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M1 4C1 2.34315 2.34315 1 4 1H18C19.6569 1 21 2.34315 21 4V11H19H12V15V17H4C2.34315 17 1 15.6569 1 14V4ZM10 15V11H3V14C3 14.5523 3.44772 15 4 15H10ZM12 9H19V5H12V9ZM10 5H3V9H10V5ZM15 13H14V14V22V23H15H17V21H16V15H17V13H15ZM21 13H22V14V22V23H21H19V21H20V15H19V13H21Z" />
+    </SvgIcon>
+  );
+}
diff --git a/src/atoms/tableScope/rowActions.test.ts b/src/atoms/tableScope/rowActions.test.ts
index fe35d654..5ff521a7 100644
--- a/src/atoms/tableScope/rowActions.test.ts
+++ b/src/atoms/tableScope/rowActions.test.ts
@@ -494,7 +494,11 @@ describe("deleteRow", () => {
     } = renderHook(() => useSetAtom(deleteRowAtom, tableScope));
     expect(deleteRow).toBeDefined();
 
-    await act(() => deleteRow(TEST_COLLECTION + "/row2"));
+    await act(() =>
+      deleteRow({
+        path: TEST_COLLECTION + "/row2",
+      })
+    );
 
     const {
       result: { current: tableRows },
@@ -510,7 +514,11 @@ describe("deleteRow", () => {
     } = renderHook(() => useSetAtom(deleteRowAtom, tableScope));
     expect(deleteRow).toBeDefined();
 
-    await act(() => deleteRow(TEST_COLLECTION + "/rowLocal2"));
+    await act(() =>
+      deleteRow({
+        path: TEST_COLLECTION + "/rowLocal2",
+      })
+    );
 
     const {
       result: { current: tableRows },
@@ -527,9 +535,9 @@ describe("deleteRow", () => {
     expect(deleteRow).toBeDefined();
 
     await act(() =>
-      deleteRow(
-        ["row1", "row2", "row8"].map((id) => TEST_COLLECTION + "/" + id)
-      )
+      deleteRow({
+        path: ["row1", "row2", "row8"].map((id) => TEST_COLLECTION + "/" + id),
+      })
     );
 
     const {
@@ -548,7 +556,11 @@ describe("deleteRow", () => {
     } = renderHook(() => useSetAtom(deleteRowAtom, tableScope));
     expect(deleteRow).toBeDefined();
 
-    await act(() => deleteRow(generatedRows.map((row) => row._rowy_ref.path)));
+    await act(() =>
+      deleteRow({
+        path: generatedRows.map((row) => row._rowy_ref.path),
+      })
+    );
 
     const {
       result: { current: tableRows },
@@ -563,7 +575,11 @@ describe("deleteRow", () => {
     } = renderHook(() => useSetAtom(deleteRowAtom, tableScope));
     expect(deleteRow).toBeDefined();
 
-    await act(() => deleteRow("nonExistent"));
+    await act(() =>
+      deleteRow({
+        path: "nonExistent",
+      })
+    );
 
     const {
       result: { current: tableRows },
@@ -578,7 +594,11 @@ describe("deleteRow", () => {
     } = renderHook(() => useSetAtom(deleteRowAtom, tableScope));
     expect(deleteRow).toBeDefined();
 
-    await act(() => deleteRow("nonExistent"));
+    await act(() =>
+      deleteRow({
+        path: "nonExistent",
+      })
+    );
 
     const {
       result: { current: tableRows },
diff --git a/src/atoms/tableScope/rowActions.ts b/src/atoms/tableScope/rowActions.ts
index 75b496f5..8a885d80 100644
--- a/src/atoms/tableScope/rowActions.ts
+++ b/src/atoms/tableScope/rowActions.ts
@@ -22,7 +22,11 @@ import {
   _bulkWriteDbAtom,
 } from "./table";
 
-import { TableRow, BulkWriteFunction } from "@src/types/table";
+import {
+  TableRow,
+  BulkWriteFunction,
+  ArrayTableRowData,
+} from "@src/types/table";
 import {
   rowyUser,
   generateId,
@@ -211,7 +215,17 @@ export const addRowAtom = atom(
  */
 export const deleteRowAtom = atom(
   null,
-  async (get, set, path: string | string[]) => {
+  async (
+    get,
+    set,
+    {
+      path,
+      options,
+    }: {
+      path: string | string[];
+      options?: ArrayTableRowData;
+    }
+  ) => {
     const deleteRowDb = get(_deleteRowDbAtom);
     if (!deleteRowDb) throw new Error("Cannot write to database");
 
@@ -223,9 +237,9 @@ export const deleteRowAtom = atom(
         find(tableRowsLocal, ["_rowy_ref.path", path])
       );
       if (isLocalRow) set(tableRowsLocalAtom, { type: "delete", path });
-
       // Always delete from db in case it exists
-      await deleteRowDb(path);
+      // *options* are passed in case of array table to target specific row
+      await deleteRowDb(path, options);
       if (auditChange) auditChange("DELETE_ROW", path);
     };
 
@@ -312,6 +326,8 @@ export interface IUpdateFieldOptions {
   useArrayUnion?: boolean;
   /** Optionally, uses firestore's arrayRemove with the given value. Removes given value items from the existing array */
   useArrayRemove?: boolean;
+  /** Optionally, used to locate the row in ArraySubTable. */
+  arrayTableData?: ArrayTableRowData;
 }
 /**
  * Set function updates or deletes a field in a row.
@@ -339,6 +355,7 @@ export const updateFieldAtom = atom(
       disableCheckEquality,
       useArrayUnion,
       useArrayRemove,
+      arrayTableData,
     }: IUpdateFieldOptions
   ) => {
     const updateRowDb = get(_updateRowDbAtom);
@@ -387,7 +404,12 @@ export const updateFieldAtom = atom(
         ...(row[fieldName] ?? []),
         ...localUpdate[fieldName],
       ];
-      dbUpdate[fieldName] = arrayUnion(...dbUpdate[fieldName]);
+      // if we are updating a row of ArraySubTable
+      if (arrayTableData?.index !== undefined) {
+        dbUpdate[fieldName] = localUpdate[fieldName];
+      } else {
+        dbUpdate[fieldName] = arrayUnion(...dbUpdate[fieldName]);
+      }
     }
 
     //apply arrayRemove
@@ -400,8 +422,15 @@ export const updateFieldAtom = atom(
         row[fieldName] ?? [],
         (el) => !find(localUpdate[fieldName], el)
       );
-      dbUpdate[fieldName] = arrayRemove(...dbUpdate[fieldName]);
+
+      // if we are updating a row of ArraySubTable
+      if (arrayTableData?.index !== undefined) {
+        dbUpdate[fieldName] = localUpdate[fieldName];
+      } else {
+        dbUpdate[fieldName] = arrayRemove(...dbUpdate[fieldName]);
+      }
     }
+    // need to pass the index of the row to updateRowDb
 
     // Check for required fields
     const newRowValues = updateRowData(cloneDeep(row), dbUpdate);
@@ -431,7 +460,8 @@ export const updateFieldAtom = atom(
         await updateRowDb(
           row._rowy_ref.path,
           omitRowyFields(newRowValues),
-          deleteField ? [fieldName] : []
+          deleteField ? [fieldName] : [],
+          arrayTableData
         );
       }
     }
@@ -440,7 +470,8 @@ export const updateFieldAtom = atom(
       await updateRowDb(
         row._rowy_ref.path,
         omitRowyFields(dbUpdate),
-        deleteField ? [fieldName] : []
+        deleteField ? [fieldName] : [],
+        arrayTableData
       );
     }
 
diff --git a/src/atoms/tableScope/ui.ts b/src/atoms/tableScope/ui.ts
index 7182a41d..b170d250 100644
--- a/src/atoms/tableScope/ui.ts
+++ b/src/atoms/tableScope/ui.ts
@@ -134,6 +134,7 @@ export type SelectedCell = {
   path: string | "_rowy_header";
   columnKey: string | "_rowy_row_actions";
   focusInside: boolean;
+  arrayIndex?: number; // for array sub table
 };
 /** Store selected cell in table. Used in side drawer and context menu */
 export const selectedCellAtom = atom<SelectedCell | null>(null);
diff --git a/src/components/ColumnModals/FieldsDropdown.tsx b/src/components/ColumnModals/FieldsDropdown.tsx
index 529c3b84..2b2497e8 100644
--- a/src/components/ColumnModals/FieldsDropdown.tsx
+++ b/src/components/ColumnModals/FieldsDropdown.tsx
@@ -11,6 +11,7 @@ import {
   projectSettingsAtom,
   rowyRunModalAtom,
 } from "@src/atoms/projectScope";
+import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope";
 
 export interface IFieldsDropdownProps {
   value: FieldType | "";
@@ -35,17 +36,22 @@ export default function FieldsDropdown({
 }: IFieldsDropdownProps) {
   const [projectSettings] = useAtom(projectSettingsAtom, projectScope);
   const openRowyRunModal = useSetAtom(rowyRunModalAtom, projectScope);
+  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const fieldTypesToDisplay = optionsProp
     ? FIELDS.filter((fieldConfig) => optionsProp.indexOf(fieldConfig.type) > -1)
     : FIELDS;
   const options = fieldTypesToDisplay.map((fieldConfig) => {
     const requireCloudFunctionSetup =
       fieldConfig.requireCloudFunction && !projectSettings.rowyRunUrl;
+    const requireCollectionTable =
+      tableSettings.isNotACollection === true &&
+      fieldConfig.requireCollectionTable === true;
     return {
       label: fieldConfig.name,
       value: fieldConfig.type,
-      disabled: requireCloudFunctionSetup,
+      disabled: requireCloudFunctionSetup || requireCollectionTable,
       requireCloudFunctionSetup,
+      requireCollectionTable,
     };
   });
 
@@ -82,7 +88,18 @@ export default function FieldsDropdown({
             {getFieldProp("icon", option.value as FieldType)}
           </ListItemIcon>
           <Typography>{option.label}</Typography>
-          {option.requireCloudFunctionSetup && (
+          {option.requireCollectionTable ? (
+            <Typography
+              color="error"
+              variant="inherit"
+              component="span"
+              marginLeft={1}
+              className={"require-cloud-function"}
+            >
+              {" "}
+              Unavailable
+            </Typography>
+          ) : option.requireCloudFunctionSetup ? (
             <Typography
               color="error"
               variant="inherit"
@@ -107,7 +124,7 @@ export default function FieldsDropdown({
                 Cloud Function
               </span>
             </Typography>
-          )}
+          ) : null}
         </>
       )}
       label={label || "Field type"}
diff --git a/src/components/SideDrawer/FieldWrapper.tsx b/src/components/SideDrawer/FieldWrapper.tsx
index c6a352cd..eb76afa8 100644
--- a/src/components/SideDrawer/FieldWrapper.tsx
+++ b/src/components/SideDrawer/FieldWrapper.tsx
@@ -35,6 +35,7 @@ export interface IFieldWrapperProps {
   fieldName?: string;
   label?: React.ReactNode;
   debugText?: React.ReactNode;
+  debugValue?: React.ReactNode;
   disabled?: boolean;
   hidden?: boolean;
   index?: number;
@@ -46,6 +47,7 @@ export default function FieldWrapper({
   fieldName,
   label,
   debugText,
+  debugValue,
   disabled,
   hidden,
   index,
@@ -100,7 +102,7 @@ export default function FieldWrapper({
       <ErrorBoundary FallbackComponent={InlineErrorFallback}>
         <Suspense fallback={<FieldSkeleton />}>
           {children ??
-            (!debugText && (
+            (!debugValue && (
               <Typography
                 variant="body2"
                 color="text.secondary"
@@ -112,7 +114,7 @@ export default function FieldWrapper({
         </Suspense>
       </ErrorBoundary>
 
-      {debugText && (
+      {debugValue && (
         <Stack direction="row" alignItems="center">
           <Typography
             variant="body2"
@@ -131,7 +133,7 @@ export default function FieldWrapper({
           </Typography>
           <IconButton
             onClick={() => {
-              copyToClipboard(debugText as string);
+              copyToClipboard(debugValue as string);
               enqueueSnackbar("Copied!");
             }}
           >
@@ -139,7 +141,7 @@ export default function FieldWrapper({
           </IconButton>
           <IconButton
             href={`https://console.firebase.google.com/project/${projectId}/firestore/data/~2F${(
-              debugText as string
+              debugValue as string
             ).replace(/\//g, "~2F")}`}
             target="_blank"
             rel="noopener"
diff --git a/src/components/SideDrawer/MemoizedField.tsx b/src/components/SideDrawer/MemoizedField.tsx
index 0fb62f62..8f7b7766 100644
--- a/src/components/SideDrawer/MemoizedField.tsx
+++ b/src/components/SideDrawer/MemoizedField.tsx
@@ -5,7 +5,7 @@ import { isEqual, isEmpty } from "lodash-es";
 import FieldWrapper from "./FieldWrapper";
 import { IFieldConfig } from "@src/components/fields/types";
 import { getFieldProp } from "@src/components/fields";
-import { ColumnConfig, TableRowRef } from "@src/types/table";
+import { ArrayTableRowData, ColumnConfig, TableRowRef } from "@src/types/table";
 
 export interface IMemoizedFieldProps {
   field: ColumnConfig;
@@ -13,6 +13,7 @@ export interface IMemoizedFieldProps {
   hidden: boolean;
   value: any;
   _rowy_ref: TableRowRef;
+  _rowy_arrayTableData?: ArrayTableRowData;
   isDirty: boolean;
   onDirty: (fieldName: string) => void;
   onSubmit: (fieldName: string, value: any) => void;
@@ -25,6 +26,7 @@ export const MemoizedField = memo(
     hidden,
     value,
     _rowy_ref,
+    _rowy_arrayTableData,
     isDirty,
     onDirty,
     onSubmit,
@@ -78,6 +80,7 @@ export const MemoizedField = memo(
           },
           onSubmit: handleSubmit,
           disabled,
+          _rowy_arrayTableData,
         })}
       </FieldWrapper>
     );
diff --git a/src/components/SideDrawer/SideDrawer.tsx b/src/components/SideDrawer/SideDrawer.tsx
index ef676bd1..faeb15ad 100644
--- a/src/components/SideDrawer/SideDrawer.tsx
+++ b/src/components/SideDrawer/SideDrawer.tsx
@@ -30,11 +30,21 @@ export default function SideDrawer() {
 
   const [cell, setCell] = useAtom(selectedCellAtom, tableScope);
   const [open, setOpen] = useAtom(sideDrawerOpenAtom, tableScope);
-  const selectedRow = find(tableRows, ["_rowy_ref.path", cell?.path]);
-  const selectedCellRowIndex = findIndex(tableRows, [
-    "_rowy_ref.path",
-    cell?.path,
-  ]);
+  const selectedRow = find(
+    tableRows,
+    cell?.arrayIndex === undefined
+      ? ["_rowy_ref.path", cell?.path]
+      : // if the table is an array table, we need to use the array index to find the row
+        ["_rowy_arrayTableData.index", cell?.arrayIndex]
+  );
+
+  const selectedCellRowIndex = findIndex(
+    tableRows,
+    cell?.arrayIndex === undefined
+      ? ["_rowy_ref.path", cell?.path]
+      : // if the table is an array table, we need to use the array index to find the row
+        ["_rowy_arrayTableData.index", cell?.arrayIndex]
+  );
 
   const handleNavigate = (direction: "up" | "down") => () => {
     if (!tableRows || !cell) return;
diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index 7b6a6578..e2abdfa4 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -66,7 +66,16 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
 
       setSaveState("saving");
       try {
-        await updateField({ path: selectedCell!.path, fieldName, value });
+        await updateField({
+          path: selectedCell!.path,
+          fieldName,
+          value,
+          deleteField: undefined,
+          arrayTableData: {
+            index: selectedCell.arrayIndex ?? 0,
+          },
+        });
+
         setSaveState("saved");
       } catch (e) {
         enqueueSnackbar((e as Error).message, { variant: "error" });
@@ -121,6 +130,7 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
           onDirty={onDirty}
           onSubmit={onSubmit}
           isDirty={dirtyField === field.key}
+          _rowy_arrayTableData={row._rowy_arrayTableData}
         />
       ))}
 
@@ -128,7 +138,17 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
         type="debug"
         fieldName="_rowy_ref.path"
         label="Document path"
-        debugText={row._rowy_ref.path ?? row._rowy_ref.id ?? "No ref"}
+        debugText={
+          row._rowy_arrayTableData
+            ? row._rowy_ref.path +
+              " → " +
+              row._rowy_arrayTableData.parentField +
+              "[" +
+              row._rowy_arrayTableData.index +
+              "]"
+            : row._rowy_ref.path
+        }
+        debugValue={row._rowy_ref.path ?? row._rowy_ref.id ?? "No ref"}
       />
 
       {userDocHiddenFields.length > 0 && (
diff --git a/src/components/Table/ContextMenu/MenuContents.tsx b/src/components/Table/ContextMenu/MenuContents.tsx
index 88a973c2..5154ba8b 100644
--- a/src/components/Table/ContextMenu/MenuContents.tsx
+++ b/src/components/Table/ContextMenu/MenuContents.tsx
@@ -34,6 +34,7 @@ import {
   deleteRowAtom,
   updateFieldAtom,
   tableFiltersPopoverAtom,
+  _updateRowDbAtom,
 } from "@src/atoms/tableScope";
 import { FieldType } from "@src/constants/fields";
 
@@ -54,6 +55,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
   const addRow = useSetAtom(addRowAtom, tableScope);
   const deleteRow = useSetAtom(deleteRowAtom, tableScope);
   const updateField = useSetAtom(updateFieldAtom, tableScope);
+  const [updateRowDb] = useAtom(_updateRowDbAtom, tableScope);
   const openTableFiltersPopover = useSetAtom(
     tableFiltersPopoverAtom,
     tableScope
@@ -62,19 +64,83 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
   if (!tableSchema.columns || !selectedCell) return null;
 
   const selectedColumn = tableSchema.columns[selectedCell.columnKey];
-  const row = find(tableRows, ["_rowy_ref.path", selectedCell.path]);
+  const row = find(
+    tableRows,
+    selectedCell?.arrayIndex === undefined
+      ? ["_rowy_ref.path", selectedCell.path]
+      : // if the table is an array table, we need to use the array index to find the row
+        ["_rowy_arrayTableData.index", selectedCell.arrayIndex]
+  );
 
   if (!row) return null;
 
   const actionGroups: IContextMenuItem[][] = [];
 
   const handleDuplicate = () => {
-    addRow({
-      row,
-      setId: addRowIdType === "custom" ? "decrement" : addRowIdType,
-    });
+    const _duplicate = () => {
+      if (row._rowy_arrayTableData !== undefined) {
+        if (!updateRowDb) return;
+
+        return updateRowDb("", {}, undefined, {
+          index: row._rowy_arrayTableData.index,
+          operation: {
+            addRow: "bottom",
+            base: row,
+          },
+        });
+      }
+      return addRow({
+        row: row,
+        setId: addRowIdType === "custom" ? "decrement" : addRowIdType,
+      });
+    };
+
+    if (altPress || row._rowy_arrayTableData !== undefined) {
+      _duplicate();
+    } else {
+      confirm({
+        title: "Duplicate row?",
+        body: (
+          <>
+            Row path:
+            <br />
+            <code style={{ userSelect: "all", wordBreak: "break-all" }}>
+              {row._rowy_ref.path}
+            </code>
+          </>
+        ),
+        confirm: "Duplicate",
+        handleConfirm: _duplicate,
+      });
+    }
+  };
+  const handleDelete = () => {
+    const _delete = () =>
+      deleteRow({
+        path: row._rowy_ref.path,
+        options: row._rowy_arrayTableData,
+      });
+
+    if (altPress || row._rowy_arrayTableData !== undefined) {
+      _delete();
+    } else {
+      confirm({
+        title: "Delete row?",
+        body: (
+          <>
+            Row path:
+            <br />
+            <code style={{ userSelect: "all", wordBreak: "break-all" }}>
+              {row._rowy_ref.path}
+            </code>
+          </>
+        ),
+        confirm: "Delete",
+        confirmColor: "error",
+        handleConfirm: _delete,
+      });
+    }
   };
-  const handleDelete = () => deleteRow(row._rowy_ref.path);
   const rowActions: IContextMenuItem[] = [
     {
       label: "Copy ID",
@@ -112,51 +178,14 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
       disabled:
         tableSettings.tableType === "collectionGroup" ||
         (!userRoles.includes("ADMIN") && tableSettings.readOnly),
-      onClick: altPress
-        ? handleDuplicate
-        : () => {
-            confirm({
-              title: "Duplicate row?",
-              body: (
-                <>
-                  Row path:
-                  <br />
-                  <code style={{ userSelect: "all", wordBreak: "break-all" }}>
-                    {row._rowy_ref.path}
-                  </code>
-                </>
-              ),
-              confirm: "Duplicate",
-              handleConfirm: handleDuplicate,
-            });
-            onClose();
-          },
+      onClick: handleDuplicate,
     },
     {
       label: altPress ? "Delete" : "Delete…",
       color: "error",
       icon: <DeleteIcon />,
       disabled: !userRoles.includes("ADMIN") && tableSettings.readOnly,
-      onClick: altPress
-        ? handleDelete
-        : () => {
-            confirm({
-              title: "Delete row?",
-              body: (
-                <>
-                  Row path:
-                  <br />
-                  <code style={{ userSelect: "all", wordBreak: "break-all" }}>
-                    {row._rowy_ref.path}
-                  </code>
-                </>
-              ),
-              confirm: "Delete",
-              confirmColor: "error",
-              handleConfirm: handleDelete,
-            });
-            onClose();
-          },
+      onClick: handleDelete,
     },
   ];
 
diff --git a/src/components/Table/EmptyTable.tsx b/src/components/Table/EmptyTable.tsx
index f07839b3..1f14e2db 100644
--- a/src/components/Table/EmptyTable.tsx
+++ b/src/components/Table/EmptyTable.tsx
@@ -34,7 +34,7 @@ export default function EmptyTable() {
       : false;
   let contents = <></>;
 
-  if (hasData) {
+  if (!tableSettings.isNotACollection && hasData) {
     contents = (
       <>
         <div>
@@ -72,47 +72,56 @@ export default function EmptyTable() {
             Get started
           </Typography>
           <Typography>
-            There is no data in the Firestore collection:
+            {tableSettings.isNotACollection === true
+              ? "There is no data in this Array Sub Table:"
+              : "There is no data in the Firestore collection:"}
             <br />
-            <code>{tableSettings.collection}</code>
+            <code>
+              {tableSettings.collection}
+              {tableSettings.subTableKey?.length &&
+                `.${tableSettings.subTableKey}`}
+            </code>
           </Typography>
         </div>
-
         <Grid container spacing={1}>
-          <Grid item xs>
-            <Typography paragraph>
-              You can import data from an external source:
-            </Typography>
+          {!tableSettings.isNotACollection && (
+            <>
+              <Grid item xs>
+                <Typography paragraph>
+                  You can import data from an external source:
+                </Typography>
 
-            <ImportData
-              render={(onClick) => (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  startIcon={<ImportIcon />}
-                  onClick={onClick}
-                >
-                  Import data
-                </Button>
-              )}
-              PopoverProps={{
-                anchorOrigin: {
-                  vertical: "bottom",
-                  horizontal: "center",
-                },
-                transformOrigin: {
-                  vertical: "top",
-                  horizontal: "center",
-                },
-              }}
-            />
-          </Grid>
+                <ImportData
+                  render={(onClick) => (
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      startIcon={<ImportIcon />}
+                      onClick={onClick}
+                    >
+                      Import data
+                    </Button>
+                  )}
+                  PopoverProps={{
+                    anchorOrigin: {
+                      vertical: "bottom",
+                      horizontal: "center",
+                    },
+                    transformOrigin: {
+                      vertical: "top",
+                      horizontal: "center",
+                    },
+                  }}
+                />
+              </Grid>
 
-          <Grid item>
-            <Divider orientation="vertical">
-              <Typography variant="overline">or</Typography>
-            </Divider>
-          </Grid>
+              <Grid item>
+                <Divider orientation="vertical">
+                  <Typography variant="overline">or</Typography>
+                </Divider>
+              </Grid>
+            </>
+          )}
 
           <Grid item xs>
             <Typography paragraph>
diff --git a/src/components/Table/FinalColumn/FinalColumn.tsx b/src/components/Table/FinalColumn/FinalColumn.tsx
index 28b584e6..041d3f0f 100644
--- a/src/components/Table/FinalColumn/FinalColumn.tsx
+++ b/src/components/Table/FinalColumn/FinalColumn.tsx
@@ -20,8 +20,8 @@ import {
   addRowAtom,
   deleteRowAtom,
   contextMenuTargetAtom,
+  _updateRowDbAtom,
 } from "@src/atoms/tableScope";
-
 export const FinalColumn = memo(function FinalColumn({
   row,
   focusInsideCell,
@@ -31,17 +31,77 @@ export const FinalColumn = memo(function FinalColumn({
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const [updateRowDb] = useAtom(_updateRowDbAtom, tableScope);
+
   const addRow = useSetAtom(addRowAtom, tableScope);
   const deleteRow = useSetAtom(deleteRowAtom, tableScope);
   const setContextMenuTarget = useSetAtom(contextMenuTargetAtom, tableScope);
 
   const [altPress] = useAtom(altPressAtom, projectScope);
-  const handleDelete = () => deleteRow(row.original._rowy_ref.path);
+
+  const handleDelete = () => {
+    const _delete = () =>
+      deleteRow({
+        path: row.original._rowy_ref.path,
+        options: row.original._rowy_arrayTableData,
+      });
+    if (altPress || row.original._rowy_arrayTableData !== undefined) {
+      _delete();
+    } else {
+      confirm({
+        title: "Delete row?",
+        body: (
+          <>
+            Row path:
+            <br />
+            <code style={{ userSelect: "all", wordBreak: "break-all" }}>
+              {row.original._rowy_ref.path}
+            </code>
+          </>
+        ),
+        confirm: "Delete",
+        confirmColor: "error",
+        handleConfirm: _delete,
+      });
+    }
+  };
+
   const handleDuplicate = () => {
-    addRow({
-      row: row.original,
-      setId: addRowIdType === "custom" ? "decrement" : addRowIdType,
-    });
+    const _duplicate = () => {
+      if (row.original._rowy_arrayTableData !== undefined) {
+        if (!updateRowDb) return;
+
+        return updateRowDb("", {}, undefined, {
+          index: row.original._rowy_arrayTableData.index,
+          operation: {
+            addRow: "bottom",
+            base: row.original,
+          },
+        });
+      }
+      return addRow({
+        row: row.original,
+        setId: addRowIdType === "custom" ? "decrement" : addRowIdType,
+      });
+    };
+    if (altPress || row.original._rowy_arrayTableData !== undefined) {
+      _duplicate();
+    } else {
+      confirm({
+        title: "Duplicate row?",
+        body: (
+          <>
+            Row path:
+            <br />
+            <code style={{ userSelect: "all", wordBreak: "break-all" }}>
+              {row.original._rowy_ref.path}
+            </code>
+          </>
+        ),
+        confirm: "Duplicate",
+        handleConfirm: _duplicate,
+      });
+    }
   };
 
   if (!userRoles.includes("ADMIN") && tableSettings.readOnly === true)
@@ -73,28 +133,7 @@ export const FinalColumn = memo(function FinalColumn({
           size="small"
           color="inherit"
           disabled={tableSettings.tableType === "collectionGroup"}
-          onClick={
-            altPress
-              ? handleDuplicate
-              : () => {
-                  confirm({
-                    title: "Duplicate row?",
-                    body: (
-                      <>
-                        Row path:
-                        <br />
-                        <code
-                          style={{ userSelect: "all", wordBreak: "break-all" }}
-                        >
-                          {row.original._rowy_ref.path}
-                        </code>
-                      </>
-                    ),
-                    confirm: "Duplicate",
-                    handleConfirm: handleDuplicate,
-                  });
-                }
-          }
+          onClick={handleDuplicate}
           className="row-hover-iconButton"
           tabIndex={focusInsideCell ? 0 : -1}
         >
@@ -106,29 +145,7 @@ export const FinalColumn = memo(function FinalColumn({
         <IconButton
           size="small"
           color="inherit"
-          onClick={
-            altPress
-              ? handleDelete
-              : () => {
-                  confirm({
-                    title: "Delete row?",
-                    body: (
-                      <>
-                        Row path:
-                        <br />
-                        <code
-                          style={{ userSelect: "all", wordBreak: "break-all" }}
-                        >
-                          {row.original._rowy_ref.path}
-                        </code>
-                      </>
-                    ),
-                    confirm: "Delete",
-                    confirmColor: "error",
-                    handleConfirm: handleDelete,
-                  });
-                }
-          }
+          onClick={handleDelete}
           className="row-hover-iconButton"
           tabIndex={focusInsideCell ? 0 : -1}
           sx={{
diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index 8dd53d73..edaed491 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -102,7 +102,10 @@ export const TableBody = memo(function TableBody({
 
               const isSelectedCell =
                 selectedCell?.path === row.original._rowy_ref.path &&
-                selectedCell?.columnKey === cell.column.id;
+                selectedCell?.columnKey === cell.column.id &&
+                // if the table is an array sub table, we need to check the array index as well
+                selectedCell?.arrayIndex ===
+                  row.original._rowy_arrayTableData?.index;
 
               const fieldTypeGroup = getFieldProp(
                 "group",
diff --git a/src/components/Table/TableCell/EditorCellController.tsx b/src/components/Table/TableCell/EditorCellController.tsx
index c80380d4..cacc8946 100644
--- a/src/components/Table/TableCell/EditorCellController.tsx
+++ b/src/components/Table/TableCell/EditorCellController.tsx
@@ -66,6 +66,7 @@ export default function EditorCellController({
         fieldName: props.column.fieldName,
         value: localValueRef.current,
         deleteField: localValueRef.current === undefined,
+        arrayTableData: props.row?._rowy_arrayTableData,
       });
     } catch (e) {
       enqueueSnackbar((e as Error).message, { variant: "error" });
diff --git a/src/components/Table/TableCell/TableCell.tsx b/src/components/Table/TableCell/TableCell.tsx
index 4ea51433..5c664b35 100644
--- a/src/components/Table/TableCell/TableCell.tsx
+++ b/src/components/Table/TableCell/TableCell.tsx
@@ -123,6 +123,7 @@ export const TableCell = memo(function TableCell({
     focusInsideCell,
     setFocusInsideCell: (focusInside: boolean) =>
       setSelectedCell({
+        arrayIndex: row.original._rowy_arrayTableData?.index,
         path: row.original._rowy_ref.path,
         columnKey: cell.column.id,
         focusInside,
@@ -166,6 +167,7 @@ export const TableCell = memo(function TableCell({
       }}
       onClick={(e) => {
         setSelectedCell({
+          arrayIndex: row.original._rowy_arrayTableData?.index,
           path: row.original._rowy_ref.path,
           columnKey: cell.column.id,
           focusInside: false,
@@ -174,6 +176,7 @@ export const TableCell = memo(function TableCell({
       }}
       onDoubleClick={(e) => {
         setSelectedCell({
+          arrayIndex: row.original._rowy_arrayTableData?.index,
           path: row.original._rowy_ref.path,
           columnKey: cell.column.id,
           focusInside: true,
@@ -183,6 +186,7 @@ export const TableCell = memo(function TableCell({
       onContextMenu={(e) => {
         e.preventDefault();
         setSelectedCell({
+          arrayIndex: row.original._rowy_arrayTableData?.index,
           path: row.original._rowy_ref.path,
           columnKey: cell.column.id,
           focusInside: false,
diff --git a/src/components/Table/useKeyboardNavigation.tsx b/src/components/Table/useKeyboardNavigation.tsx
index 3353d23f..81141a77 100644
--- a/src/components/Table/useKeyboardNavigation.tsx
+++ b/src/components/Table/useKeyboardNavigation.tsx
@@ -128,6 +128,11 @@ export function useKeyboardNavigation({
             ? tableRows[newRowIndex]._rowy_ref.path
             : "_rowy_header",
         columnKey: leafColumns[newColIndex].id! || leafColumns[0].id!,
+        arrayIndex:
+          newRowIndex > -1
+            ? tableRows[newRowIndex]._rowy_arrayTableData?.index
+            : undefined,
+
         // When selected cell changes, exit current cell
         focusInside: false,
       };
diff --git a/src/components/Table/useMenuAction.tsx b/src/components/Table/useMenuAction.tsx
index 516124d3..49cdc2d8 100644
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -71,6 +71,9 @@ export function useMenuAction(
           fieldName: selectedCol.fieldName,
           value: undefined,
           deleteField: true,
+          arrayTableData: {
+            index: selectedCell.arrayIndex ?? 0,
+          },
         });
     } catch (error) {
       enqueueSnackbar(`Failed to cut: ${error}`, { variant: "error" });
@@ -115,6 +118,9 @@ export function useMenuAction(
         path: selectedCell.path,
         fieldName: selectedCol.fieldName,
         value: parsed,
+        arrayTableData: {
+          index: selectedCell.arrayIndex ?? 0,
+        },
       });
     } catch (error) {
       enqueueSnackbar(
@@ -130,7 +136,14 @@ export function useMenuAction(
     const selectedCol = tableSchema.columns?.[selectedCell.columnKey];
     if (!selectedCol) return setCellValue("");
     setSelectedCol(selectedCol);
-    const selectedRow = find(tableRows, ["_rowy_ref.path", selectedCell.path]);
+
+    const selectedRow = find(
+      tableRows,
+      selectedCell.arrayIndex === undefined
+        ? ["_rowy_ref.path", selectedCell.path]
+        : // if the table is an array table, we need to use the array index to find the row
+          ["_rowy_arrayTableData.index", selectedCell.arrayIndex]
+    );
     setCellValue(get(selectedRow, selectedCol.fieldName));
   }, [selectedCell, tableSchema, tableRows]);
 
@@ -149,7 +162,7 @@ export function useMenuAction(
         }
       };
     },
-    [selectedCol]
+    [enqueueSnackbar, selectedCol?.type]
   );
 
   return {
diff --git a/src/components/TableToolbar/AddRow.tsx b/src/components/TableToolbar/AddRow.tsx
index c6372865..13e24cd5 100644
--- a/src/components/TableToolbar/AddRow.tsx
+++ b/src/components/TableToolbar/AddRow.tsx
@@ -27,6 +27,7 @@ import {
   tableFiltersAtom,
   tableSortsAtom,
   addRowAtom,
+  _updateRowDbAtom,
 } from "@src/atoms/tableScope";
 
 export default function AddRow() {
@@ -207,3 +208,88 @@ export default function AddRow() {
     </>
   );
 }
+
+export function AddRowArraySubTable() {
+  const [updateRowDb] = useAtom(_updateRowDbAtom, tableScope);
+  const [open, setOpen] = useState(false);
+
+  const anchorEl = useRef<HTMLDivElement>(null);
+  const [addRowAt, setAddNewRowAt] = useState<"top" | "bottom">("bottom");
+  if (!updateRowDb) return null;
+
+  const handleClick = () => {
+    updateRowDb("", {}, undefined, {
+      index: 0,
+      operation: {
+        addRow: addRowAt,
+      },
+    });
+  };
+  return (
+    <>
+      <ButtonGroup
+        variant="contained"
+        color="primary"
+        aria-label="Split button"
+        ref={anchorEl}
+      >
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleClick}
+          startIcon={addRowAt === "top" ? <AddRowTopIcon /> : <AddRowIcon />}
+        >
+          Add row to {addRowAt}
+        </Button>
+
+        <Button
+          variant="contained"
+          color="primary"
+          aria-label="Select row add position"
+          aria-haspopup="menu"
+          style={{ padding: 0 }}
+          onClick={() => setOpen(true)}
+          id="add-row-menu-button"
+          aria-controls={open ? "add-row-menu" : undefined}
+          aria-expanded={open ? "true" : "false"}
+        >
+          <ArrowDropDownIcon />
+        </Button>
+      </ButtonGroup>
+
+      <Select
+        id="add-row-menu"
+        open={open}
+        onClose={() => setOpen(false)}
+        label="Row add position"
+        style={{ display: "none" }}
+        value={addRowAt}
+        onChange={(e) => setAddNewRowAt(e.target.value as typeof addRowAt)}
+        MenuProps={{
+          anchorEl: anchorEl.current,
+          MenuListProps: { "aria-labelledby": "add-row-menu-button" },
+          anchorOrigin: { horizontal: "left", vertical: "bottom" },
+          transformOrigin: { horizontal: "left", vertical: "top" },
+        }}
+      >
+        <MenuItem value="top">
+          <ListItemText
+            primary="To top"
+            secondary="Adds a new row to the top of this table"
+            secondaryTypographyProps={{ variant: "caption" }}
+          />
+        </MenuItem>
+        <MenuItem value="bottom">
+          <ListItemText
+            primary="To bottom"
+            secondary={"Adds a new row to the bottom of this table"}
+            secondaryTypographyProps={{
+              variant: "caption",
+              whiteSpace: "pre-line",
+            }}
+          />
+        </MenuItem>
+      </Select>
+    </>
+  );
+}
diff --git a/src/components/TableToolbar/TableToolbar.tsx b/src/components/TableToolbar/TableToolbar.tsx
index 7af0f6b9..d7d21fbe 100644
--- a/src/components/TableToolbar/TableToolbar.tsx
+++ b/src/components/TableToolbar/TableToolbar.tsx
@@ -1,17 +1,19 @@
 import { lazy, Suspense } from "react";
 import { useAtom, useSetAtom } from "jotai";
 
-import { Stack } from "@mui/material";
+import { Button, Stack } from "@mui/material";
 import WebhookIcon from "@mui/icons-material/Webhook";
 import {
   Export as ExportIcon,
   Extension as ExtensionIcon,
   CloudLogs as CloudLogsIcon,
+  Import as ImportIcon,
 } from "@src/assets/icons";
+
 import TableToolbarButton from "./TableToolbarButton";
 import { ButtonSkeleton } from "./TableToolbarSkeleton";
 
-import AddRow from "./AddRow";
+import AddRow, { AddRowArraySubTable } from "./AddRow";
 import LoadedRowsStatus from "./LoadedRowsStatus";
 import TableSettings from "./TableSettings";
 import HiddenFields from "./HiddenFields";
@@ -32,6 +34,8 @@ import {
   tableModalAtom,
 } from "@src/atoms/tableScope";
 import { FieldType } from "@src/constants/fields";
+import { TableToolsType } from "@src/types/table";
+import FilterIcon from "@mui/icons-material/FilterList";
 
 // prettier-ignore
 const Filters = lazy(() => import("./Filters" /* webpackChunkName: "Filters" */));
@@ -43,7 +47,11 @@ const ReExecute = lazy(() => import("./ReExecute" /* webpackChunkName: "ReExecut
 
 export const TABLE_TOOLBAR_HEIGHT = 44;
 
-export default function TableToolbar() {
+export default function TableToolbar({
+  disabledTools,
+}: {
+  disabledTools?: TableToolsType[];
+}) {
   const [projectSettings] = useAtom(projectSettingsAtom, projectScope);
   const [userRoles] = useAtom(userRolesAtom, projectScope);
   const [compatibleRowyRunVersion] = useAtom(
@@ -54,7 +62,6 @@ export default function TableToolbar() {
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const openTableModal = useSetAtom(tableModalAtom, tableScope);
-
   const hasDerivatives =
     Object.values(tableSchema.columns ?? {}).filter(
       (column) => column.type === FieldType.derivative
@@ -64,6 +71,7 @@ export default function TableToolbar() {
     tableSchema.compiledExtension &&
     tableSchema.compiledExtension.replace(/\W/g, "")?.length > 0;
 
+  disabledTools = disabledTools ?? [];
   return (
     <Stack
       direction="row"
@@ -87,27 +95,47 @@ export default function TableToolbar() {
         },
       }}
     >
-      <AddRow />
+      {tableSettings.isNotACollection ? <AddRowArraySubTable /> : <AddRow />}
       <div /> {/* Spacer */}
       <HiddenFields />
-      <Suspense fallback={<ButtonSkeleton />}>
-        <Filters />
-      </Suspense>
+      {tableSettings.isNotACollection ? (
+        <Button
+          variant="outlined"
+          color="primary"
+          startIcon={<FilterIcon />}
+          disabled={true}
+        >
+          Filter
+        </Button>
+      ) : (
+        <Suspense fallback={<ButtonSkeleton />}>
+          <Filters />
+        </Suspense>
+      )}
       <div /> {/* Spacer */}
       <LoadedRowsStatus />
       <div style={{ flexGrow: 1, minWidth: 64 }} />
       <RowHeight />
       <div /> {/* Spacer */}
-      {tableSettings.tableType !== "collectionGroup" && (
-        <Suspense fallback={<ButtonSkeleton />}>
-          <ImportData />
-        </Suspense>
+      {disabledTools.includes("import") ? (
+        <TableToolbarButton
+          title="Import data"
+          icon={<ImportIcon />}
+          disabled={true}
+        />
+      ) : (
+        tableSettings.tableType !== "collectionGroup" && (
+          <Suspense fallback={<ButtonSkeleton />}>
+            <ImportData />
+          </Suspense>
+        )
       )}
       <Suspense fallback={<ButtonSkeleton />}>
         <TableToolbarButton
           title="Export/Download"
           onClick={() => openTableModal("export")}
           icon={<ExportIcon />}
+          disabled={disabledTools.includes("export")}
         />
       </Suspense>
       {userRoles.includes("ADMIN") && (
@@ -123,6 +151,7 @@ export default function TableToolbar() {
               }
             }}
             icon={<WebhookIcon />}
+            disabled={disabledTools.includes("webhooks")}
           />
           <TableToolbarButton
             title="Extensions"
@@ -131,6 +160,7 @@ export default function TableToolbar() {
               else openRowyRunModal({ feature: "Extensions" });
             }}
             icon={<ExtensionIcon />}
+            disabled={disabledTools.includes("extensions")}
           />
           <TableToolbarButton
             title="Cloud logs"
@@ -139,6 +169,7 @@ export default function TableToolbar() {
               if (projectSettings.rowyRunUrl) openTableModal("cloudLogs");
               else openRowyRunModal({ feature: "Cloud logs" });
             }}
+            disabled={disabledTools.includes("cloud_logs")}
           />
           {(hasDerivatives || hasExtensions) && (
             <Suspense fallback={<ButtonSkeleton />}>
diff --git a/src/components/fields/Action/index.tsx b/src/components/fields/Action/index.tsx
index 7ab899e2..53b3629d 100644
--- a/src/components/fields/Action/index.tsx
+++ b/src/components/fields/Action/index.tsx
@@ -31,6 +31,7 @@ export const config: IFieldConfig = {
   settings: Settings,
   requireConfiguration: true,
   requireCloudFunction: true,
+  requireCollectionTable: true,
   sortKey: "status",
 };
 export default config;
diff --git a/src/components/fields/ArraySubTable/DisplayCell.tsx b/src/components/fields/ArraySubTable/DisplayCell.tsx
new file mode 100644
index 00000000..3796d553
--- /dev/null
+++ b/src/components/fields/ArraySubTable/DisplayCell.tsx
@@ -0,0 +1,46 @@
+import { IDisplayCellProps } from "@src/components/fields/types";
+import { Link } from "react-router-dom";
+
+import { Stack, IconButton } from "@mui/material";
+import OpenIcon from "@mui/icons-material/OpenInBrowser";
+
+import { useSubTableData } from "./utils";
+
+export default function ArraySubTable({
+  column,
+  row,
+  _rowy_ref,
+  tabIndex,
+}: IDisplayCellProps) {
+  const { documentCount, label, subTablePath } = useSubTableData(
+    column as any,
+    row,
+    _rowy_ref
+  );
+
+  if (!_rowy_ref) return null;
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      style={{ paddingLeft: "var(--cell-padding)", width: "100%" }}
+    >
+      <div style={{ flexGrow: 1, overflow: "hidden" }}>
+        {documentCount} {column.name as string}: {label}
+      </div>
+
+      <IconButton
+        component={Link}
+        to={subTablePath}
+        className="row-hover-iconButton end"
+        size="small"
+        disabled={!subTablePath}
+        tabIndex={tabIndex}
+      >
+        <OpenIcon />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/src/components/fields/ArraySubTable/Settings.tsx b/src/components/fields/ArraySubTable/Settings.tsx
new file mode 100644
index 00000000..d586d46c
--- /dev/null
+++ b/src/components/fields/ArraySubTable/Settings.tsx
@@ -0,0 +1,32 @@
+import { useAtom } from "jotai";
+import { ISettingsProps } from "@src/components/fields/types";
+
+import MultiSelect from "@rowy/multiselect";
+import { FieldType } from "@src/constants/fields";
+
+import { tableScope, tableColumnsOrderedAtom } from "@src/atoms/tableScope";
+
+const Settings = ({ config, onChange }: ISettingsProps) => {
+  const [tableOrderedColumns] = useAtom(tableColumnsOrderedAtom, tableScope);
+
+  const columnOptions = tableOrderedColumns
+    .filter((column) =>
+      [
+        FieldType.shortText,
+        FieldType.singleSelect,
+        FieldType.email,
+        FieldType.phone,
+      ].includes(column.type)
+    )
+    .map((c) => ({ label: c.name, value: c.key }));
+
+  return (
+    <MultiSelect
+      label="Parent label"
+      options={columnOptions}
+      value={config.parentLabel ?? []}
+      onChange={onChange("parentLabel")}
+    />
+  );
+};
+export default Settings;
diff --git a/src/components/fields/ArraySubTable/SideDrawerField.tsx b/src/components/fields/ArraySubTable/SideDrawerField.tsx
new file mode 100644
index 00000000..0f03a45b
--- /dev/null
+++ b/src/components/fields/ArraySubTable/SideDrawerField.tsx
@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { useAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { find, isEqual } from "lodash-es";
+import { ISideDrawerFieldProps } from "@src/components/fields/types";
+import { Link } from "react-router-dom";
+
+import { Box, Stack, IconButton } from "@mui/material";
+import OpenIcon from "@mui/icons-material/OpenInBrowser";
+
+import { tableScope, tableRowsAtom } from "@src/atoms/tableScope";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
+import { useSubTableData } from "./utils";
+
+export default function ArraySubTable({
+  column,
+  _rowy_ref,
+}: ISideDrawerFieldProps) {
+  const [row] = useAtom(
+    useMemo(
+      () =>
+        selectAtom(
+          tableRowsAtom,
+          (tableRows) => find(tableRows, ["_rowy_ref.path", _rowy_ref.path]),
+          isEqual
+        ),
+      [_rowy_ref.path]
+    ),
+    tableScope
+  );
+
+  const { documentCount, label, subTablePath } = useSubTableData(
+    column as any,
+    row as any,
+    _rowy_ref
+  );
+
+  return (
+    <Stack direction="row" id={getFieldId(column.key)}>
+      <Box sx={fieldSx}>
+        {documentCount} {column.name as string}: {label}
+      </Box>
+
+      <IconButton
+        component={Link}
+        to={subTablePath}
+        edge="end"
+        size="small"
+        sx={{ ml: 1 }}
+        disabled={!subTablePath}
+      >
+        <OpenIcon />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/src/components/fields/ArraySubTable/index.tsx b/src/components/fields/ArraySubTable/index.tsx
new file mode 100644
index 00000000..9e062b65
--- /dev/null
+++ b/src/components/fields/ArraySubTable/index.tsx
@@ -0,0 +1,36 @@
+import { lazy } from "react";
+import { IFieldConfig, FieldType } from "@src/components/fields/types";
+import withRenderTableCell from "@src/components/Table/TableCell/withRenderTableCell";
+
+import { ArraySubTable as ArraySubTableIcon } from "@src/assets/icons/ArraySubTable";
+import DisplayCell from "./DisplayCell";
+
+const SideDrawerField = lazy(
+  () =>
+    import(
+      "./SideDrawerField" /* webpackChunkName: "SideDrawerField-ArraySubTable" */
+    )
+);
+const Settings = lazy(
+  () => import("./Settings" /* webpackChunkName: "Settings-ArraySubtable" */)
+);
+export const config: IFieldConfig = {
+  type: FieldType.arraySubTable,
+  name: "Array-Sub-Table",
+  group: "Connection",
+  dataType: "undefined",
+  initialValue: null,
+  icon: <ArraySubTableIcon />,
+  settings: Settings,
+  description:
+    "Connects to a sub-table in the current row. Also displays number of rows inside the sub-table. Max sub-table depth: 100.",
+  TableCell: withRenderTableCell(DisplayCell, null, "focus", {
+    usesRowData: true,
+    disablePadding: true,
+  }),
+  SideDrawerField,
+  initializable: false,
+  requireConfiguration: true,
+  requireCollectionTable: true,
+};
+export default config;
diff --git a/src/components/fields/ArraySubTable/utils.ts b/src/components/fields/ArraySubTable/utils.ts
new file mode 100644
index 00000000..c00f7d7c
--- /dev/null
+++ b/src/components/fields/ArraySubTable/utils.ts
@@ -0,0 +1,34 @@
+import { useLocation } from "react-router-dom";
+
+import { ROUTES } from "@src/constants/routes";
+import { ColumnConfig, TableRow, TableRowRef } from "@src/types/table";
+
+export const useSubTableData = (
+  column: ColumnConfig,
+  row: TableRow,
+  _rowy_ref: TableRowRef
+) => {
+  const label = (column.config?.parentLabel ?? []).reduce((acc, curr) => {
+    if (acc !== "") return `${acc} - ${row[curr]}`;
+    else return row[curr];
+  }, "");
+
+  const documentCount: string = row[column.fieldName]?.count ?? "";
+
+  const location = useLocation();
+  const rootTablePath = decodeURIComponent(
+    location.pathname.split("/" + ROUTES.subTable)[0]
+  );
+
+  // Get params from URL: /table/:tableId/arraySubTable/:docPath/:arraySubTableKey
+  let subTablePath = [
+    rootTablePath,
+    ROUTES.arraySubTable,
+    encodeURIComponent(_rowy_ref.path),
+    column.key,
+  ].join("/");
+
+  subTablePath += "?parentLabel=" + encodeURIComponent(label ?? "");
+
+  return { documentCount, label, subTablePath };
+};
diff --git a/src/components/fields/CreatedAt/index.tsx b/src/components/fields/CreatedAt/index.tsx
index cffa0ea8..a6dab174 100644
--- a/src/components/fields/CreatedAt/index.tsx
+++ b/src/components/fields/CreatedAt/index.tsx
@@ -27,5 +27,6 @@ export const config: IFieldConfig = {
   TableCell: withRenderTableCell(DisplayCell, null),
   SideDrawerField,
   settings: Settings,
+  requireCollectionTable: true,
 };
 export default config;
diff --git a/src/components/fields/CreatedBy/index.tsx b/src/components/fields/CreatedBy/index.tsx
index 98fe8cb6..257da871 100644
--- a/src/components/fields/CreatedBy/index.tsx
+++ b/src/components/fields/CreatedBy/index.tsx
@@ -28,5 +28,6 @@ export const config: IFieldConfig = {
   TableCell: withRenderTableCell(DisplayCell, null),
   SideDrawerField,
   settings: Settings,
+  requireCollectionTable: true,
 };
 export default config;
diff --git a/src/components/fields/Derivative/index.tsx b/src/components/fields/Derivative/index.tsx
index 4c18a0f3..a7ea0600 100644
--- a/src/components/fields/Derivative/index.tsx
+++ b/src/components/fields/Derivative/index.tsx
@@ -22,5 +22,6 @@ export const config: IFieldConfig = {
   settingsValidator,
   requireConfiguration: true,
   requireCloudFunction: true,
+  requireCollectionTable: true,
 };
 export default config;
diff --git a/src/components/fields/File/EditorCell.tsx b/src/components/fields/File/EditorCell.tsx
index a520c594..c175cfc8 100644
--- a/src/components/fields/File/EditorCell.tsx
+++ b/src/components/fields/File/EditorCell.tsx
@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { IEditorCellProps } from "@src/components/fields/types";
 import { useSetAtom } from "jotai";
 
@@ -22,11 +21,17 @@ export default function File_({
   _rowy_ref,
   tabIndex,
   rowHeight,
+  row: { _rowy_arrayTableData },
 }: IEditorCellProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
   const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(_rowy_ref, column.key, { multiple: true });
+    useFileUpload(
+      _rowy_ref,
+      column.key,
+      { multiple: true },
+      _rowy_arrayTableData
+    );
 
   const { isDragActive, getRootProps, getInputProps } = dropzoneState;
   const dropzoneProps = getRootProps();
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index 00287c23..38be7a84 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -25,10 +25,16 @@ export default function File_({
   _rowy_ref,
   value,
   disabled,
+  _rowy_arrayTableData,
 }: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
   const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(_rowy_ref, column.key, { multiple: true });
+    useFileUpload(
+      _rowy_ref,
+      column.key,
+      { multiple: true },
+      _rowy_arrayTableData
+    );
 
   const { isDragActive, getRootProps, getInputProps } = dropzoneState;
 
diff --git a/src/components/fields/File/useFileUpload.ts b/src/components/fields/File/useFileUpload.ts
index d99ccf67..a5305cab 100644
--- a/src/components/fields/File/useFileUpload.ts
+++ b/src/components/fields/File/useFileUpload.ts
@@ -5,12 +5,17 @@ import { DropzoneOptions, useDropzone } from "react-dropzone";
 
 import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import useUploader from "@src/hooks/useFirebaseStorageUploader";
-import type { FileValue, TableRowRef } from "@src/types/table";
+import type {
+  ArrayTableRowData,
+  FileValue,
+  TableRowRef,
+} from "@src/types/table";
 
 export default function useFileUpload(
   docRef: TableRowRef,
   fieldName: string,
-  dropzoneOptions: DropzoneOptions = {}
+  dropzoneOptions: DropzoneOptions = {},
+  arrayTableData?: ArrayTableRowData
 ) {
   const updateField = useSetAtom(updateFieldAtom, tableScope);
   const { uploaderState, upload, deleteUpload } = useUploader();
@@ -47,7 +52,9 @@ export default function useFileUpload(
     async (files: File[]) => {
       const { uploads, failures } = await upload({
         docRef,
-        fieldName,
+        fieldName: arrayTableData
+          ? `${arrayTableData?.parentField}/${fieldName}`
+          : fieldName,
         files,
       });
       updateField({
@@ -55,10 +62,11 @@ export default function useFileUpload(
         fieldName,
         value: uploads,
         useArrayUnion: true,
+        arrayTableData,
       });
       return { uploads, failures };
     },
-    [docRef, fieldName, updateField, upload]
+    [arrayTableData, docRef, fieldName, updateField, upload]
   );
 
   const handleDelete = useCallback(
@@ -69,10 +77,11 @@ export default function useFileUpload(
         value: [file],
         useArrayRemove: true,
         disableCheckEquality: true,
+        arrayTableData,
       });
       deleteUpload(file);
     },
-    [deleteUpload, docRef, fieldName, updateField]
+    [arrayTableData, deleteUpload, docRef.path, fieldName, updateField]
   );
 
   return {
diff --git a/src/components/fields/Image/EditorCell.tsx b/src/components/fields/Image/EditorCell.tsx
index ceec4307..d79d1b0f 100644
--- a/src/components/fields/Image/EditorCell.tsx
+++ b/src/components/fields/Image/EditorCell.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { IEditorCellProps } from "@src/components/fields/types";
-import { useAtom, useSetAtom } from "jotai";
+import { useSetAtom } from "jotai";
 import { assignIn } from "lodash-es";
 
 import { alpha, Box, Stack, Grid, IconButton, ButtonBase } from "@mui/material";
@@ -11,8 +11,6 @@ import Thumbnail from "@src/components/Thumbnail";
 import CircularProgressOptical from "@src/components/CircularProgressOptical";
 
 import { projectScope, confirmDialogAtom } from "@src/atoms/projectScope";
-import { tableSchemaAtom, tableScope } from "@src/atoms/tableScope";
-import { DEFAULT_ROW_HEIGHT } from "@src/components/Table";
 import { FileValue } from "@src/types/table";
 import useFileUpload from "@src/components/fields/File/useFileUpload";
 import { IMAGE_MIME_TYPES } from "./index";
@@ -25,14 +23,20 @@ export default function Image_({
   _rowy_ref,
   tabIndex,
   rowHeight,
+  row: { _rowy_arrayTableData },
 }: IEditorCellProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
   const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(_rowy_ref, column.key, {
-      multiple: true,
-      accept: IMAGE_MIME_TYPES,
-    });
+    useFileUpload(
+      _rowy_ref,
+      column.key,
+      {
+        multiple: true,
+        accept: IMAGE_MIME_TYPES,
+      },
+      _rowy_arrayTableData
+    );
 
   const localImages = useMemo(
     () =>
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index 70c58b88..a21af2c2 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -84,6 +84,7 @@ export default function Image_({
   _rowy_ref,
   value,
   disabled,
+  _rowy_arrayTableData,
 }: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
@@ -94,10 +95,15 @@ export default function Image_({
     uploaderState,
     localFiles,
     dropzoneState,
-  } = useFileUpload(_rowy_ref, column.key, {
-    multiple: true,
-    accept: IMAGE_MIME_TYPES,
-  });
+  } = useFileUpload(
+    _rowy_ref,
+    column.key,
+    {
+      multiple: true,
+      accept: IMAGE_MIME_TYPES,
+    },
+    _rowy_arrayTableData
+  );
 
   const localImages = useMemo(
     () =>
diff --git a/src/components/fields/SubTable/index.tsx b/src/components/fields/SubTable/index.tsx
index 7e153771..574c0a2e 100644
--- a/src/components/fields/SubTable/index.tsx
+++ b/src/components/fields/SubTable/index.tsx
@@ -31,5 +31,6 @@ export const config: IFieldConfig = {
   SideDrawerField,
   initializable: false,
   requireConfiguration: true,
+  requireCollectionTable: true,
 };
 export default config;
diff --git a/src/components/fields/UpdatedAt/index.tsx b/src/components/fields/UpdatedAt/index.tsx
index d6e5eb92..1375347b 100644
--- a/src/components/fields/UpdatedAt/index.tsx
+++ b/src/components/fields/UpdatedAt/index.tsx
@@ -28,5 +28,6 @@ export const config: IFieldConfig = {
   TableCell: withRenderTableCell(DisplayCell, null),
   SideDrawerField,
   settings: Settings,
+  requireCollectionTable: true,
 };
 export default config;
diff --git a/src/components/fields/UpdatedBy/index.tsx b/src/components/fields/UpdatedBy/index.tsx
index 4b1c3a42..c4f733d1 100644
--- a/src/components/fields/UpdatedBy/index.tsx
+++ b/src/components/fields/UpdatedBy/index.tsx
@@ -29,5 +29,6 @@ export const config: IFieldConfig = {
   TableCell: withRenderTableCell(DisplayCell, null),
   SideDrawerField,
   settings: Settings,
+  requireCollectionTable: true,
 };
 export default config;
diff --git a/src/components/fields/index.ts b/src/components/fields/index.ts
index 0d54b0a5..97726ea0 100644
--- a/src/components/fields/index.ts
+++ b/src/components/fields/index.ts
@@ -26,6 +26,7 @@ import Image_ from "./Image";
 import File_ from "./File";
 import Connector from "./Connector";
 import SubTable from "./SubTable";
+import ArraySubTable from "./ArraySubTable";
 import Reference from "./Reference";
 import ConnectTable from "./ConnectTable";
 import ConnectService from "./ConnectService";
@@ -74,6 +75,7 @@ export const FIELDS: IFieldConfig[] = [
   File_,
   /** CONNECTION */
   Connector,
+  ArraySubTable,
   SubTable,
   Reference,
   ConnectTable,
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index a11e1e10..ffc552f2 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -6,6 +6,7 @@ import type {
   TableRow,
   TableRowRef,
   TableFilter,
+  ArrayTableRowData,
 } from "@src/types/table";
 import type { SelectedCell } from "@src/atoms/tableScope";
 import type { IContextMenuItem } from "@src/components/Table/ContextMenu/ContextMenuItem";
@@ -20,6 +21,7 @@ export interface IFieldConfig {
   initializable?: boolean;
   requireConfiguration?: boolean;
   requireCloudFunction?: boolean;
+  requireCollectionTable?: boolean;
   initialValue: any;
   icon?: React.ReactNode;
   description?: string;
@@ -80,7 +82,8 @@ export interface ISideDrawerFieldProps<T = any> {
   column: ColumnConfig;
   /** The row’s _rowy_ref object */
   _rowy_ref: TableRowRef;
-
+  /** The array table row’s data */
+  _rowy_arrayTableData?: ArrayTableRowData;
   /** The field’s local value – synced with db when field is not dirty */
   value: T;
   /** Call when the user has input but changes have not been saved */
diff --git a/src/constants/fields.ts b/src/constants/fields.ts
index 900b88db..d91111a4 100644
--- a/src/constants/fields.ts
+++ b/src/constants/fields.ts
@@ -28,6 +28,7 @@ export enum FieldType {
   // CONNECTION
   connector = "CONNECTOR",
   subTable = "SUB_TABLE",
+  arraySubTable = "ARRAY_SUB_TABLE",
   reference = "REFERENCE",
   connectTable = "DOCUMENT_SELECT",
   connectService = "SERVICE_SELECT",
diff --git a/src/constants/routes.tsx b/src/constants/routes.tsx
index af23e2cd..70e8d9eb 100644
--- a/src/constants/routes.tsx
+++ b/src/constants/routes.tsx
@@ -25,8 +25,10 @@ export enum ROUTES {
   tableWithId = "/table/:id",
   /** Nested route: `/table/:id/subTable/...` */
   subTable = "subTable",
+  arraySubTable = "arraySubTable",
   /** Nested route: `/table/:id/subTable/...` */
   subTableWithId = "subTable/:docPath/:subTableKey",
+  arraySubTableWithId = "arraySubTable/:docPath/:subTableKey",
   /** @deprecated Redirects to /table */
   tableGroup = "/tableGroup",
   /** @deprecated Redirects to /table */
diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
new file mode 100644
index 00000000..58affa18
--- /dev/null
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -0,0 +1,357 @@
+import { useCallback, useEffect } from "react";
+import useMemoValue from "use-memo-value";
+import { useAtom, PrimitiveAtom, useSetAtom } from "jotai";
+import { orderBy } from "lodash-es";
+import { useSnackbar } from "notistack";
+
+import {
+  Firestore,
+  doc,
+  refEqual,
+  onSnapshot,
+  FirestoreError,
+  setDoc,
+  DocumentReference,
+} from "firebase/firestore";
+import { useErrorHandler } from "react-error-boundary";
+
+import { projectScope } from "@src/atoms/projectScope";
+import {
+  ArrayTableRowData,
+  DeleteCollectionDocFunction,
+  TableRow,
+  TableSort,
+  UpdateCollectionDocFunction,
+} from "@src/types/table";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { omitRowyFields } from "@src/utils/table";
+
+/** Options for {@link useFirestoreDocWithAtom} */
+interface IUseFirestoreDocWithAtomOptions<T> {
+  /** Called when an error occurs. Make sure to wrap in useCallback! If not provided, errors trigger the nearest ErrorBoundary. */
+  onError?: (error: FirestoreError) => void;
+  /** Optionally disable Suspense */
+  disableSuspense?: boolean;
+  /** Optionally create the document if it doesn’t exist with the following data */
+  createIfNonExistent?: T;
+  /** Set this atom’s value to a function that updates the document. Uses same scope as `dataScope`. */
+  // updateDataAtom?: PrimitiveAtom<UpdateDocFunction<T> | undefined>;
+  updateDocAtom?: PrimitiveAtom<UpdateCollectionDocFunction<T> | undefined>;
+  deleteDocAtom?: PrimitiveAtom<DeleteCollectionDocFunction | undefined>;
+  sorts?: TableSort[];
+}
+
+/**
+ * Attaches a listener for a Firestore document and unsubscribes on unmount.
+ * Gets the Firestore instance initiated in projectScope.
+ * Updates an atom and Suspends that atom until the first snapshot is received.
+ *
+ * @param dataAtom - Atom to store data in
+ * @param dataScope - Atom scope
+ * @param path - Document path. If falsy, the listener isn’t created at all.
+ * @param fieldName - Parent field name
+ * @param options - {@link IUseFirestoreDocWithAtomOptions}
+ */
+export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
+  dataAtom: PrimitiveAtom<T[]>,
+  dataScope: Parameters<typeof useAtom>[1] | undefined,
+  path: string,
+  fieldName: string,
+  options: IUseFirestoreDocWithAtomOptions<T>
+) {
+  // Destructure options so they can be used as useEffect dependencies
+  const {
+    onError,
+    disableSuspense,
+    createIfNonExistent,
+    updateDocAtom,
+    deleteDocAtom,
+    sorts,
+  } = options || {};
+
+  const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
+  const setDataAtom = useSetAtom(dataAtom, dataScope);
+
+  const handleError = useErrorHandler();
+  const { enqueueSnackbar } = useSnackbar();
+  const setUpdateDocAtom = useSetAtom(
+    updateDocAtom || (dataAtom as any),
+    dataScope
+  );
+  const setDeleteRowAtom = useSetAtom(
+    deleteDocAtom || (dataAtom as any),
+    dataScope
+  );
+
+  // Create the doc ref and memoize using Firestore’s refEqual
+  const memoizedDocRef = useMemoValue(
+    getDocRef<T>(firebaseDb, path),
+    (next, prev) => refEqual(next as any, prev as any)
+  );
+
+  useEffect(() => {
+    // If path is invalid and no memoizedDocRef was created, don’t continue
+    if (!memoizedDocRef) return;
+
+    // Suspend data atom until we get the first snapshot
+    let suspended = false;
+    if (!disableSuspense) {
+      setDataAtom(new Promise(() => []) as unknown as T[]);
+      suspended = true;
+    }
+
+    // Create a listener for the document
+    const unsubscribe = onSnapshot(
+      memoizedDocRef,
+      { includeMetadataChanges: true },
+      (docSnapshot) => {
+        try {
+          if (docSnapshot.exists() && docSnapshot.data() !== undefined) {
+            const pseudoDoc = docSnapshot.get(fieldName) || [];
+            const pseudoRow = pseudoDoc.map((row: any, i: number) => {
+              return {
+                ...row,
+                _rowy_ref: docSnapshot.ref,
+                _rowy_arrayTableData: {
+                  index: i,
+                  parentField: fieldName,
+                },
+              };
+            });
+            const sorted = sortRows<T>(pseudoRow, sorts);
+            setDataAtom(sorted);
+          } else {
+            enqueueSnackbar(`Array table doesn't exist`, {
+              variant: "error",
+            });
+            // console.log("docSnapshot", docSnapshot.data());
+            // setDataAtom([] as T[]);
+          }
+        } catch (error) {
+          if (onError) onError(error as FirestoreError);
+          else handleError(error);
+        }
+        suspended = false;
+      },
+      (error) => {
+        if (suspended) setDataAtom([] as T[]);
+        if (onError) onError(error);
+        else handleError(error);
+      }
+    );
+
+    // When the listener will change, unsubscribe
+    return () => {
+      unsubscribe();
+    };
+  }, [
+    memoizedDocRef,
+    onError,
+    setDataAtom,
+    disableSuspense,
+    createIfNonExistent,
+    handleError,
+    fieldName,
+    sorts,
+    enqueueSnackbar,
+  ]);
+
+  const setRows = useCallback(
+    (rows: T[]) => {
+      rows = rows.map((row: any, i: number) => omitRowyFields(row));
+      if (!fieldName) return;
+      try {
+        return setDoc(
+          doc(firebaseDb, path),
+          { [fieldName]: rows },
+          { merge: true }
+        );
+      } catch (error) {
+        enqueueSnackbar(`Error updating array table`, {
+          variant: "error",
+        });
+        return;
+      }
+    },
+    [enqueueSnackbar, fieldName, firebaseDb, path]
+  );
+
+  useEffect(() => {
+    if (deleteDocAtom) {
+      setDeleteRowAtom(() => (_: string, options?: ArrayTableRowData) => {
+        if (!options) return;
+
+        const deleteRow = () => {
+          let temp: T[] = [];
+          setDataAtom((prevData) => {
+            temp = unsortRows<T>(prevData);
+            temp.splice(options.index, 1);
+            for (let i = options.index; i < temp.length; i++) {
+              // @ts-ignore
+              temp[i]._rowy_arrayTableData.index = i;
+            }
+            return sortRows(temp, sorts);
+          });
+          return setRows(temp);
+        };
+        deleteRow();
+      });
+    }
+  }, [
+    deleteDocAtom,
+    firebaseDb,
+    path,
+    setDataAtom,
+    setDeleteRowAtom,
+    setRows,
+    sorts,
+  ]);
+
+  useEffect(() => {
+    if (updateDocAtom) {
+      setUpdateDocAtom(
+        () =>
+          (
+            path_: string,
+            update: T,
+            deleteFields?: string[],
+            options?: ArrayTableRowData
+          ) => {
+            if (options === undefined) return;
+
+            const deleteRowFields = () => {
+              let temp: T[] = [];
+              setDataAtom((prevData) => {
+                temp = unsortRows(prevData);
+
+                if (deleteFields === undefined) return prevData;
+
+                temp[options.index] = {
+                  ...temp[options.index],
+                  ...deleteFields?.reduce(
+                    (acc, field) => ({ ...acc, [field]: undefined }),
+                    {}
+                  ),
+                };
+
+                return sortRows(temp, sorts);
+              });
+
+              return setRows(temp);
+            };
+
+            const updateRowValues = () => {
+              let temp: T[] = [];
+              setDataAtom((prevData) => {
+                temp = unsortRows(prevData);
+
+                temp[options.index] = {
+                  ...temp[options.index],
+                  ...update,
+                };
+                return sortRows(temp, sorts);
+              });
+              return setRows(temp);
+            };
+
+            const addNewRow = (addTo: "top" | "bottom", base?: TableRow) => {
+              let temp: T[] = [];
+
+              const newRow = (i: number) =>
+                ({
+                  ...base,
+                  _rowy_ref: {
+                    id: doc(firebaseDb, path).id,
+                    path: doc(firebaseDb, path).path,
+                  },
+                  _rowy_arrayTableData: {
+                    index: i,
+                    parentField: fieldName,
+                  },
+                } as T);
+
+              setDataAtom((prevData) => {
+                temp = unsortRows(prevData);
+
+                if (addTo === "bottom") {
+                  temp.push(newRow(prevData.length));
+                } else {
+                  const modifiedPrevData = temp.map((row: any, i: number) => {
+                    return {
+                      ...row,
+                      _rowy_arrayTableData: {
+                        index: i + 1,
+                      },
+                    };
+                  });
+                  temp = [newRow(0), ...modifiedPrevData];
+                }
+                return sortRows(temp, sorts);
+              });
+
+              return setRows(temp);
+            };
+
+            if (Array.isArray(deleteFields) && deleteFields.length > 0) {
+              return deleteRowFields();
+            } else if (options.operation?.addRow) {
+              return addNewRow(
+                options.operation.addRow,
+                options?.operation.base
+              );
+            } else {
+              return updateRowValues();
+            }
+          }
+      );
+    }
+  }, [
+    fieldName,
+    firebaseDb,
+    path,
+    setDataAtom,
+    setRows,
+    setUpdateDocAtom,
+    sorts,
+    updateDocAtom,
+  ]);
+}
+
+export default useFirestoreDocAsCollectionWithAtom;
+
+/**
+ * Create the Firestore document reference.
+ * Put code in a function so the results can be compared by useMemoValue.
+ */
+export const getDocRef = <T>(
+  firebaseDb: Firestore,
+  path: string | undefined,
+  pathSegments?: Array<string | undefined>
+) => {
+  if (!path || (Array.isArray(pathSegments) && pathSegments?.some((x) => !x)))
+    return null;
+
+  return doc(
+    firebaseDb,
+    path,
+    ...((pathSegments as string[]) || [])
+  ) as DocumentReference<T>;
+};
+
+function sortRows<T = TableRow>(
+  rows: T[],
+  sorts: TableSort[] | undefined
+): T[] {
+  if (sorts === undefined || sorts.length < 1) {
+    return rows;
+  }
+
+  const order: "asc" | "desc" =
+    sorts[0].direction === undefined ? "asc" : sorts[0].direction;
+
+  return orderBy(rows, [sorts[0].key], [order]);
+}
+
+function unsortRows<T = TableRow>(rows: T[]): T[] {
+  return orderBy(rows, ["_rowy_arrayTableData.index"], ["asc"]);
+}
diff --git a/src/pages/Table/ProvidedArraySubTablePage.tsx b/src/pages/Table/ProvidedArraySubTablePage.tsx
new file mode 100644
index 00000000..1e6e256c
--- /dev/null
+++ b/src/pages/Table/ProvidedArraySubTablePage.tsx
@@ -0,0 +1,156 @@
+import { lazy, Suspense, useMemo } from "react";
+import { useAtom, Provider } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { DebugAtoms } from "@src/atoms/utils";
+import { ErrorBoundary } from "react-error-boundary";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { find, isEqual } from "lodash-es";
+
+import Modal from "@src/components/Modal";
+import BreadcrumbsSubTable from "@src/components/Table/Breadcrumbs/BreadcrumbsSubTable";
+import ErrorFallback from "@src/components/ErrorFallback";
+import ArraySubTableSourceFirestore from "@src/sources/TableSourceFirestore/ArraySubTableSourceFirestore";
+import TableToolbarSkeleton from "@src/components/TableToolbar/TableToolbarSkeleton";
+import TableSkeleton from "@src/components/Table/TableSkeleton";
+
+import { projectScope, currentUserAtom } from "@src/atoms/projectScope";
+import {
+  tableScope,
+  tableIdAtom,
+  tableSettingsAtom,
+  tableSchemaAtom,
+} from "@src/atoms/tableScope";
+import { ROUTES } from "@src/constants/routes";
+import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
+import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
+
+// prettier-ignore
+const TablePage = lazy(() => import("./TablePage" /* webpackChunkName: "TablePage" */));
+
+/**
+ * Wraps `TablePage` with the data for a array-sub-table.
+ *
+ * Differences to `ProvidedTablePage`:
+ * - Renders a `Modal`
+ * - When this is a child of `ProvidedTablePage`, the `TablePage` rendered for
+ *   the root table has its modals disabled
+ */
+export default function ProvidedArraySubTablePage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  // Get params from URL: /arraySubTable/:docPath/:subTableKey
+  const { docPath, subTableKey } = useParams();
+
+  const [currentUser] = useAtom(currentUserAtom, projectScope);
+
+  // Get table settings and the source column from root table
+  const [rootTableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const [sourceColumn] = useAtom(
+    useMemo(
+      () =>
+        selectAtom(
+          tableSchemaAtom,
+          (tableSchema) => find(tableSchema.columns, ["key", subTableKey]),
+          isEqual
+        ),
+      [subTableKey]
+    ),
+    tableScope
+  );
+
+  // Consumed by children as `tableSettings.collection`
+  const subTableCollection = docPath ?? ""; // + "/" + (sourceColumn?.fieldName || subTableKey);
+
+  // Must be compatible with `getTableSchemaPath`: tableId/rowId/subTableKey
+  // This is why we can’t have a sub-table column fieldName !== key
+  const subTableId =
+    docPath?.replace(rootTableSettings.collection, rootTableSettings.id) +
+    "/" +
+    subTableKey;
+
+  // Write fake tableSettings
+  const subTableSettings = {
+    ...rootTableSettings,
+    collection: subTableCollection,
+    id: subTableId,
+    subTableKey,
+    isNotACollection: true,
+    tableType: "primaryCollection" as "primaryCollection",
+    name: sourceColumn?.name || subTableKey || "",
+  };
+
+  const rootTableLink = location.pathname.split("/" + ROUTES.arraySubTable)[0];
+
+  return (
+    <Modal
+      title={
+        <BreadcrumbsSubTable
+          rootTableSettings={rootTableSettings}
+          subTableSettings={subTableSettings}
+          rootTableLink={rootTableLink}
+        />
+      }
+      onClose={() => navigate(rootTableLink)}
+      disableBackdropClick
+      disableEscapeKeyDown
+      fullScreen
+      sx={{
+        "& > .MuiDialog-container > .MuiPaper-root": {
+          bgcolor: "background.default",
+          backgroundImage: "none",
+        },
+        "& .modal-title-row": {
+          height: TOP_BAR_HEIGHT,
+          "& .MuiDialogTitle-root": {
+            px: 2,
+            py: (TOP_BAR_HEIGHT - 28) / 2 / 8,
+          },
+          "& .dialog-close": { m: (TOP_BAR_HEIGHT - 40) / 2 / 8, ml: -1 },
+        },
+        "& .table-container": {
+          height: `calc(100vh - ${TOP_BAR_HEIGHT}px - ${TABLE_TOOLBAR_HEIGHT}px - 16px)`,
+        },
+      }}
+      ScrollableDialogContentProps={{
+        disableTopDivider: true,
+        disableBottomDivider: true,
+        style: { "--dialog-spacing": 0, "--dialog-contents-spacing": 0 } as any,
+      }}
+      BackdropProps={{ key: "sub-table-modal-backdrop" }}
+    >
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <Suspense
+          fallback={
+            <>
+              <TableToolbarSkeleton />
+              <TableSkeleton />
+            </>
+          }
+        >
+          <Provider
+            key={tableScope.description + "/subTable/" + subTableSettings.id}
+            scope={tableScope}
+            initialValues={[
+              [currentUserAtom, currentUser],
+              [tableIdAtom, subTableSettings.id],
+              [tableSettingsAtom, subTableSettings],
+            ]}
+          >
+            <DebugAtoms scope={tableScope} />
+            <ArraySubTableSourceFirestore />
+            <TablePage
+              tableNotACollection={true}
+              disabledTools={[
+                "import",
+                "export",
+                "webhooks",
+                "extensions",
+                "cloud_logs",
+              ]}
+            />
+          </Provider>
+        </Suspense>
+      </ErrorBoundary>
+    </Modal>
+  );
+}
diff --git a/src/pages/Table/TablePage.tsx b/src/pages/Table/TablePage.tsx
index 04fc0e61..d8e85c85 100644
--- a/src/pages/Table/TablePage.tsx
+++ b/src/pages/Table/TablePage.tsx
@@ -41,6 +41,7 @@ import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
 import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
 import { DRAWER_COLLAPSED_WIDTH } from "@src/components/SideDrawer";
 import { formatSubTableName } from "@src/utils/table";
+import { TableToolsType } from "@src/types/table";
 
 // prettier-ignore
 const BuildLogsSnack = lazy(() => import("@src/components/TableModals/CloudLogsModal/BuildLogs/BuildLogsSnack" /* webpackChunkName: "TableModals-BuildLogsSnack" */));
@@ -53,6 +54,10 @@ export interface ITablePageProps {
   disableModals?: boolean;
   /** Disable side drawer */
   disableSideDrawer?: boolean;
+  /* Array table is not a collection */
+  tableNotACollection?: boolean;
+
+  disabledTools?: TableToolsType;
 }
 
 /**
@@ -71,6 +76,8 @@ export interface ITablePageProps {
 export default function TablePage({
   disableModals,
   disableSideDrawer,
+  tableNotACollection,
+  disabledTools,
 }: ITablePageProps) {
   const [userRoles] = useAtom(userRolesAtom, projectScope);
   const [userSettings] = useAtom(userSettingsAtom, projectScope);
@@ -127,7 +134,7 @@ export default function TablePage({
     <ActionParamsProvider>
       <ErrorBoundary FallbackComponent={InlineErrorFallback}>
         <Suspense fallback={<TableToolbarSkeleton />}>
-          <TableToolbar />
+          <TableToolbar disabledTools={disabledTools} />
         </Suspense>
       </ErrorBoundary>
 
diff --git a/src/sources/TableSourceFirestore/ArraySubTableSourceFirestore.tsx b/src/sources/TableSourceFirestore/ArraySubTableSourceFirestore.tsx
new file mode 100644
index 00000000..e7920b01
--- /dev/null
+++ b/src/sources/TableSourceFirestore/ArraySubTableSourceFirestore.tsx
@@ -0,0 +1,143 @@
+import { memo, useCallback, useEffect } from "react";
+import { useAtom, useSetAtom } from "jotai";
+import useMemoValue from "use-memo-value";
+import { cloneDeep, set } from "lodash-es";
+import {
+  FirestoreError,
+  deleteField,
+  refEqual,
+  setDoc,
+} from "firebase/firestore";
+import { useSnackbar } from "notistack";
+import { useErrorHandler } from "react-error-boundary";
+
+import {
+  tableScope,
+  tableSettingsAtom,
+  tableSchemaAtom,
+  updateTableSchemaAtom,
+  tableSortsAtom,
+  tableRowsDbAtom,
+  _updateRowDbAtom,
+  _deleteRowDbAtom,
+  tableNextPageAtom,
+} from "@src/atoms/tableScope";
+
+import useFirestoreDocWithAtom, {
+  getDocRef,
+} from "@src/hooks/useFirestoreDocWithAtom";
+
+import useAuditChange from "./useAuditChange";
+import useBulkWriteDb from "./useBulkWriteDb";
+import { handleFirestoreError } from "./handleFirestoreError";
+
+import { getTableSchemaPath } from "@src/utils/table";
+import { TableRow, TableSchema } from "@src/types/table";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { projectScope } from "@src/atoms/projectScope";
+import useFirestoreDocAsCollectionWithAtom from "@src/hooks/useFirestoreDocAsCollectionWithAtom";
+
+/**
+ * When rendered, provides atom values for top-level tables and sub-tables
+ */
+export const TableSourceFirestore2 = memo(function TableSourceFirestore() {
+  const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
+  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
+  const setTableSchema = useSetAtom(tableSchemaAtom, tableScope);
+  const setUpdateTableSchema = useSetAtom(updateTableSchemaAtom, tableScope);
+  const setTableNextPage = useSetAtom(tableNextPageAtom, tableScope);
+  const { enqueueSnackbar } = useSnackbar();
+
+  if (!tableSettings) throw new Error("No table config");
+  if (!tableSettings.collection)
+    throw new Error("Invalid table config: no collection");
+
+  const tableSchemaDocRef = useMemoValue(
+    getDocRef<TableSchema>(firebaseDb, getTableSchemaPath(tableSettings)),
+    (next, prev) => refEqual(next as any, prev as any)
+  );
+
+  setTableNextPage({
+    loading: false,
+    available: false,
+  });
+  useEffect(() => {
+    if (!tableSchemaDocRef) return;
+
+    setUpdateTableSchema(
+      () => (update: TableSchema, deleteFields?: string[]) => {
+        const updateToDb = cloneDeep(update);
+
+        if (Array.isArray(deleteFields)) {
+          for (const field of deleteFields) {
+            // Use deterministic set firestore sentinel's on schema columns config
+            // Required for nested columns
+            // i.e field = "columns.base.nested.nested"
+            // key: columns, rest: base.nested.nested
+            // set columns["base.nested.nested"] instead columns.base.nested.nested
+            const [key, ...rest] = field.split(".");
+            if (key === "columns") {
+              (updateToDb as any).columns[rest.join(".")] = deleteField();
+            } else {
+              set(updateToDb, field, deleteField());
+            }
+          }
+        }
+
+        // Update UI state to reflect changes immediately to prevent flickering effects
+        setTableSchema((tableSchema) => ({ ...tableSchema, ...update }));
+
+        return setDoc(tableSchemaDocRef, updateToDb, { merge: true }).catch(
+          (e) => {
+            enqueueSnackbar((e as Error).message, { variant: "error" });
+          }
+        );
+      }
+    );
+
+    return () => {
+      setUpdateTableSchema(undefined);
+    };
+  }, [tableSchemaDocRef, setTableSchema, setUpdateTableSchema, enqueueSnackbar]);
+
+  // Get tableSchema and store in tableSchemaAtom.
+  // If it doesn’t exist, initialize columns
+  useFirestoreDocWithAtom(
+    tableSchemaAtom,
+    tableScope,
+    getTableSchemaPath(tableSettings),
+    {
+      createIfNonExistent: { columns: {} },
+      disableSuspense: true,
+    }
+  );
+
+  // Get table sorts
+  const [sorts] = useAtom(tableSortsAtom, tableScope);
+  // Get documents from collection and store in tableRowsDbAtom
+  // and handle some errors with snackbars
+  const elevateError = useErrorHandler();
+  const handleErrorCallback = useCallback(
+    (error: FirestoreError) =>
+      handleFirestoreError(error, enqueueSnackbar, elevateError),
+    [enqueueSnackbar, elevateError]
+  );
+  useFirestoreDocAsCollectionWithAtom<TableRow>(
+    tableRowsDbAtom,
+    tableScope,
+    tableSettings.collection,
+    tableSettings.subTableKey || "",
+    {
+      sorts,
+      onError: handleErrorCallback,
+      updateDocAtom: _updateRowDbAtom,
+      deleteDocAtom: _deleteRowDbAtom,
+    }
+  );
+  useAuditChange();
+  useBulkWriteDb();
+
+  return null;
+});
+
+export default TableSourceFirestore2;
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 46a5a939..7b8787fd 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -31,7 +31,8 @@ export type UpdateDocFunction<T = TableRow> = (
 export type UpdateCollectionDocFunction<T = TableRow> = (
   path: string,
   update: Partial<T>,
-  deleteFields?: string[]
+  deleteFields?: string[],
+  options?: ArrayTableRowData
 ) => Promise<void>;
 
 /**
@@ -39,7 +40,10 @@ export type UpdateCollectionDocFunction<T = TableRow> = (
  * @param path - The full path to the doc
  * @returns Promise
  */
-export type DeleteCollectionDocFunction = (path: string) => Promise<void>;
+export type DeleteCollectionDocFunction = (
+  path: string,
+  options?: ArrayTableRowData
+) => Promise<void>;
 
 export type BulkWriteOperation<T> =
   | { type: "delete"; path: string }
@@ -71,6 +75,8 @@ export type TableSettings = {
   /** Roles that can see this table in the UI and navigate. Firestore Rules need to be set to give access to the data */
   roles: string[];
 
+  isNotACollection?: boolean;
+  subTableKey?: string | undefined;
   section: string;
   description?: string;
   details?: string;
@@ -187,6 +193,15 @@ export type TableFilter = {
   value: any;
 };
 
+export const TableTools = [
+  "import",
+  "export",
+  "webhooks",
+  "extensions",
+  "cloud_logs",
+] as const;
+export type TableToolsType = typeof Tools[number];
+
 export type TableSort = {
   key: string;
   direction: Parameters<typeof orderBy>[1];
@@ -197,10 +212,20 @@ export type TableRowRef = {
   path: string;
 } & Partial<DocumentReference>;
 
+type ArrayTableOperations = {
+  addRow?: "top" | "bottom";
+  base?: TableRow;
+};
+export type ArrayTableRowData = {
+  index: number;
+  parentField?: string;
+  operation?: ArrayTableOperations;
+};
 export type TableRow = DocumentData & {
   _rowy_ref: TableRowRef;
   _rowy_missingRequiredFields?: string[];
   _rowy_outOfOrder?: boolean;
+  _rowy_arrayTableData?: ArrayTableRowData;
 };
 
 export type FileValue = {
diff --git a/src/utils/table.ts b/src/utils/table.ts
index 691dd385..7a143a8b 100644
--- a/src/utils/table.ts
+++ b/src/utils/table.ts
@@ -51,6 +51,7 @@ export const omitRowyFields = <T = Record<string, any>>(row: T) => {
   delete shallowClonedRow["_rowy_outOfOrder"];
   delete shallowClonedRow["_rowy_missingRequiredFields"];
   delete shallowClonedRow["_rowy_new"];
+  delete shallowClonedRow["_rowy_arrayTableData"];
 
   return shallowClonedRow as T;
 };

From 8b5d2a353d4b19de2be7f4f22569a264d6fac225 Mon Sep 17 00:00:00 2001
From: Prabhat Sachdeva <prabhatexit0@gmail.com>
Date: Thu, 13 Apr 2023 12:38:20 +0530
Subject: [PATCH 11/36] Fixed a typo, changed clilboard to clipboard

---
 src/components/Table/useMenuAction.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/useMenuAction.tsx b/src/components/Table/useMenuAction.tsx
index 516124d3..10b2bf76 100644
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -92,7 +92,7 @@ export function useMenuAction(
       try {
         text = await navigator.clipboard.readText();
       } catch (e) {
-        enqueueSnackbar(`Read clilboard permission denied.`, {
+        enqueueSnackbar(`Read clipboard permission denied.`, {
           variant: "error",
         });
         return;

From af071d8f580afdf9032f539185c3bf7e24857db7 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Thu, 13 Apr 2023 13:30:33 +0530
Subject: [PATCH 12/36] airtable date parser fix

---
 src/components/TableModals/ImportAirtableWizard/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TableModals/ImportAirtableWizard/utils.ts b/src/components/TableModals/ImportAirtableWizard/utils.ts
index 89130dcb..2659e2ad 100644
--- a/src/components/TableModals/ImportAirtableWizard/utils.ts
+++ b/src/components/TableModals/ImportAirtableWizard/utils.ts
@@ -67,7 +67,7 @@ export const fieldParser = (fieldType: FieldType) => {
     case FieldType.dateTime:
       return (v: string) => {
         const date = parseISO(v);
-        return isValidDate(date) ? date.getTime() : null;
+        return isValidDate(date) ? new Date(date) : null;
       };
     default:
       return (v: any) => v;

From dd481415fca4d782ebc4c611aca8b61c6ea6362a Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Fri, 14 Apr 2023 17:56:12 +0530
Subject: [PATCH 13/36] removed _rowy_arrayTableData and expanded _rowy_ref

---
 src/components/SideDrawer/MemoizedField.tsx   |  5 +--
 src/components/SideDrawer/SideDrawer.tsx      |  7 +++--
 .../SideDrawer/SideDrawerFields.tsx           |  7 ++---
 .../Table/ContextMenu/MenuContents.tsx        | 12 +++----
 .../Table/FinalColumn/FinalColumn.tsx         | 10 +++---
 src/components/Table/Table.tsx                |  2 --
 src/components/Table/TableBody.tsx            |  2 +-
 .../Table/TableCell/EditorCellController.tsx  |  2 +-
 src/components/Table/TableCell/TableCell.tsx  |  8 ++---
 .../Table/useKeyboardNavigation.tsx           |  2 +-
 src/components/Table/useMenuAction.tsx        |  2 +-
 src/components/fields/File/EditorCell.tsx     |  8 +----
 .../fields/File/SideDrawerField.tsx           |  8 +----
 src/components/fields/File/useFileUpload.ts   | 21 +++++--------
 src/components/fields/Image/EditorCell.tsx    | 14 +++------
 .../fields/Image/SideDrawerField.tsx          | 14 +++------
 src/components/fields/types.ts                |  3 --
 .../useFirestoreDocAsCollectionWithAtom.ts    | 31 ++++++++++++-------
 src/types/table.d.ts                          | 14 +++++----
 src/utils/table.ts                            |  1 -
 20 files changed, 72 insertions(+), 101 deletions(-)

diff --git a/src/components/SideDrawer/MemoizedField.tsx b/src/components/SideDrawer/MemoizedField.tsx
index 8f7b7766..0fb62f62 100644
--- a/src/components/SideDrawer/MemoizedField.tsx
+++ b/src/components/SideDrawer/MemoizedField.tsx
@@ -5,7 +5,7 @@ import { isEqual, isEmpty } from "lodash-es";
 import FieldWrapper from "./FieldWrapper";
 import { IFieldConfig } from "@src/components/fields/types";
 import { getFieldProp } from "@src/components/fields";
-import { ArrayTableRowData, ColumnConfig, TableRowRef } from "@src/types/table";
+import { ColumnConfig, TableRowRef } from "@src/types/table";
 
 export interface IMemoizedFieldProps {
   field: ColumnConfig;
@@ -13,7 +13,6 @@ export interface IMemoizedFieldProps {
   hidden: boolean;
   value: any;
   _rowy_ref: TableRowRef;
-  _rowy_arrayTableData?: ArrayTableRowData;
   isDirty: boolean;
   onDirty: (fieldName: string) => void;
   onSubmit: (fieldName: string, value: any) => void;
@@ -26,7 +25,6 @@ export const MemoizedField = memo(
     hidden,
     value,
     _rowy_ref,
-    _rowy_arrayTableData,
     isDirty,
     onDirty,
     onSubmit,
@@ -80,7 +78,6 @@ export const MemoizedField = memo(
           },
           onSubmit: handleSubmit,
           disabled,
-          _rowy_arrayTableData,
         })}
       </FieldWrapper>
     );
diff --git a/src/components/SideDrawer/SideDrawer.tsx b/src/components/SideDrawer/SideDrawer.tsx
index faeb15ad..49df7339 100644
--- a/src/components/SideDrawer/SideDrawer.tsx
+++ b/src/components/SideDrawer/SideDrawer.tsx
@@ -35,7 +35,7 @@ export default function SideDrawer() {
     cell?.arrayIndex === undefined
       ? ["_rowy_ref.path", cell?.path]
       : // if the table is an array table, we need to use the array index to find the row
-        ["_rowy_arrayTableData.index", cell?.arrayIndex]
+        ["_rowy_ref.arrayTableData.index", cell?.arrayIndex]
   );
 
   const selectedCellRowIndex = findIndex(
@@ -43,7 +43,7 @@ export default function SideDrawer() {
     cell?.arrayIndex === undefined
       ? ["_rowy_ref.path", cell?.path]
       : // if the table is an array table, we need to use the array index to find the row
-        ["_rowy_arrayTableData.index", cell?.arrayIndex]
+        ["_rowy_ref.arrayTableData.index", cell?.arrayIndex]
   );
 
   const handleNavigate = (direction: "up" | "down") => () => {
@@ -55,8 +55,9 @@ export default function SideDrawer() {
 
     setCell((cell) => ({
       columnKey: cell!.columnKey,
-      path: newPath,
+      path: cell?.arrayIndex !== undefined ? cell.path : newPath,
       focusInside: false,
+      arrayIndex: cell?.arrayIndex !== undefined ? rowIndex : undefined,
     }));
   };
 
diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index e2abdfa4..2f1e0b8a 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -130,7 +130,6 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
           onDirty={onDirty}
           onSubmit={onSubmit}
           isDirty={dirtyField === field.key}
-          _rowy_arrayTableData={row._rowy_arrayTableData}
         />
       ))}
 
@@ -139,12 +138,12 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
         fieldName="_rowy_ref.path"
         label="Document path"
         debugText={
-          row._rowy_arrayTableData
+          row._rowy_ref.arrayTableData
             ? row._rowy_ref.path +
               " → " +
-              row._rowy_arrayTableData.parentField +
+              row._rowy_ref.arrayTableData.parentField +
               "[" +
-              row._rowy_arrayTableData.index +
+              row._rowy_ref.arrayTableData.index +
               "]"
             : row._rowy_ref.path
         }
diff --git a/src/components/Table/ContextMenu/MenuContents.tsx b/src/components/Table/ContextMenu/MenuContents.tsx
index 5154ba8b..5437c2dd 100644
--- a/src/components/Table/ContextMenu/MenuContents.tsx
+++ b/src/components/Table/ContextMenu/MenuContents.tsx
@@ -69,7 +69,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
     selectedCell?.arrayIndex === undefined
       ? ["_rowy_ref.path", selectedCell.path]
       : // if the table is an array table, we need to use the array index to find the row
-        ["_rowy_arrayTableData.index", selectedCell.arrayIndex]
+        ["_rowy_ref.arrayTableData.index", selectedCell.arrayIndex]
   );
 
   if (!row) return null;
@@ -78,11 +78,11 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
 
   const handleDuplicate = () => {
     const _duplicate = () => {
-      if (row._rowy_arrayTableData !== undefined) {
+      if (row._rowy_ref.arrayTableData !== undefined) {
         if (!updateRowDb) return;
 
         return updateRowDb("", {}, undefined, {
-          index: row._rowy_arrayTableData.index,
+          index: row._rowy_ref.arrayTableData.index,
           operation: {
             addRow: "bottom",
             base: row,
@@ -95,7 +95,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
       });
     };
 
-    if (altPress || row._rowy_arrayTableData !== undefined) {
+    if (altPress || row._rowy_ref.arrayTableData !== undefined) {
       _duplicate();
     } else {
       confirm({
@@ -118,10 +118,10 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
     const _delete = () =>
       deleteRow({
         path: row._rowy_ref.path,
-        options: row._rowy_arrayTableData,
+        options: row._rowy_ref.arrayTableData,
       });
 
-    if (altPress || row._rowy_arrayTableData !== undefined) {
+    if (altPress || row._rowy_ref.arrayTableData !== undefined) {
       _delete();
     } else {
       confirm({
diff --git a/src/components/Table/FinalColumn/FinalColumn.tsx b/src/components/Table/FinalColumn/FinalColumn.tsx
index 041d3f0f..16f6ee68 100644
--- a/src/components/Table/FinalColumn/FinalColumn.tsx
+++ b/src/components/Table/FinalColumn/FinalColumn.tsx
@@ -43,9 +43,9 @@ export const FinalColumn = memo(function FinalColumn({
     const _delete = () =>
       deleteRow({
         path: row.original._rowy_ref.path,
-        options: row.original._rowy_arrayTableData,
+        options: row.original._rowy_ref.arrayTableData,
       });
-    if (altPress || row.original._rowy_arrayTableData !== undefined) {
+    if (altPress || row.original._rowy_ref.arrayTableData !== undefined) {
       _delete();
     } else {
       confirm({
@@ -68,11 +68,11 @@ export const FinalColumn = memo(function FinalColumn({
 
   const handleDuplicate = () => {
     const _duplicate = () => {
-      if (row.original._rowy_arrayTableData !== undefined) {
+      if (row.original._rowy_ref.arrayTableData !== undefined) {
         if (!updateRowDb) return;
 
         return updateRowDb("", {}, undefined, {
-          index: row.original._rowy_arrayTableData.index,
+          index: row.original._rowy_ref.arrayTableData.index,
           operation: {
             addRow: "bottom",
             base: row.original,
@@ -84,7 +84,7 @@ export const FinalColumn = memo(function FinalColumn({
         setId: addRowIdType === "custom" ? "decrement" : addRowIdType,
       });
     };
-    if (altPress || row.original._rowy_arrayTableData !== undefined) {
+    if (altPress || row.original._rowy_ref.arrayTableData !== undefined) {
       _duplicate();
     } else {
       confirm({
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index b99c1129..d930b794 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -200,8 +200,6 @@ export default function Table({
       if (result.destination?.index === undefined || !result.draggableId)
         return;
 
-      console.log(result.draggableId, result.destination.index);
-
       updateColumn({
         key: result.draggableId,
         index: result.destination.index,
diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index edaed491..3292ceab 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -105,7 +105,7 @@ export const TableBody = memo(function TableBody({
                 selectedCell?.columnKey === cell.column.id &&
                 // if the table is an array sub table, we need to check the array index as well
                 selectedCell?.arrayIndex ===
-                  row.original._rowy_arrayTableData?.index;
+                  row.original._rowy_ref.arrayTableData?.index;
 
               const fieldTypeGroup = getFieldProp(
                 "group",
diff --git a/src/components/Table/TableCell/EditorCellController.tsx b/src/components/Table/TableCell/EditorCellController.tsx
index cacc8946..217c40eb 100644
--- a/src/components/Table/TableCell/EditorCellController.tsx
+++ b/src/components/Table/TableCell/EditorCellController.tsx
@@ -66,7 +66,7 @@ export default function EditorCellController({
         fieldName: props.column.fieldName,
         value: localValueRef.current,
         deleteField: localValueRef.current === undefined,
-        arrayTableData: props.row?._rowy_arrayTableData,
+        arrayTableData: props.row?._rowy_ref.arrayTableData,
       });
     } catch (e) {
       enqueueSnackbar((e as Error).message, { variant: "error" });
diff --git a/src/components/Table/TableCell/TableCell.tsx b/src/components/Table/TableCell/TableCell.tsx
index 5c664b35..f7e501fb 100644
--- a/src/components/Table/TableCell/TableCell.tsx
+++ b/src/components/Table/TableCell/TableCell.tsx
@@ -123,7 +123,7 @@ export const TableCell = memo(function TableCell({
     focusInsideCell,
     setFocusInsideCell: (focusInside: boolean) =>
       setSelectedCell({
-        arrayIndex: row.original._rowy_arrayTableData?.index,
+        arrayIndex: row.original._rowy_ref.arrayTableData?.index,
         path: row.original._rowy_ref.path,
         columnKey: cell.column.id,
         focusInside,
@@ -167,7 +167,7 @@ export const TableCell = memo(function TableCell({
       }}
       onClick={(e) => {
         setSelectedCell({
-          arrayIndex: row.original._rowy_arrayTableData?.index,
+          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
           path: row.original._rowy_ref.path,
           columnKey: cell.column.id,
           focusInside: false,
@@ -176,7 +176,7 @@ export const TableCell = memo(function TableCell({
       }}
       onDoubleClick={(e) => {
         setSelectedCell({
-          arrayIndex: row.original._rowy_arrayTableData?.index,
+          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
           path: row.original._rowy_ref.path,
           columnKey: cell.column.id,
           focusInside: true,
@@ -186,7 +186,7 @@ export const TableCell = memo(function TableCell({
       onContextMenu={(e) => {
         e.preventDefault();
         setSelectedCell({
-          arrayIndex: row.original._rowy_arrayTableData?.index,
+          arrayIndex: row.original._rowy_ref.arrayTableData?.index,
           path: row.original._rowy_ref.path,
           columnKey: cell.column.id,
           focusInside: false,
diff --git a/src/components/Table/useKeyboardNavigation.tsx b/src/components/Table/useKeyboardNavigation.tsx
index 81141a77..7c18a5b5 100644
--- a/src/components/Table/useKeyboardNavigation.tsx
+++ b/src/components/Table/useKeyboardNavigation.tsx
@@ -130,7 +130,7 @@ export function useKeyboardNavigation({
         columnKey: leafColumns[newColIndex].id! || leafColumns[0].id!,
         arrayIndex:
           newRowIndex > -1
-            ? tableRows[newRowIndex]._rowy_arrayTableData?.index
+            ? tableRows[newRowIndex]._rowy_ref.arrayTableData?.index
             : undefined,
 
         // When selected cell changes, exit current cell
diff --git a/src/components/Table/useMenuAction.tsx b/src/components/Table/useMenuAction.tsx
index 49cdc2d8..e7982313 100644
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -142,7 +142,7 @@ export function useMenuAction(
       selectedCell.arrayIndex === undefined
         ? ["_rowy_ref.path", selectedCell.path]
         : // if the table is an array table, we need to use the array index to find the row
-          ["_rowy_arrayTableData.index", selectedCell.arrayIndex]
+          ["_rowy_ref.arrayTableData.index", selectedCell.arrayIndex]
     );
     setCellValue(get(selectedRow, selectedCol.fieldName));
   }, [selectedCell, tableSchema, tableRows]);
diff --git a/src/components/fields/File/EditorCell.tsx b/src/components/fields/File/EditorCell.tsx
index c175cfc8..487e9fee 100644
--- a/src/components/fields/File/EditorCell.tsx
+++ b/src/components/fields/File/EditorCell.tsx
@@ -21,17 +21,11 @@ export default function File_({
   _rowy_ref,
   tabIndex,
   rowHeight,
-  row: { _rowy_arrayTableData },
 }: IEditorCellProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
   const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(
-      _rowy_ref,
-      column.key,
-      { multiple: true },
-      _rowy_arrayTableData
-    );
+    useFileUpload(_rowy_ref, column.key, { multiple: true });
 
   const { isDragActive, getRootProps, getInputProps } = dropzoneState;
   const dropzoneProps = getRootProps();
diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx
index 38be7a84..00287c23 100644
--- a/src/components/fields/File/SideDrawerField.tsx
+++ b/src/components/fields/File/SideDrawerField.tsx
@@ -25,16 +25,10 @@ export default function File_({
   _rowy_ref,
   value,
   disabled,
-  _rowy_arrayTableData,
 }: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
   const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(
-      _rowy_ref,
-      column.key,
-      { multiple: true },
-      _rowy_arrayTableData
-    );
+    useFileUpload(_rowy_ref, column.key, { multiple: true });
 
   const { isDragActive, getRootProps, getInputProps } = dropzoneState;
 
diff --git a/src/components/fields/File/useFileUpload.ts b/src/components/fields/File/useFileUpload.ts
index a5305cab..40f4c394 100644
--- a/src/components/fields/File/useFileUpload.ts
+++ b/src/components/fields/File/useFileUpload.ts
@@ -5,17 +5,12 @@ import { DropzoneOptions, useDropzone } from "react-dropzone";
 
 import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import useUploader from "@src/hooks/useFirebaseStorageUploader";
-import type {
-  ArrayTableRowData,
-  FileValue,
-  TableRowRef,
-} from "@src/types/table";
+import type { FileValue, TableRowRef } from "@src/types/table";
 
 export default function useFileUpload(
   docRef: TableRowRef,
   fieldName: string,
-  dropzoneOptions: DropzoneOptions = {},
-  arrayTableData?: ArrayTableRowData
+  dropzoneOptions: DropzoneOptions = {}
 ) {
   const updateField = useSetAtom(updateFieldAtom, tableScope);
   const { uploaderState, upload, deleteUpload } = useUploader();
@@ -52,8 +47,8 @@ export default function useFileUpload(
     async (files: File[]) => {
       const { uploads, failures } = await upload({
         docRef,
-        fieldName: arrayTableData
-          ? `${arrayTableData?.parentField}/${fieldName}`
+        fieldName: docRef.arrayTableData
+          ? `${docRef.arrayTableData?.parentField}/${fieldName}`
           : fieldName,
         files,
       });
@@ -62,11 +57,11 @@ export default function useFileUpload(
         fieldName,
         value: uploads,
         useArrayUnion: true,
-        arrayTableData,
+        arrayTableData: docRef.arrayTableData,
       });
       return { uploads, failures };
     },
-    [arrayTableData, docRef, fieldName, updateField, upload]
+    [docRef, fieldName, updateField, upload]
   );
 
   const handleDelete = useCallback(
@@ -77,11 +72,11 @@ export default function useFileUpload(
         value: [file],
         useArrayRemove: true,
         disableCheckEquality: true,
-        arrayTableData,
+        arrayTableData: docRef.arrayTableData,
       });
       deleteUpload(file);
     },
-    [arrayTableData, deleteUpload, docRef.path, fieldName, updateField]
+    [deleteUpload, docRef.arrayTableData, docRef.path, fieldName, updateField]
   );
 
   return {
diff --git a/src/components/fields/Image/EditorCell.tsx b/src/components/fields/Image/EditorCell.tsx
index d79d1b0f..1516d96f 100644
--- a/src/components/fields/Image/EditorCell.tsx
+++ b/src/components/fields/Image/EditorCell.tsx
@@ -23,20 +23,14 @@ export default function Image_({
   _rowy_ref,
   tabIndex,
   rowHeight,
-  row: { _rowy_arrayTableData },
 }: IEditorCellProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
   const { loading, progress, handleDelete, localFiles, dropzoneState } =
-    useFileUpload(
-      _rowy_ref,
-      column.key,
-      {
-        multiple: true,
-        accept: IMAGE_MIME_TYPES,
-      },
-      _rowy_arrayTableData
-    );
+    useFileUpload(_rowy_ref, column.key, {
+      multiple: true,
+      accept: IMAGE_MIME_TYPES,
+    });
 
   const localImages = useMemo(
     () =>
diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx
index a21af2c2..70c58b88 100644
--- a/src/components/fields/Image/SideDrawerField.tsx
+++ b/src/components/fields/Image/SideDrawerField.tsx
@@ -84,7 +84,6 @@ export default function Image_({
   _rowy_ref,
   value,
   disabled,
-  _rowy_arrayTableData,
 }: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
@@ -95,15 +94,10 @@ export default function Image_({
     uploaderState,
     localFiles,
     dropzoneState,
-  } = useFileUpload(
-    _rowy_ref,
-    column.key,
-    {
-      multiple: true,
-      accept: IMAGE_MIME_TYPES,
-    },
-    _rowy_arrayTableData
-  );
+  } = useFileUpload(_rowy_ref, column.key, {
+    multiple: true,
+    accept: IMAGE_MIME_TYPES,
+  });
 
   const localImages = useMemo(
     () =>
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index ffc552f2..1c60aa92 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -6,7 +6,6 @@ import type {
   TableRow,
   TableRowRef,
   TableFilter,
-  ArrayTableRowData,
 } from "@src/types/table";
 import type { SelectedCell } from "@src/atoms/tableScope";
 import type { IContextMenuItem } from "@src/components/Table/ContextMenu/ContextMenuItem";
@@ -82,8 +81,6 @@ export interface ISideDrawerFieldProps<T = any> {
   column: ColumnConfig;
   /** The row’s _rowy_ref object */
   _rowy_ref: TableRowRef;
-  /** The array table row’s data */
-  _rowy_arrayTableData?: ArrayTableRowData;
   /** The field’s local value – synced with db when field is not dirty */
   value: T;
   /** Call when the user has input but changes have not been saved */
diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index 58affa18..76fb1a09 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -111,10 +111,13 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
             const pseudoRow = pseudoDoc.map((row: any, i: number) => {
               return {
                 ...row,
-                _rowy_ref: docSnapshot.ref,
-                _rowy_arrayTableData: {
-                  index: i,
-                  parentField: fieldName,
+                _rowy_ref: {
+                  path: docSnapshot.ref.path,
+                  id: docSnapshot.ref.id,
+                  arrayTableData: {
+                    index: i,
+                    parentField: fieldName,
+                  },
                 },
               };
             });
@@ -188,7 +191,7 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
             temp.splice(options.index, 1);
             for (let i = options.index; i < temp.length; i++) {
               // @ts-ignore
-              temp[i]._rowy_arrayTableData.index = i;
+              temp[i]._rowy_ref.arrayTableData.index = i;
             }
             return sortRows(temp, sorts);
           });
@@ -263,10 +266,10 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
                   _rowy_ref: {
                     id: doc(firebaseDb, path).id,
                     path: doc(firebaseDb, path).path,
-                  },
-                  _rowy_arrayTableData: {
-                    index: i,
-                    parentField: fieldName,
+                    arrayTableData: {
+                      index: i,
+                      parentField: fieldName,
+                    },
                   },
                 } as T);
 
@@ -279,8 +282,12 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
                   const modifiedPrevData = temp.map((row: any, i: number) => {
                     return {
                       ...row,
-                      _rowy_arrayTableData: {
-                        index: i + 1,
+                      _rowy_ref: {
+                        ...row._rowy_ref,
+                        arrayTableData: {
+                          index: i + 1,
+                          parentField: fieldName,
+                        },
                       },
                     };
                   });
@@ -353,5 +360,5 @@ function sortRows<T = TableRow>(
 }
 
 function unsortRows<T = TableRow>(rows: T[]): T[] {
-  return orderBy(rows, ["_rowy_arrayTableData.index"], ["asc"]);
+  return orderBy(rows, ["_rowy_ref.arrayTableData.index"], ["asc"]);
 }
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 7b8787fd..5a0281dc 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -207,25 +207,27 @@ export type TableSort = {
   direction: Parameters<typeof orderBy>[1];
 };
 
+export type ArrayTableRowData = {
+  index: number;
+  parentField?: string;
+  operation?: ArrayTableOperations;
+};
+
 export type TableRowRef = {
   id: string;
   path: string;
+  arrayTableData?: ArrayTableRowData;
 } & Partial<DocumentReference>;
 
 type ArrayTableOperations = {
   addRow?: "top" | "bottom";
   base?: TableRow;
 };
-export type ArrayTableRowData = {
-  index: number;
-  parentField?: string;
-  operation?: ArrayTableOperations;
-};
+
 export type TableRow = DocumentData & {
   _rowy_ref: TableRowRef;
   _rowy_missingRequiredFields?: string[];
   _rowy_outOfOrder?: boolean;
-  _rowy_arrayTableData?: ArrayTableRowData;
 };
 
 export type FileValue = {
diff --git a/src/utils/table.ts b/src/utils/table.ts
index 7a143a8b..691dd385 100644
--- a/src/utils/table.ts
+++ b/src/utils/table.ts
@@ -51,7 +51,6 @@ export const omitRowyFields = <T = Record<string, any>>(row: T) => {
   delete shallowClonedRow["_rowy_outOfOrder"];
   delete shallowClonedRow["_rowy_missingRequiredFields"];
   delete shallowClonedRow["_rowy_new"];
-  delete shallowClonedRow["_rowy_arrayTableData"];
 
   return shallowClonedRow as T;
 };

From e802db5725900de8290f30dbe00990fb1ceb24b5 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Fri, 14 Apr 2023 18:42:43 +0530
Subject: [PATCH 14/36] removed key errors

---
 src/components/Table/TableBody.tsx   | 2 +-
 src/components/Table/TableHeader.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index 3292ceab..b50fcdf6 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -83,7 +83,7 @@ export const TableBody = memo(function TableBody({
 
         return (
           <StyledRow
-            key={row.id}
+            key={row.id + row.original._rowy_ref.arrayTableData?.index}
             role="row"
             aria-rowindex={row.index + 2}
             style={{
diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
index ab813275..f7187646 100644
--- a/src/components/Table/TableHeader.tsx
+++ b/src/components/Table/TableHeader.tsx
@@ -46,8 +46,12 @@ export const TableHeader = memo(function TableHeader({
 
   return (
     <DragDropContext onDragEnd={handleDropColumn}>
-      {headerGroups.map((headerGroup) => (
-        <Droppable droppableId="droppable-column" direction="horizontal">
+      {headerGroups.map((headerGroup, _i) => (
+        <Droppable
+          key={_i}
+          droppableId="droppable-column"
+          direction="horizontal"
+        >
           {(provided) => (
             <StyledRow
               key={headerGroup.id}

From d53b9226f16b5bed43d032dac4af891a87b5955e Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Mon, 17 Apr 2023 10:35:15 +0530
Subject: [PATCH 15/36] MAX_CONCURRENT_TASKS

---
 .../TableModals/ImportCsvWizard/useUploadFileFromURL.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TableModals/ImportCsvWizard/useUploadFileFromURL.tsx b/src/components/TableModals/ImportCsvWizard/useUploadFileFromURL.tsx
index 00d99b69..bc957dd3 100644
--- a/src/components/TableModals/ImportCsvWizard/useUploadFileFromURL.tsx
+++ b/src/components/TableModals/ImportCsvWizard/useUploadFileFromURL.tsx
@@ -8,7 +8,7 @@ import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import { TableRowRef } from "@src/types/table";
 import SnackbarProgress from "@src/components/SnackbarProgress";
 
-const MAX_CONCURRENT_TASKS = 10;
+const MAX_CONCURRENT_TASKS = 1000;
 
 type UploadParamTypes = {
   docRef: TableRowRef;

From 83080d267ba115c6796b86da6ae7c959b7362d4d Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Mon, 17 Apr 2023 21:25:10 +0530
Subject: [PATCH 16/36] fixed default values

---
 src/components/TableToolbar/AddRow.tsx           | 15 ++++++++++++++-
 src/hooks/useFirestoreDocAsCollectionWithAtom.ts | 10 +++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/TableToolbar/AddRow.tsx b/src/components/TableToolbar/AddRow.tsx
index 13e24cd5..ebeb51c4 100644
--- a/src/components/TableToolbar/AddRow.tsx
+++ b/src/components/TableToolbar/AddRow.tsx
@@ -28,6 +28,7 @@ import {
   tableSortsAtom,
   addRowAtom,
   _updateRowDbAtom,
+  tableColumnsOrderedAtom,
 } from "@src/atoms/tableScope";
 
 export default function AddRow() {
@@ -215,10 +216,22 @@ export function AddRowArraySubTable() {
 
   const anchorEl = useRef<HTMLDivElement>(null);
   const [addRowAt, setAddNewRowAt] = useState<"top" | "bottom">("bottom");
+  const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
+
   if (!updateRowDb) return null;
 
   const handleClick = () => {
-    updateRowDb("", {}, undefined, {
+    const initialValues: Record<string, any> = {};
+
+    // Set initial values based on default values
+    for (const column of tableColumnsOrdered) {
+      if (column.config?.defaultValue?.type === "static")
+        initialValues[column.key] = column.config.defaultValue.value!;
+      else if (column.config?.defaultValue?.type === "null")
+        initialValues[column.key] = null;
+    }
+
+    updateRowDb("", initialValues, undefined, {
       index: 0,
       operation: {
         addRow: addRowAt,
diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index 76fb1a09..d4a809c6 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -260,9 +260,9 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
             const addNewRow = (addTo: "top" | "bottom", base?: TableRow) => {
               let temp: T[] = [];
 
-              const newRow = (i: number) =>
-                ({
-                  ...base,
+              const newRow = (i: number) => {
+                return {
+                  ...(base ?? update),
                   _rowy_ref: {
                     id: doc(firebaseDb, path).id,
                     path: doc(firebaseDb, path).path,
@@ -271,8 +271,8 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
                       parentField: fieldName,
                     },
                   },
-                } as T);
-
+                } as T;
+              };
               setDataAtom((prevData) => {
                 temp = unsortRows(prevData);
 

From a41bc5d256b8a76c178f9f0249a79b3e696fa400 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 18 Apr 2023 15:32:16 +0530
Subject: [PATCH 17/36] transaction [WIP]

---
 src/components/fields/File/useFileUpload.ts   |   2 +-
 .../useFirestoreDocAsCollectionWithAtom.ts    | 297 ++++++++++++------
 2 files changed, 202 insertions(+), 97 deletions(-)

diff --git a/src/components/fields/File/useFileUpload.ts b/src/components/fields/File/useFileUpload.ts
index 40f4c394..161e44c0 100644
--- a/src/components/fields/File/useFileUpload.ts
+++ b/src/components/fields/File/useFileUpload.ts
@@ -48,7 +48,7 @@ export default function useFileUpload(
       const { uploads, failures } = await upload({
         docRef,
         fieldName: docRef.arrayTableData
-          ? `${docRef.arrayTableData?.parentField}/${fieldName}`
+          ? `${docRef.arrayTableData?.parentField}/${docRef.arrayTableData?.index}/${fieldName}`
           : fieldName,
         files,
       });
diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index d4a809c6..b9f2650c 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -10,8 +10,8 @@ import {
   refEqual,
   onSnapshot,
   FirestoreError,
-  setDoc,
   DocumentReference,
+  runTransaction,
 } from "firebase/firestore";
 import { useErrorHandler } from "react-error-boundary";
 
@@ -24,7 +24,8 @@ import {
   UpdateCollectionDocFunction,
 } from "@src/types/table";
 import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
-import { omitRowyFields } from "@src/utils/table";
+
+type UpdateFunction<T> = (rows: T[]) => T[];
 
 /** Options for {@link useFirestoreDocWithAtom} */
 interface IUseFirestoreDocWithAtomOptions<T> {
@@ -71,7 +72,16 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
 
   const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
   const setDataAtom = useSetAtom(dataAtom, dataScope);
-
+  const { addRow, deleteRow, deleteField, updateTable } = useAlterArrayTable<T>(
+    {
+      firebaseDb,
+      dataAtom,
+      dataScope,
+      sorts,
+      path,
+      fieldName,
+    }
+  );
   const handleError = useErrorHandler();
   const { enqueueSnackbar } = useSnackbar();
   const setUpdateDocAtom = useSetAtom(
@@ -160,15 +170,23 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
   ]);
 
   const setRows = useCallback(
-    (rows: T[]) => {
-      rows = rows.map((row: any, i: number) => omitRowyFields(row));
+    (updateFunction: UpdateFunction<T>) => {
       if (!fieldName) return;
+
       try {
-        return setDoc(
-          doc(firebaseDb, path),
-          { [fieldName]: rows },
-          { merge: true }
-        );
+        return runTransaction(firebaseDb, async (transaction) => {
+          const docRef = doc(firebaseDb, path);
+          const docSnap = await transaction.get(docRef);
+          const rows = docSnap.data()?.[fieldName] || [];
+
+          const updatedRows = updateFunction(rows);
+
+          return await transaction.set(
+            docRef,
+            { [fieldName]: updatedRows },
+            { merge: true }
+          );
+        });
       } catch (error) {
         enqueueSnackbar(`Error updating array table`, {
           variant: "error",
@@ -183,25 +201,14 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
     if (deleteDocAtom) {
       setDeleteRowAtom(() => (_: string, options?: ArrayTableRowData) => {
         if (!options) return;
-
-        const deleteRow = () => {
-          let temp: T[] = [];
-          setDataAtom((prevData) => {
-            temp = unsortRows<T>(prevData);
-            temp.splice(options.index, 1);
-            for (let i = options.index; i < temp.length; i++) {
-              // @ts-ignore
-              temp[i]._rowy_ref.arrayTableData.index = i;
-            }
-            return sortRows(temp, sorts);
-          });
-          return setRows(temp);
-        };
-        deleteRow();
+        const updateFunction = deleteRow(options.index);
+        return setRows(updateFunction);
       });
     }
   }, [
     deleteDocAtom,
+    deleteRow,
+    fieldName,
     firebaseDb,
     path,
     setDataAtom,
@@ -215,7 +222,7 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
       setUpdateDocAtom(
         () =>
           (
-            path_: string,
+            _: string,
             update: T,
             deleteFields?: string[],
             options?: ArrayTableRowData
@@ -223,80 +230,18 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
             if (options === undefined) return;
 
             const deleteRowFields = () => {
-              let temp: T[] = [];
-              setDataAtom((prevData) => {
-                temp = unsortRows(prevData);
-
-                if (deleteFields === undefined) return prevData;
-
-                temp[options.index] = {
-                  ...temp[options.index],
-                  ...deleteFields?.reduce(
-                    (acc, field) => ({ ...acc, [field]: undefined }),
-                    {}
-                  ),
-                };
-
-                return sortRows(temp, sorts);
-              });
-
-              return setRows(temp);
+              const updateFunction = deleteField(options.index, deleteFields);
+              return setRows(updateFunction);
             };
 
             const updateRowValues = () => {
-              let temp: T[] = [];
-              setDataAtom((prevData) => {
-                temp = unsortRows(prevData);
-
-                temp[options.index] = {
-                  ...temp[options.index],
-                  ...update,
-                };
-                return sortRows(temp, sorts);
-              });
-              return setRows(temp);
+              const updateFunction = updateTable(options.index, update);
+              return setRows(updateFunction);
             };
 
-            const addNewRow = (addTo: "top" | "bottom", base?: TableRow) => {
-              let temp: T[] = [];
-
-              const newRow = (i: number) => {
-                return {
-                  ...(base ?? update),
-                  _rowy_ref: {
-                    id: doc(firebaseDb, path).id,
-                    path: doc(firebaseDb, path).path,
-                    arrayTableData: {
-                      index: i,
-                      parentField: fieldName,
-                    },
-                  },
-                } as T;
-              };
-              setDataAtom((prevData) => {
-                temp = unsortRows(prevData);
-
-                if (addTo === "bottom") {
-                  temp.push(newRow(prevData.length));
-                } else {
-                  const modifiedPrevData = temp.map((row: any, i: number) => {
-                    return {
-                      ...row,
-                      _rowy_ref: {
-                        ...row._rowy_ref,
-                        arrayTableData: {
-                          index: i + 1,
-                          parentField: fieldName,
-                        },
-                      },
-                    };
-                  });
-                  temp = [newRow(0), ...modifiedPrevData];
-                }
-                return sortRows(temp, sorts);
-              });
-
-              return setRows(temp);
+            const addNewRow = (addTo: "top" | "bottom", base?: T) => {
+              const updateFunction = addRow(addTo, base ?? update);
+              return setRows(updateFunction);
             };
 
             if (Array.isArray(deleteFields) && deleteFields.length > 0) {
@@ -304,7 +249,7 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
             } else if (options.operation?.addRow) {
               return addNewRow(
                 options.operation.addRow,
-                options?.operation.base
+                options?.operation.base as T
               );
             } else {
               return updateRowValues();
@@ -313,6 +258,8 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
       );
     }
   }, [
+    addRow,
+    deleteField,
     fieldName,
     firebaseDb,
     path,
@@ -321,11 +268,169 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
     setUpdateDocAtom,
     sorts,
     updateDocAtom,
+    updateTable,
   ]);
 }
 
 export default useFirestoreDocAsCollectionWithAtom;
 
+function useAlterArrayTable<T>({
+  firebaseDb,
+  dataAtom,
+  dataScope,
+  sorts,
+  path,
+  fieldName,
+}: {
+  firebaseDb: Firestore;
+  dataAtom: PrimitiveAtom<T[]>;
+  dataScope: Parameters<typeof useAtom>[1] | undefined;
+  sorts: TableSort[] | undefined;
+  path: string;
+  fieldName: string;
+}) {
+  const setData = useSetAtom(dataAtom, dataScope);
+
+  const add = useCallback(
+    (addTo: "top" | "bottom", base?: T): UpdateFunction<T> => {
+      const newRow = (i: number, noMeta?: boolean) => {
+        const meta = noMeta
+          ? {}
+          : {
+              _rowy_ref: {
+                id: doc(firebaseDb, path).id,
+                path: doc(firebaseDb, path).path,
+                arrayTableData: {
+                  index: i,
+                  parentField: fieldName,
+                },
+              },
+            };
+        return {
+          ...(base ?? {}),
+          ...meta,
+        } as T;
+      };
+
+      setData((prevData) => {
+        prevData = unsortRows(prevData);
+
+        if (addTo === "bottom") {
+          prevData.push(newRow(prevData.length));
+        } else {
+          const modifiedPrevData = prevData.map((row: any, i: number) => {
+            return {
+              ...row,
+              _rowy_ref: {
+                ...row._rowy_ref,
+                arrayTableData: {
+                  index: i + 1,
+                  parentField: fieldName,
+                },
+              },
+            };
+          });
+          prevData = [newRow(0), ...modifiedPrevData];
+        }
+        return sortRows(prevData, sorts);
+      });
+
+      return (rows) => {
+        if (addTo === "bottom") {
+          rows.push(newRow(rows.length, true));
+        } else {
+          rows = [newRow(0, true), ...rows];
+        }
+        return rows;
+      };
+    },
+    [fieldName, firebaseDb, path, setData, sorts]
+  );
+
+  const _delete = useCallback(
+    (index: number): UpdateFunction<T> => {
+      setData((prevData) => {
+        prevData = unsortRows<T>(prevData);
+        prevData.splice(index, 1);
+        for (let i = index; i < prevData.length; i++) {
+          // @ts-ignore
+          prevData[i]._rowy_ref.arrayTableData.index = i;
+        }
+        return sortRows(prevData, sorts);
+      });
+      return (rows) => {
+        rows.splice(index, 1);
+        return [...rows];
+      };
+    },
+    [setData, sorts]
+  );
+
+  const deleteField = useCallback(
+    (index: number, deleteFields?: string[]): UpdateFunction<T> => {
+      setData((prevData) => {
+        prevData = unsortRows(prevData);
+
+        if (deleteFields === undefined) return prevData;
+
+        prevData[index] = {
+          ...prevData[index],
+          ...deleteFields?.reduce(
+            (acc, field) => ({ ...acc, [field]: undefined }),
+            {}
+          ),
+        };
+
+        return sortRows(prevData, sorts);
+      });
+      return (rows) => {
+        if (deleteFields === undefined) return rows;
+
+        rows[index] = {
+          ...rows[index],
+          ...deleteFields?.reduce(
+            (acc, field) => ({ ...acc, [field]: undefined }),
+            {}
+          ),
+        };
+
+        return rows;
+      };
+    },
+    [setData, sorts]
+  );
+
+  const update = useCallback(
+    (index: number, update: Partial<T>): UpdateFunction<T> => {
+      setData((prevData) => {
+        prevData = unsortRows(prevData);
+        prevData[index] = {
+          ...prevData[index],
+          ...update,
+        };
+
+        return sortRows(prevData, sorts);
+      });
+
+      return (rows) => {
+        rows[index] = {
+          ...rows[index],
+          ...update,
+        };
+        return rows;
+      };
+    },
+    [setData, sorts]
+  );
+
+  return {
+    addRow: add,
+    deleteRow: _delete,
+    deleteField: deleteField,
+    updateTable: update,
+  };
+}
+
 /**
  * Create the Firestore document reference.
  * Put code in a function so the results can be compared by useMemoValue.

From ee5de5e0b727db91e594d11d9421c93ac53e2704 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 18 Apr 2023 16:18:32 +0530
Subject: [PATCH 18/36] update bug fix -> transaction complete

---
 src/atoms/tableScope/rowActions.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/atoms/tableScope/rowActions.ts b/src/atoms/tableScope/rowActions.ts
index 8a885d80..33da9dba 100644
--- a/src/atoms/tableScope/rowActions.ts
+++ b/src/atoms/tableScope/rowActions.ts
@@ -369,7 +369,13 @@ export const updateFieldAtom = atom(
     const tableRows = get(tableRowsAtom);
     const tableRowsLocal = get(tableRowsLocalAtom);
 
-    const row = find(tableRows, ["_rowy_ref.path", path]);
+    const row = find(
+      tableRows,
+      arrayTableData?.index !== undefined
+        ? ["_rowy_ref.arrayTableData.index", arrayTableData?.index]
+        : ["_rowy_ref.path", path]
+    );
+
     if (!row) throw new Error("Could not find row");
     const isLocalRow = Boolean(find(tableRowsLocal, ["_rowy_ref.path", path]));
 

From f5557f80726b057b4ca9ef818474f4b56f978d1d Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Wed, 19 Apr 2023 19:28:01 +0530
Subject: [PATCH 19/36] worked on requested changes

---
 src/components/ColumnModals/FieldsDropdown.tsx | 2 +-
 src/components/Table/EmptyTable.tsx            | 6 +++---
 src/components/TableToolbar/TableToolbar.tsx   | 8 ++++++--
 src/pages/Table/ProvidedArraySubTablePage.tsx  | 3 +--
 src/pages/Table/TablePage.tsx                  | 5 +----
 src/types/table.d.ts                           | 2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ColumnModals/FieldsDropdown.tsx b/src/components/ColumnModals/FieldsDropdown.tsx
index 2b2497e8..18c9425e 100644
--- a/src/components/ColumnModals/FieldsDropdown.tsx
+++ b/src/components/ColumnModals/FieldsDropdown.tsx
@@ -44,7 +44,7 @@ export default function FieldsDropdown({
     const requireCloudFunctionSetup =
       fieldConfig.requireCloudFunction && !projectSettings.rowyRunUrl;
     const requireCollectionTable =
-      tableSettings.isNotACollection === true &&
+      tableSettings.isCollection === false &&
       fieldConfig.requireCollectionTable === true;
     return {
       label: fieldConfig.name,
diff --git a/src/components/Table/EmptyTable.tsx b/src/components/Table/EmptyTable.tsx
index 1f14e2db..2301f43e 100644
--- a/src/components/Table/EmptyTable.tsx
+++ b/src/components/Table/EmptyTable.tsx
@@ -34,7 +34,7 @@ export default function EmptyTable() {
       : false;
   let contents = <></>;
 
-  if (!tableSettings.isNotACollection && hasData) {
+  if (tableSettings.isCollection !== false && hasData) {
     contents = (
       <>
         <div>
@@ -72,7 +72,7 @@ export default function EmptyTable() {
             Get started
           </Typography>
           <Typography>
-            {tableSettings.isNotACollection === true
+            {tableSettings.isCollection === false
               ? "There is no data in this Array Sub Table:"
               : "There is no data in the Firestore collection:"}
             <br />
@@ -84,7 +84,7 @@ export default function EmptyTable() {
           </Typography>
         </div>
         <Grid container spacing={1}>
-          {!tableSettings.isNotACollection && (
+          {tableSettings.isCollection !== false && (
             <>
               <Grid item xs>
                 <Typography paragraph>
diff --git a/src/components/TableToolbar/TableToolbar.tsx b/src/components/TableToolbar/TableToolbar.tsx
index d7d21fbe..8224c236 100644
--- a/src/components/TableToolbar/TableToolbar.tsx
+++ b/src/components/TableToolbar/TableToolbar.tsx
@@ -95,10 +95,14 @@ export default function TableToolbar({
         },
       }}
     >
-      {tableSettings.isNotACollection ? <AddRowArraySubTable /> : <AddRow />}
+      {tableSettings.isCollection === false ? (
+        <AddRowArraySubTable />
+      ) : (
+        <AddRow />
+      )}
       <div /> {/* Spacer */}
       <HiddenFields />
-      {tableSettings.isNotACollection ? (
+      {tableSettings.isCollection === false ? (
         <Button
           variant="outlined"
           color="primary"
diff --git a/src/pages/Table/ProvidedArraySubTablePage.tsx b/src/pages/Table/ProvidedArraySubTablePage.tsx
index 1e6e256c..56efae4b 100644
--- a/src/pages/Table/ProvidedArraySubTablePage.tsx
+++ b/src/pages/Table/ProvidedArraySubTablePage.tsx
@@ -74,7 +74,7 @@ export default function ProvidedArraySubTablePage() {
     collection: subTableCollection,
     id: subTableId,
     subTableKey,
-    isNotACollection: true,
+    isCollection: false,
     tableType: "primaryCollection" as "primaryCollection",
     name: sourceColumn?.name || subTableKey || "",
   };
@@ -139,7 +139,6 @@ export default function ProvidedArraySubTablePage() {
             <DebugAtoms scope={tableScope} />
             <ArraySubTableSourceFirestore />
             <TablePage
-              tableNotACollection={true}
               disabledTools={[
                 "import",
                 "export",
diff --git a/src/pages/Table/TablePage.tsx b/src/pages/Table/TablePage.tsx
index d8e85c85..86c7be54 100644
--- a/src/pages/Table/TablePage.tsx
+++ b/src/pages/Table/TablePage.tsx
@@ -54,9 +54,7 @@ export interface ITablePageProps {
   disableModals?: boolean;
   /** Disable side drawer */
   disableSideDrawer?: boolean;
-  /* Array table is not a collection */
-  tableNotACollection?: boolean;
-
+  /** list of table tools to be disabled */
   disabledTools?: TableToolsType;
 }
 
@@ -76,7 +74,6 @@ export interface ITablePageProps {
 export default function TablePage({
   disableModals,
   disableSideDrawer,
-  tableNotACollection,
   disabledTools,
 }: ITablePageProps) {
   const [userRoles] = useAtom(userRolesAtom, projectScope);
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 5a0281dc..660299af 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -75,7 +75,7 @@ export type TableSettings = {
   /** Roles that can see this table in the UI and navigate. Firestore Rules need to be set to give access to the data */
   roles: string[];
 
-  isNotACollection?: boolean;
+  isCollection?: boolean;
   subTableKey?: string | undefined;
   section: string;
   description?: string;

From 1c95fe6b50b98030dd1795b12cd1691857a3f76a Mon Sep 17 00:00:00 2001
From: shamsmosowi <shams.mosowi@gmail.com>
Date: Thu, 20 Apr 2023 10:46:16 +0200
Subject: [PATCH 20/36] allow single/multiselect to be copy/pasted

---
 src/components/Table/useMenuAction.tsx       | 16 +++++++++++++---
 src/components/fields/SingleSelect/index.tsx |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/useMenuAction.tsx b/src/components/Table/useMenuAction.tsx
index 516124d3..a2d84b05 100644
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -25,6 +25,8 @@ const SUPPORTED_TYPES = new Set([
   FieldType.richText,
   FieldType.url,
   FieldType.json,
+  FieldType.singleSelect,
+  FieldType.multiSelect,
 ]);
 
 export function useMenuAction(
@@ -136,14 +138,22 @@ export function useMenuAction(
 
   const checkEnabled = useCallback(
     (func: Function) => {
+      if (!selectedCol) {
+        return function () {
+          enqueueSnackbar(`No selected cell`, {
+            variant: "error",
+          });
+        };
+      }
+      const fieldType = getFieldType(selectedCol);
       return function () {
-        if (SUPPORTED_TYPES.has(selectedCol?.type)) {
+        if (SUPPORTED_TYPES.has(fieldType)) {
           return func();
         } else {
           enqueueSnackbar(
-            `${selectedCol?.type} field cannot be copied using keyboard shortcut`,
+            `${fieldType} field cannot be copied using keyboard shortcut`,
             {
-              variant: "info",
+              variant: "error",
             }
           );
         }
diff --git a/src/components/fields/SingleSelect/index.tsx b/src/components/fields/SingleSelect/index.tsx
index 83a23e3e..468d7f01 100644
--- a/src/components/fields/SingleSelect/index.tsx
+++ b/src/components/fields/SingleSelect/index.tsx
@@ -21,7 +21,7 @@ export const config: IFieldConfig = {
   type: FieldType.singleSelect,
   name: "Single Select",
   group: "Select",
-  dataType: "string | null",
+  dataType: "string",
   initialValue: null,
   initializable: true,
   icon: <SingleSelectIcon />,

From 40bb8a8158ef76e70bd990d1eff2fce968ed60c8 Mon Sep 17 00:00:00 2001
From: shamsmosowi <shams.mosowi@gmail.com>
Date: Thu, 20 Apr 2023 15:45:14 +0200
Subject: [PATCH 21/36] support nested field parent label

---
 src/components/fields/SubTable/utils.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/fields/SubTable/utils.ts b/src/components/fields/SubTable/utils.ts
index 6f6c7746..79ae5dc1 100644
--- a/src/components/fields/SubTable/utils.ts
+++ b/src/components/fields/SubTable/utils.ts
@@ -2,6 +2,7 @@ import { useLocation } from "react-router-dom";
 
 import { ROUTES } from "@src/constants/routes";
 import { ColumnConfig, TableRow, TableRowRef } from "@src/types/table";
+import get from "lodash-es/get";
 
 export const useSubTableData = (
   column: ColumnConfig,
@@ -9,8 +10,8 @@ export const useSubTableData = (
   _rowy_ref: TableRowRef
 ) => {
   const label = (column.config?.parentLabel ?? []).reduce((acc, curr) => {
-    if (acc !== "") return `${acc} - ${row[curr]}`;
-    else return row[curr];
+    if (acc !== "") return `${acc} - ${get(row, curr)}`;
+    else return get(row, curr);
   }, "");
 
   const documentCount: string = row[column.fieldName]?.count ?? "";

From 39f8926dae927da85c52249a30a018f1ea9e27ad Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Fri, 21 Apr 2023 14:01:35 +0530
Subject: [PATCH 22/36] description

---
 src/components/fields/ArraySubTable/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/fields/ArraySubTable/index.tsx b/src/components/fields/ArraySubTable/index.tsx
index 9e062b65..ce218b58 100644
--- a/src/components/fields/ArraySubTable/index.tsx
+++ b/src/components/fields/ArraySubTable/index.tsx
@@ -22,8 +22,7 @@ export const config: IFieldConfig = {
   initialValue: null,
   icon: <ArraySubTableIcon />,
   settings: Settings,
-  description:
-    "Connects to a sub-table in the current row. Also displays number of rows inside the sub-table. Max sub-table depth: 100.",
+  description: "Connects to a array-table in the current row.",
   TableCell: withRenderTableCell(DisplayCell, null, "focus", {
     usesRowData: true,
     disablePadding: true,

From d852459c9e84f12a861565112e711821dd68880b Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Fri, 21 Apr 2023 14:33:54 +0530
Subject: [PATCH 23/36] bug fix: meta getting to firstore

---
 .../useFirestoreDocAsCollectionWithAtom.ts    | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index b9f2650c..5f41f266 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -24,6 +24,7 @@ import {
   UpdateCollectionDocFunction,
 } from "@src/types/table";
 import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { omitRowyFields } from "@src/utils/table";
 
 type UpdateFunction<T> = (rows: T[]) => T[];
 
@@ -293,22 +294,28 @@ function useAlterArrayTable<T>({
 
   const add = useCallback(
     (addTo: "top" | "bottom", base?: T): UpdateFunction<T> => {
-      const newRow = (i: number, noMeta?: boolean) => {
-        const meta = noMeta
-          ? {}
-          : {
-              _rowy_ref: {
-                id: doc(firebaseDb, path).id,
-                path: doc(firebaseDb, path).path,
-                arrayTableData: {
-                  index: i,
-                  parentField: fieldName,
-                },
-              },
-            };
+      if (base) {
+        base = omitRowyFields(base);
+      }
+      const newRow = (i: number, meta: boolean) => {
+        const _meta = {
+          _rowy_ref: {
+            id: doc(firebaseDb, path).id,
+            path: doc(firebaseDb, path).path,
+            arrayTableData: {
+              index: i,
+              parentField: fieldName,
+            },
+          },
+        };
+        if (meta === true) {
+          return {
+            ...(base ?? {}),
+            ..._meta,
+          } as T;
+        }
         return {
           ...(base ?? {}),
-          ...meta,
         } as T;
       };
 
@@ -316,7 +323,7 @@ function useAlterArrayTable<T>({
         prevData = unsortRows(prevData);
 
         if (addTo === "bottom") {
-          prevData.push(newRow(prevData.length));
+          prevData.push(newRow(prevData.length, true));
         } else {
           const modifiedPrevData = prevData.map((row: any, i: number) => {
             return {
@@ -330,16 +337,17 @@ function useAlterArrayTable<T>({
               },
             };
           });
-          prevData = [newRow(0), ...modifiedPrevData];
+          prevData = [newRow(0, true), ...modifiedPrevData];
         }
         return sortRows(prevData, sorts);
       });
 
       return (rows) => {
         if (addTo === "bottom") {
-          rows.push(newRow(rows.length, true));
+          console.log("bottom", newRow(rows.length, false));
+          rows.push(newRow(rows.length, false));
         } else {
-          rows = [newRow(0, true), ...rows];
+          rows = [newRow(0, false), ...rows];
         }
         return rows;
       };

From cbabc8d0c2dde15abffce6f178e00bec5b637bba Mon Sep 17 00:00:00 2001
From: shamsmosowi <shams.mosowi@gmail.com>
Date: Mon, 24 Apr 2023 23:30:57 +0200
Subject: [PATCH 24/36] array subTable

---
 src/components/fields/ArraySubTable/index.tsx | 6 +++---
 src/components/fields/GeoPoint/index.tsx      | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/fields/ArraySubTable/index.tsx b/src/components/fields/ArraySubTable/index.tsx
index ce218b58..5abf2238 100644
--- a/src/components/fields/ArraySubTable/index.tsx
+++ b/src/components/fields/ArraySubTable/index.tsx
@@ -12,17 +12,17 @@ const SideDrawerField = lazy(
     )
 );
 const Settings = lazy(
-  () => import("./Settings" /* webpackChunkName: "Settings-ArraySubtable" */)
+  () => import("./Settings" /* webpackChunkName: "Settings-ArraySubTable" */)
 );
 export const config: IFieldConfig = {
   type: FieldType.arraySubTable,
-  name: "Array-Sub-Table",
+  name: "Array SubTable (Alpha)",
   group: "Connection",
   dataType: "undefined",
   initialValue: null,
   icon: <ArraySubTableIcon />,
   settings: Settings,
-  description: "Connects to a array-table in the current row.",
+  description: "A sub-table representing an array of objects in the row",
   TableCell: withRenderTableCell(DisplayCell, null, "focus", {
     usesRowData: true,
     disablePadding: true,
diff --git a/src/components/fields/GeoPoint/index.tsx b/src/components/fields/GeoPoint/index.tsx
index 3f881b94..e1d04a23 100644
--- a/src/components/fields/GeoPoint/index.tsx
+++ b/src/components/fields/GeoPoint/index.tsx
@@ -1,5 +1,4 @@
 import { lazy } from "react";
-import { GeoPoint } from "firebase/firestore";
 import { IFieldConfig, FieldType } from "@src/components/fields/types";
 import withRenderTableCell from "@src/components/Table/TableCell/withRenderTableCell";
 
@@ -15,7 +14,7 @@ const SideDrawerField = lazy(
 
 export const config: IFieldConfig = {
   type: FieldType.geoPoint,
-  name: "GeoPoint (Alpha)",
+  name: "GeoPoint",
   group: "Numeric",
   dataType: "{latitude:number; longitude:number}",
   initialValue: {},

From 170687ed272763abf011eab9a6a0237e2d58c5c9 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 25 Apr 2023 18:31:19 +0530
Subject: [PATCH 25/36] fixed - could not find row

---
 .../SideDrawer/SideDrawerFields.tsx           | 45 ++++++++++++-------
 src/components/Table/useMenuAction.tsx        |  4 +-
 .../useFirestoreDocAsCollectionWithAtom.ts    |  6 ++-
 src/types/table.d.ts                          |  2 +-
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index 2f1e0b8a..62a4c02e 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -72,7 +72,7 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
           value,
           deleteField: undefined,
           arrayTableData: {
-            index: selectedCell.arrayIndex ?? 0,
+            index: selectedCell.arrayIndex,
           },
         });
 
@@ -92,6 +92,7 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
   const fields = showHiddenFields
     ? tableColumnsOrdered
     : tableColumnsOrdered.filter((f) => !userDocHiddenFields.includes(f.key));
+  console.log({ row, fields });
 
   // Scroll to selected column
   const selectedColumnKey = selectedCell?.columnKey;
@@ -116,22 +117,32 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
     <Stack spacing={3}>
       <SaveState state={saveState} />
 
-      {fields.map((field, i) => (
-        <MemoizedField
-          key={field.key ?? i}
-          field={field}
-          disabled={Boolean(
-            field.editable === false ||
-              (tableSettings.readOnly && !userRoles.includes("ADMIN"))
-          )}
-          hidden={userDocHiddenFields.includes(field.key)}
-          _rowy_ref={row._rowy_ref}
-          value={get(row, field.fieldName)}
-          onDirty={onDirty}
-          onSubmit={onSubmit}
-          isDirty={dirtyField === field.key}
-        />
-      ))}
+      {fields.map((field, i) => {
+        // console.log({
+        //   field,
+        //   r: row._rowy_ref,
+        // });
+        //   u: get(row, field.fieldName),
+        //   p: row[field.fieldName],
+        //   k: field.key,
+        // });
+        return (
+          <MemoizedField
+            key={field.key + i}
+            field={field}
+            disabled={Boolean(
+              field.editable === false ||
+                (tableSettings.readOnly && !userRoles.includes("ADMIN"))
+            )}
+            hidden={userDocHiddenFields.includes(field.key)}
+            _rowy_ref={row._rowy_ref}
+            value={row[field.fieldName] || undefined}
+            onDirty={onDirty}
+            onSubmit={onSubmit}
+            isDirty={dirtyField === field.key}
+          />
+        );
+      })}
 
       <FieldWrapper
         type="debug"
diff --git a/src/components/Table/useMenuAction.tsx b/src/components/Table/useMenuAction.tsx
index 517f06ff..cc10cb38 100644
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -74,7 +74,7 @@ export function useMenuAction(
           value: undefined,
           deleteField: true,
           arrayTableData: {
-            index: selectedCell.arrayIndex ?? 0,
+            index: selectedCell.arrayIndex,
           },
         });
     } catch (error) {
@@ -121,7 +121,7 @@ export function useMenuAction(
         fieldName: selectedCol.fieldName,
         value: parsed,
         arrayTableData: {
-          index: selectedCell.arrayIndex ?? 0,
+          index: selectedCell.arrayIndex,
         },
       });
     } catch (error) {
diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index 5f41f266..1d0499a0 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -201,7 +201,7 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
   useEffect(() => {
     if (deleteDocAtom) {
       setDeleteRowAtom(() => (_: string, options?: ArrayTableRowData) => {
-        if (!options) return;
+        if (!options || !options.index) return;
         const updateFunction = deleteRow(options.index);
         return setRows(updateFunction);
       });
@@ -231,11 +231,15 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
             if (options === undefined) return;
 
             const deleteRowFields = () => {
+              if (options.index === undefined) return;
+
               const updateFunction = deleteField(options.index, deleteFields);
               return setRows(updateFunction);
             };
 
             const updateRowValues = () => {
+              if (options.index === undefined) return;
+
               const updateFunction = updateTable(options.index, update);
               return setRows(updateFunction);
             };
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 269ea0c4..3ed4b7c3 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -212,7 +212,7 @@ export type TableSort = {
 };
 
 export type ArrayTableRowData = {
-  index: number;
+  index?: number;
   parentField?: string;
   operation?: ArrayTableOperations;
 };

From 6839c1ea0f1a815834944e5ce564b564476a3c4c Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 25 Apr 2023 18:43:52 +0530
Subject: [PATCH 26/36] removed logs

---
 src/components/SideDrawer/SideDrawerFields.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index 62a4c02e..e480ef78 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -92,7 +92,6 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
   const fields = showHiddenFields
     ? tableColumnsOrdered
     : tableColumnsOrdered.filter((f) => !userDocHiddenFields.includes(f.key));
-  console.log({ row, fields });
 
   // Scroll to selected column
   const selectedColumnKey = selectedCell?.columnKey;
@@ -118,14 +117,6 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
       <SaveState state={saveState} />
 
       {fields.map((field, i) => {
-        // console.log({
-        //   field,
-        //   r: row._rowy_ref,
-        // });
-        //   u: get(row, field.fieldName),
-        //   p: row[field.fieldName],
-        //   k: field.key,
-        // });
         return (
           <MemoizedField
             key={field.key + i}

From 0d9c56487f6d7ddf395dbc4216f019273637ec15 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 25 Apr 2023 18:50:07 +0530
Subject: [PATCH 27/36] get(row, field.fieldName)

---
 .../SideDrawer/SideDrawerFields.tsx           | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index e480ef78..25ae9aad 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -116,24 +116,22 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
     <Stack spacing={3}>
       <SaveState state={saveState} />
 
-      {fields.map((field, i) => {
-        return (
-          <MemoizedField
-            key={field.key + i}
-            field={field}
-            disabled={Boolean(
-              field.editable === false ||
-                (tableSettings.readOnly && !userRoles.includes("ADMIN"))
-            )}
-            hidden={userDocHiddenFields.includes(field.key)}
-            _rowy_ref={row._rowy_ref}
-            value={row[field.fieldName] || undefined}
-            onDirty={onDirty}
-            onSubmit={onSubmit}
-            isDirty={dirtyField === field.key}
-          />
-        );
-      })}
+      {fields.map((field, i) => (
+        <MemoizedField
+          key={field.key ?? i}
+          field={field}
+          disabled={Boolean(
+            field.editable === false ||
+              (tableSettings.readOnly && !userRoles.includes("ADMIN"))
+          )}
+          hidden={userDocHiddenFields.includes(field.key)}
+          _rowy_ref={row._rowy_ref}
+          value={get(row, field.fieldName)}
+          onDirty={onDirty}
+          onSubmit={onSubmit}
+          isDirty={dirtyField === field.key}
+        />
+      ))}
 
       <FieldWrapper
         type="debug"

From d302dace8516719435a7827878156e07621c6cb0 Mon Sep 17 00:00:00 2001
From: shamsmosowi <shams.mosowi@gmail.com>
Date: Sat, 29 Apr 2023 21:02:47 +0200
Subject: [PATCH 28/36] remove comment for function body restriction

---
 .../ColumnConfigModal/DefaultValueInput.tsx   |  2 -
 .../TableModals/ExtensionsModal/utils.ts      | 48 +++++++++----------
 src/components/fields/Derivative/Settings.tsx |  2 -
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx b/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
index b5e3dc05..e4446361 100644
--- a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
+++ b/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
@@ -54,11 +54,9 @@ function CodeEditor({ type, column, handleChange }: ICodeEditorProps) {
     dynamicValueFn = column.config?.defaultValue?.dynamicValueFn;
   } else if (column.config?.defaultValue?.script) {
     dynamicValueFn = `const dynamicValueFn: DefaultValue = async ({row,ref,db,storage,auth,logging})=>{
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
   logging.log("dynamicValueFn started")
   
   ${column.config?.defaultValue.script}
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`;
   } else {
     dynamicValueFn = `// Import any NPM package needed
diff --git a/src/components/TableModals/ExtensionsModal/utils.ts b/src/components/TableModals/ExtensionsModal/utils.ts
index 4a2cbbf1..8254ff42 100644
--- a/src/components/TableModals/ExtensionsModal/utils.ts
+++ b/src/components/TableModals/ExtensionsModal/utils.ts
@@ -62,7 +62,7 @@ export const triggerTypes: ExtensionTrigger[] = ["create", "update", "delete"];
 
 const extensionBodyTemplate = {
   task: `const extensionBody: TaskBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   // Import any NPM package needed
@@ -90,10 +90,10 @@ const extensionBodyTemplate = {
       else console.error(result)
     })
   */
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   docSync: `const extensionBody: DocSyncBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   return ({
@@ -101,20 +101,20 @@ const extensionBodyTemplate = {
     row: row,    // object of data to sync, usually the row itself
     targetPath: "",  // fill in the path here
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   historySnapshot: `const extensionBody: HistorySnapshotBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   return ({
     trackedFields: [],    // a list of string of column names
     collectionId: "historySnapshots",    // optionally change the sub-collection id of where the history snapshots are stored
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   algoliaIndex: `const extensionBody: AlgoliaIndexBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   return ({
@@ -123,10 +123,10 @@ const extensionBodyTemplate = {
     index: "",    // algolia index to sync to
     objectID: ref.id,    // algolia object ID, ref.id is one possible choice
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   meiliIndex: `const extensionBody: MeiliIndexBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   return({
@@ -135,10 +135,10 @@ const extensionBodyTemplate = {
     index: "",    // meili search index to sync to
     objectID: ref.id,    // meili search object ID, ref.id is one possible choice
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   bigqueryIndex: `const extensionBody: BigqueryIndexBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   return ({
@@ -147,10 +147,10 @@ const extensionBodyTemplate = {
     index: "",    // bigquery dataset to sync to
     objectID: ref.id,    // bigquery object ID, ref.id is one possible choice
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   slackMessage: `const extensionBody: SlackMessageBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   // Import any NPM package needed
@@ -162,10 +162,10 @@ const extensionBodyTemplate = {
     text: "",    // the text parameter to pass in to slack api
     attachments: [],    // the attachments parameter to pass in to slack api
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   sendgridEmail: `const extensionBody: SendgridEmailBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   // Import any NPM package needed
@@ -187,10 +187,10 @@ const extensionBodyTemplate = {
       // add any other custom args you want to pass to sendgrid events here
     },
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   apiCall: `const extensionBody: ApiCallBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   // Import any NPM package needed
@@ -202,10 +202,10 @@ const extensionBodyTemplate = {
     method: "",
     callback: ()=>{},
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   twilioMessage: `const extensionBody: TwilioMessageBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   // Import any NPM package needed
@@ -218,10 +218,10 @@ const extensionBodyTemplate = {
     to: "", // recipient phone number - eg: row.<fieldname>
     body: "Hi there!" // message text
   })
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
   pushNotification: `const extensionBody: PushNotificationBody = async({row, db, change, ref, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("extensionBody started")
   
   // Import any NPM package needed
@@ -259,7 +259,7 @@ const extensionBodyTemplate = {
     // topic: topicName, // add topic send to subscribers
     // token: FCMtoken // add FCM token to send to specific user
   }]
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
 };
 
@@ -276,11 +276,11 @@ export function emptyExtensionObject(
     requiredFields: [],
     trackedFields: [],
     conditions: `const condition: Condition = async({row, change, logging}) => {
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+ 
   logging.log("condition started")
   
   return true;
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
+  
 }`,
     lastEditor: user,
   };
diff --git a/src/components/fields/Derivative/Settings.tsx b/src/components/fields/Derivative/Settings.tsx
index 0ca5dd51..5734462a 100644
--- a/src/components/fields/Derivative/Settings.tsx
+++ b/src/components/fields/Derivative/Settings.tsx
@@ -66,14 +66,12 @@ export default function Settings({
     ? config.derivativeFn
     : config?.script
     ? `const derivative:Derivative = async ({row,ref,db,storage,auth,logging})=>{
-  // WRITE YOUR CODE ONLY BELOW THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
   logging.log("derivative started")
   
   // Import any NPM package needed
   // const lodash = require('lodash');
   
   ${config.script.replace(/utilFns.getSecret/g, "rowy.secrets.get")}
-  // WRITE YOUR CODE ONLY ABOVE THIS LINE. DO NOT WRITE CODE/COMMENTS OUTSIDE THE FUNCTION BODY
 }`
     : `// Import any NPM package needed
 // import _ from "lodash";

From b7d661eaef0092554ac2be3dd205df9b25bfc497 Mon Sep 17 00:00:00 2001
From: mnmt <mnmtsnghh@gmail.com>
Date: Sun, 30 Apr 2023 14:58:40 +0530
Subject: [PATCH 29/36] add hotkey and right-click context copy functionality
 to fields

---
 .../BasicCellContextMenuActions.tsx           |  17 +-
 src/components/Table/useMenuAction.tsx        | 193 ++++++++++++++++--
 src/components/fields/Array/index.tsx         |   3 +
 src/components/fields/Checkbox/index.tsx      |   3 +
 src/components/fields/Code/index.tsx          |   3 +
 src/components/fields/Color/index.tsx         |   3 +
 src/components/fields/CreatedAt/index.tsx     |   2 +
 src/components/fields/CreatedBy/index.tsx     |   2 +
 src/components/fields/Date/index.tsx          |   2 +
 src/components/fields/DateTime/index.tsx      |   2 +
 src/components/fields/Duration/index.tsx      |   2 +
 .../fields/File/ContextMenuActions.tsx        |  83 ++++++++
 src/components/fields/File/index.tsx          |   2 +
 src/components/fields/GeoPoint/index.tsx      |   2 +
 src/components/fields/Markdown/index.tsx      |   2 +
 src/components/fields/MultiSelect/index.tsx   |   2 +
 src/components/fields/Rating/index.tsx        |   2 +
 src/components/fields/SingleSelect/index.tsx  |   2 +
 src/components/fields/Slider/index.tsx        |   2 +
 src/components/fields/UpdatedAt/index.tsx     |   2 +
 src/components/fields/UpdatedBy/index.tsx     |   3 +
 21 files changed, 312 insertions(+), 22 deletions(-)
 create mode 100644 src/components/fields/File/ContextMenuActions.tsx

diff --git a/src/components/Table/ContextMenu/BasicCellContextMenuActions.tsx b/src/components/Table/ContextMenu/BasicCellContextMenuActions.tsx
index 25b6ce0f..02d89887 100644
--- a/src/components/Table/ContextMenu/BasicCellContextMenuActions.tsx
+++ b/src/components/Table/ContextMenu/BasicCellContextMenuActions.tsx
@@ -3,12 +3,19 @@ import { Copy as CopyCells } from "@src/assets/icons";
 import Paste from "@mui/icons-material/ContentPaste";
 import { IFieldConfig } from "@src/components/fields/types";
 import { useMenuAction } from "@src/components/Table/useMenuAction";
+import { useAtom } from "jotai";
+import { tableSchemaAtom, tableScope } from "@src/atoms/tableScope";
+
+import { SUPPORTED_TYPES_PASTE } from "@src/components/Table/useMenuAction";
 
 // TODO: Remove this and add `handlePaste` function to column config
 export const BasicContextMenuActions: IFieldConfig["contextMenuActions"] = (
   selectedCell,
   reset
 ) => {
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+  const selectedCol = tableSchema.columns?.[selectedCell.columnKey];
+
   const handleClose = async () => await reset?.();
   const { handleCopy, handlePaste, cellValue } = useMenuAction(
     selectedCell,
@@ -24,9 +31,17 @@ export const BasicContextMenuActions: IFieldConfig["contextMenuActions"] = (
       disabled:
         cellValue === undefined || cellValue === null || cellValue === "",
     },
-    { label: "Paste", icon: <Paste />, onClick: handlePaste },
   ];
 
+  if (SUPPORTED_TYPES_PASTE.has(selectedCol?.type)) {
+    contextMenuActions.push({
+      label: "Paste",
+      icon: <Paste />,
+      onClick: handlePaste,
+      disabled: false,
+    });
+  }
+
   return contextMenuActions;
 };
 
diff --git a/src/components/Table/useMenuAction.tsx b/src/components/Table/useMenuAction.tsx
index cc10cb38..2ef19c1b 100644
--- a/src/components/Table/useMenuAction.tsx
+++ b/src/components/Table/useMenuAction.tsx
@@ -15,18 +15,66 @@ import { ColumnConfig } from "@src/types/table";
 
 import { FieldType } from "@src/constants/fields";
 
-const SUPPORTED_TYPES = new Set([
+import { format } from "date-fns";
+import { DATE_FORMAT, DATE_TIME_FORMAT } from "@src/constants/dates";
+import { isDate, isFunction } from "lodash-es";
+import { getDurationString } from "@src/components/fields/Duration/utils";
+
+export const SUPPORTED_TYPES_COPY = new Set([
+  // TEXT
   FieldType.shortText,
   FieldType.longText,
-  FieldType.number,
-  FieldType.email,
-  FieldType.percentage,
-  FieldType.phone,
   FieldType.richText,
+  FieldType.email,
+  FieldType.phone,
   FieldType.url,
-  FieldType.json,
+  // SELECT
   FieldType.singleSelect,
   FieldType.multiSelect,
+  // NUMERIC
+  FieldType.checkbox,
+  FieldType.number,
+  FieldType.percentage,
+  FieldType.rating,
+  FieldType.slider,
+  FieldType.color,
+  FieldType.geoPoint,
+  // DATE & TIME
+  FieldType.date,
+  FieldType.dateTime,
+  FieldType.duration,
+  // FILE
+  FieldType.image,
+  FieldType.file,
+  // CODE
+  FieldType.json,
+  FieldType.code,
+  FieldType.markdown,
+  FieldType.array,
+  // AUDIT
+  FieldType.createdBy,
+  FieldType.updatedBy,
+  FieldType.createdAt,
+  FieldType.updatedAt,
+]);
+
+export const SUPPORTED_TYPES_PASTE = new Set([
+  // TEXT
+  FieldType.shortText,
+  FieldType.longText,
+  FieldType.richText,
+  FieldType.email,
+  FieldType.phone,
+  FieldType.url,
+  // NUMERIC
+  FieldType.number,
+  FieldType.percentage,
+  FieldType.rating,
+  FieldType.slider,
+  // CODE
+  FieldType.json,
+  FieldType.code,
+  FieldType.markdown,
 ]);
 
 export function useMenuAction(
@@ -37,15 +85,14 @@ export function useMenuAction(
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
   const updateField = useSetAtom(updateFieldAtom, tableScope);
-  const [cellValue, setCellValue] = useState<string | undefined>();
+  const [cellValue, setCellValue] = useState<any>();
   const [selectedCol, setSelectedCol] = useState<ColumnConfig>();
 
   const handleCopy = useCallback(async () => {
     try {
       if (cellValue !== undefined && cellValue !== null && cellValue !== "") {
-        await navigator.clipboard.writeText(
-          typeof cellValue === "object" ? JSON.stringify(cellValue) : cellValue
-        );
+        const value = getValue(cellValue);
+        await navigator.clipboard.writeText(value);
         enqueueSnackbar("Copied");
       } else {
         await navigator.clipboard.writeText("");
@@ -58,16 +105,22 @@ export function useMenuAction(
 
   const handleCut = useCallback(async () => {
     try {
-      if (!selectedCell || !selectedCol || !cellValue) return;
+      if (!selectedCell || !selectedCol) return;
       if (cellValue !== undefined && cellValue !== null && cellValue !== "") {
-        await navigator.clipboard.writeText(
-          typeof cellValue === "object" ? JSON.stringify(cellValue) : cellValue
-        );
+        const value = getValue(cellValue);
+        await navigator.clipboard.writeText(value);
         enqueueSnackbar("Copied");
       } else {
         await navigator.clipboard.writeText("");
       }
-      if (cellValue !== undefined)
+      if (
+        cellValue !== undefined &&
+        selectedCol.type !== FieldType.createdAt &&
+        selectedCol.type !== FieldType.updatedAt &&
+        selectedCol.type !== FieldType.createdBy &&
+        selectedCol.type !== FieldType.updatedBy &&
+        selectedCol.type !== FieldType.checkbox
+      )
         updateField({
           path: selectedCell.path,
           fieldName: selectedCol.fieldName,
@@ -116,6 +169,22 @@ export function useMenuAction(
           parsed = JSON.parse(text);
           break;
       }
+
+      if (selectedCol.type === FieldType.slider) {
+        if (parsed < selectedCol.config?.min) parsed = selectedCol.config?.min;
+        else if (parsed > selectedCol.config?.max)
+          parsed = selectedCol.config?.max;
+      }
+
+      if (selectedCol.type === FieldType.rating) {
+        if (parsed < 0) parsed = 0;
+        if (parsed > (selectedCol.config?.max || 5))
+          parsed = selectedCol.config?.max || 5;
+      }
+
+      if (selectedCol.type === FieldType.percentage) {
+        parsed = parsed / 100;
+      }
       updateField({
         path: selectedCell.path,
         fieldName: selectedCol.fieldName,
@@ -149,7 +218,7 @@ export function useMenuAction(
     setCellValue(get(selectedRow, selectedCol.fieldName));
   }, [selectedCell, tableSchema, tableRows]);
 
-  const checkEnabled = useCallback(
+  const checkEnabledCopy = useCallback(
     (func: Function) => {
       if (!selectedCol) {
         return function () {
@@ -160,11 +229,34 @@ export function useMenuAction(
       }
       const fieldType = getFieldType(selectedCol);
       return function () {
-        if (SUPPORTED_TYPES.has(fieldType)) {
+        if (SUPPORTED_TYPES_COPY.has(fieldType)) {
+          return func();
+        } else {
+          enqueueSnackbar(`${fieldType} field cannot be copied`, {
+            variant: "error",
+          });
+        }
+      };
+    },
+    [enqueueSnackbar, selectedCol?.type]
+  );
+
+  const checkEnabledPaste = useCallback(
+    (func: Function) => {
+      if (!selectedCol) {
+        return function () {
+          enqueueSnackbar(`No selected cell`, {
+            variant: "error",
+          });
+        };
+      }
+      const fieldType = getFieldType(selectedCol);
+      return function () {
+        if (SUPPORTED_TYPES_PASTE.has(fieldType)) {
           return func();
         } else {
           enqueueSnackbar(
-            `${fieldType} field cannot be copied using keyboard shortcut`,
+            `${fieldType} field does not support paste functionality`,
             {
               variant: "error",
             }
@@ -175,10 +267,69 @@ export function useMenuAction(
     [enqueueSnackbar, selectedCol?.type]
   );
 
+  const getValue = useCallback(
+    (cellValue: any) => {
+      switch (selectedCol?.type) {
+        case FieldType.percentage:
+          return cellValue * 100;
+        case FieldType.json:
+        case FieldType.color:
+        case FieldType.geoPoint:
+          return JSON.stringify(cellValue);
+        case FieldType.date:
+          if (
+            (!!cellValue && isFunction(cellValue.toDate)) ||
+            isDate(cellValue)
+          ) {
+            try {
+              return format(
+                isDate(cellValue) ? cellValue : cellValue.toDate(),
+                selectedCol.config?.format || DATE_FORMAT
+              );
+            } catch (e) {
+              return;
+            }
+          }
+          return;
+        case FieldType.dateTime:
+        case FieldType.createdAt:
+        case FieldType.updatedAt:
+          if (
+            (!!cellValue && isFunction(cellValue.toDate)) ||
+            isDate(cellValue)
+          ) {
+            try {
+              return format(
+                isDate(cellValue) ? cellValue : cellValue.toDate(),
+                selectedCol.config?.format || DATE_TIME_FORMAT
+              );
+            } catch (e) {
+              return;
+            }
+          }
+          return;
+        case FieldType.duration:
+          return getDurationString(
+            cellValue.start.toDate(),
+            cellValue.end.toDate()
+          );
+        case FieldType.image:
+        case FieldType.file:
+          return cellValue[0].downloadURL;
+        case FieldType.createdBy:
+        case FieldType.updatedBy:
+          return cellValue.displayName;
+        default:
+          return cellValue;
+      }
+    },
+    [cellValue, selectedCol]
+  );
+
   return {
-    handleCopy: checkEnabled(handleCopy),
-    handleCut: checkEnabled(handleCut),
-    handlePaste: handlePaste,
+    handleCopy: checkEnabledCopy(handleCopy),
+    handleCut: checkEnabledCopy(handleCut),
+    handlePaste: checkEnabledPaste(handlePaste),
     cellValue,
   };
 }
diff --git a/src/components/fields/Array/index.tsx b/src/components/fields/Array/index.tsx
index d00722ed..fe00851e 100644
--- a/src/components/fields/Array/index.tsx
+++ b/src/components/fields/Array/index.tsx
@@ -6,6 +6,8 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import DisplayCell from "./DisplayCell";
 
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
+
 const SideDrawerField = lazy(
   () =>
     import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-Array" */)
@@ -26,5 +28,6 @@ export const config: IFieldConfig = {
   }),
   SideDrawerField,
   requireConfiguration: false,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Checkbox/index.tsx b/src/components/fields/Checkbox/index.tsx
index 24039351..4cbfc988 100644
--- a/src/components/fields/Checkbox/index.tsx
+++ b/src/components/fields/Checkbox/index.tsx
@@ -5,6 +5,8 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 import CheckboxIcon from "@mui/icons-material/ToggleOnOutlined";
 import DisplayCell from "./DisplayCell";
 
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
+
 const EditorCell = lazy(
   () => import("./EditorCell" /* webpackChunkName: "EditorCell-Checkbox" */)
 );
@@ -42,5 +44,6 @@ export const config: IFieldConfig = {
     defaultValue: false,
   },
   SideDrawerField,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Code/index.tsx b/src/components/fields/Code/index.tsx
index d3ca01ec..b075ff64 100644
--- a/src/components/fields/Code/index.tsx
+++ b/src/components/fields/Code/index.tsx
@@ -5,6 +5,8 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 import CodeIcon from "@mui/icons-material/Code";
 import DisplayCell from "./DisplayCell";
 
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
+
 const Settings = lazy(
   () => import("./Settings" /* webpackChunkName: "Settings-Code" */)
 );
@@ -31,5 +33,6 @@ export const config: IFieldConfig = {
   }),
   SideDrawerField,
   settings: Settings,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Color/index.tsx b/src/components/fields/Color/index.tsx
index 77989604..c5c95fa1 100644
--- a/src/components/fields/Color/index.tsx
+++ b/src/components/fields/Color/index.tsx
@@ -7,6 +7,8 @@ import ColorIcon from "@mui/icons-material/Colorize";
 import DisplayCell from "./DisplayCell";
 import { filterOperators, valueFormatter } from "./filters";
 
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
+
 const EditorCell = lazy(
   () => import("./EditorCell" /* webpackChunkName: "EditorCell-Color" */)
 );
@@ -41,5 +43,6 @@ export const config: IFieldConfig = {
       return null;
     }
   },
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/CreatedAt/index.tsx b/src/components/fields/CreatedAt/index.tsx
index a6dab174..836206b1 100644
--- a/src/components/fields/CreatedAt/index.tsx
+++ b/src/components/fields/CreatedAt/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import { CreatedAt as CreatedAtIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -28,5 +29,6 @@ export const config: IFieldConfig = {
   SideDrawerField,
   settings: Settings,
   requireCollectionTable: true,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/CreatedBy/index.tsx b/src/components/fields/CreatedBy/index.tsx
index 257da871..39fbb8fb 100644
--- a/src/components/fields/CreatedBy/index.tsx
+++ b/src/components/fields/CreatedBy/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import { CreatedBy as CreatedByIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -29,5 +30,6 @@ export const config: IFieldConfig = {
   SideDrawerField,
   settings: Settings,
   requireCollectionTable: true,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Date/index.tsx b/src/components/fields/Date/index.tsx
index 8a126c22..b0391d9b 100644
--- a/src/components/fields/Date/index.tsx
+++ b/src/components/fields/Date/index.tsx
@@ -7,6 +7,7 @@ import { DATE_FORMAT } from "@src/constants/dates";
 import DateIcon from "@mui/icons-material/TodayOutlined";
 import DisplayCell from "./DisplayCell";
 import { filterOperators, valueFormatter } from "./filters";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const EditorCell = lazy(
   () => import("./EditorCell" /* webpackChunkName: "EditorCell-Date" */)
@@ -42,6 +43,7 @@ export const config: IFieldConfig = {
       return format(value.toDate(), DATE_FORMAT);
     }
   },
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
 
diff --git a/src/components/fields/DateTime/index.tsx b/src/components/fields/DateTime/index.tsx
index ea0305c8..9ff04988 100644
--- a/src/components/fields/DateTime/index.tsx
+++ b/src/components/fields/DateTime/index.tsx
@@ -7,6 +7,7 @@ import { DATE_TIME_FORMAT } from "@src/constants/dates";
 import DateTimeIcon from "@mui/icons-material/AccessTime";
 import DisplayCell from "./DisplayCell";
 import { filterOperators, valueFormatter } from "./filters";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const EditorCell = lazy(
   () => import("./EditorCell" /* webpackChunkName: "EditorCell-DateTime" */)
@@ -54,6 +55,7 @@ export const config: IFieldConfig = {
       return format(value.toDate(), DATE_TIME_FORMAT);
     }
   },
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
 
diff --git a/src/components/fields/Duration/index.tsx b/src/components/fields/Duration/index.tsx
index 225906ba..40dceaee 100644
--- a/src/components/fields/Duration/index.tsx
+++ b/src/components/fields/Duration/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import DurationIcon from "@mui/icons-material/TimerOutlined";
 import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -24,5 +25,6 @@ export const config: IFieldConfig = {
     popoverProps: { PaperProps: { sx: { p: 1 } } },
   }),
   SideDrawerField,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/File/ContextMenuActions.tsx b/src/components/fields/File/ContextMenuActions.tsx
new file mode 100644
index 00000000..f7d84db2
--- /dev/null
+++ b/src/components/fields/File/ContextMenuActions.tsx
@@ -0,0 +1,83 @@
+import { useAtom } from "jotai";
+import { find, get } from "lodash-es";
+import { useSnackbar } from "notistack";
+
+import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
+import { Copy } from "@src/assets/icons";
+import { FileIcon } from ".";
+
+import {
+  tableScope,
+  tableSchemaAtom,
+  tableRowsAtom,
+} from "@src/atoms/tableScope";
+import { IFieldConfig } from "@src/components/fields/types";
+
+export interface IContextMenuActions {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+export const ContextMenuActions: IFieldConfig["contextMenuActions"] = (
+  selectedCell,
+  reset
+) => {
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+  const [tableRows] = useAtom(tableRowsAtom, tableScope);
+  const { enqueueSnackbar } = useSnackbar();
+
+  const selectedCol = tableSchema.columns?.[selectedCell.columnKey];
+  if (!selectedCol) return [];
+
+  const selectedRow = find(tableRows, ["_rowy_ref.path", selectedCell.path]);
+  const cellValue = get(selectedRow, selectedCol.fieldName) || [];
+
+  const isEmpty =
+    cellValue === "" ||
+    cellValue === null ||
+    cellValue === undefined ||
+    cellValue.length === 0;
+  const isSingleValue = isEmpty || cellValue?.length === 1;
+
+  const handleCopyFileURL = (fileObj: RowyFile) => () => {
+    navigator.clipboard.writeText(fileObj.downloadURL);
+    enqueueSnackbar("Copied file URL");
+    reset();
+  };
+  const handleViewFile = (fileObj: RowyFile) => () => {
+    window.open(fileObj.downloadURL, "_blank");
+    reset();
+  };
+
+  return [
+    {
+      label: "Copy file URL",
+      icon: <Copy />,
+      onClick: isSingleValue ? handleCopyFileURL(cellValue[0]) : undefined,
+      disabled: isEmpty,
+      subItems: isSingleValue
+        ? []
+        : cellValue.map((fileObj: RowyFile, index: number) => ({
+            label: fileObj.name || "File " + (index + 1),
+            icon: <FileIcon />,
+            onClick: handleCopyFileURL(fileObj),
+          })),
+    },
+    {
+      label: "View file",
+      icon: <OpenIcon />,
+      onClick: isSingleValue ? handleViewFile(cellValue[0]) : undefined,
+      disabled: isEmpty,
+      subItems: isSingleValue
+        ? []
+        : cellValue.map((fileObj: RowyFile, index: number) => ({
+            label: fileObj.name || "File " + (index + 1),
+            icon: <FileIcon />,
+            onClick: handleViewFile(fileObj),
+          })),
+    },
+  ];
+};
+
+export default ContextMenuActions;
diff --git a/src/components/fields/File/index.tsx b/src/components/fields/File/index.tsx
index 33ab5021..b859623f 100644
--- a/src/components/fields/File/index.tsx
+++ b/src/components/fields/File/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import FileIcon from "@mui/icons-material/AttachFile";
 import DisplayCell from "./DisplayCell";
+import ContextMenuActions from "./ContextMenuActions";
 
 const EditorCell = lazy(
   () => import("./EditorCell" /* webpackChunkName: "EditorCell-File" */)
@@ -26,6 +27,7 @@ export const config: IFieldConfig = {
     disablePadding: true,
   }),
   SideDrawerField,
+  contextMenuActions: ContextMenuActions,
 };
 export default config;
 
diff --git a/src/components/fields/GeoPoint/index.tsx b/src/components/fields/GeoPoint/index.tsx
index e1d04a23..8a793e59 100644
--- a/src/components/fields/GeoPoint/index.tsx
+++ b/src/components/fields/GeoPoint/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import GeoPointIcon from "@mui/icons-material/PinDropOutlined";
 import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -24,5 +25,6 @@ export const config: IFieldConfig = {
     popoverProps: { PaperProps: { sx: { p: 1, pt: 0 } } },
   }),
   SideDrawerField,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Markdown/index.tsx b/src/components/fields/Markdown/index.tsx
index 26de107b..243bfb35 100644
--- a/src/components/fields/Markdown/index.tsx
+++ b/src/components/fields/Markdown/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import { Markdown as MarkdownIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -23,5 +24,6 @@ export const config: IFieldConfig = {
   description: "Markdown editor with preview",
   TableCell: withRenderTableCell(DisplayCell, SideDrawerField, "popover"),
   SideDrawerField,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/MultiSelect/index.tsx b/src/components/fields/MultiSelect/index.tsx
index 19a5cecd..e93e0756 100644
--- a/src/components/fields/MultiSelect/index.tsx
+++ b/src/components/fields/MultiSelect/index.tsx
@@ -5,6 +5,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 import { MultiSelect as MultiSelectIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
 import { filterOperators } from "./Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const EditorCell = lazy(
   () => import("./EditorCell" /* webpackChunkName: "EditorCell-MultiSelect" */)
@@ -48,5 +49,6 @@ export const config: IFieldConfig = {
   filter: {
     operators: filterOperators,
   },
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Rating/index.tsx b/src/components/fields/Rating/index.tsx
index 3712ffe7..b1f6ced9 100644
--- a/src/components/fields/Rating/index.tsx
+++ b/src/components/fields/Rating/index.tsx
@@ -6,6 +6,7 @@ import RatingIcon from "@mui/icons-material/StarBorder";
 import DisplayCell from "./DisplayCell";
 import EditorCell from "./EditorCell";
 import { filterOperators } from "@src/components/fields/Number/Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -44,5 +45,6 @@ export const config: IFieldConfig = {
       return null;
     }
   },
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/SingleSelect/index.tsx b/src/components/fields/SingleSelect/index.tsx
index 468d7f01..21d961c2 100644
--- a/src/components/fields/SingleSelect/index.tsx
+++ b/src/components/fields/SingleSelect/index.tsx
@@ -6,6 +6,7 @@ import { SingleSelect as SingleSelectIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
 import EditorCell from "./EditorCell";
 import { filterOperators } from "@src/components/fields/ShortText/Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -35,5 +36,6 @@ export const config: IFieldConfig = {
   settings: Settings,
   filter: { operators: filterOperators },
   requireConfiguration: true,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/Slider/index.tsx b/src/components/fields/Slider/index.tsx
index 06f7bce0..0356c4b3 100644
--- a/src/components/fields/Slider/index.tsx
+++ b/src/components/fields/Slider/index.tsx
@@ -5,6 +5,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 import { Slider as SliderIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
 import { filterOperators } from "@src/components/fields/Number/Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -44,5 +45,6 @@ export const config: IFieldConfig = {
       return null;
     }
   },
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/UpdatedAt/index.tsx b/src/components/fields/UpdatedAt/index.tsx
index 1375347b..10a16d73 100644
--- a/src/components/fields/UpdatedAt/index.tsx
+++ b/src/components/fields/UpdatedAt/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 
 import { UpdatedAt as UpdatedAtIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
 
 const SideDrawerField = lazy(
   () =>
@@ -29,5 +30,6 @@ export const config: IFieldConfig = {
   SideDrawerField,
   settings: Settings,
   requireCollectionTable: true,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;
diff --git a/src/components/fields/UpdatedBy/index.tsx b/src/components/fields/UpdatedBy/index.tsx
index c4f733d1..5aacfaa8 100644
--- a/src/components/fields/UpdatedBy/index.tsx
+++ b/src/components/fields/UpdatedBy/index.tsx
@@ -5,6 +5,8 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
 import { UpdatedBy as UpdatedByIcon } from "@src/assets/icons";
 import DisplayCell from "./DisplayCell";
 
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
+
 const SideDrawerField = lazy(
   () =>
     import(
@@ -30,5 +32,6 @@ export const config: IFieldConfig = {
   SideDrawerField,
   settings: Settings,
   requireCollectionTable: true,
+  contextMenuActions: BasicContextMenuActions,
 };
 export default config;

From 2715a8094aa740bd6c783ad7e28fb24f6973cded Mon Sep 17 00:00:00 2001
From: mnmt7 <107614965+mnmt7@users.noreply.github.com>
Date: Tue, 2 May 2023 04:59:02 +0530
Subject: [PATCH 30/36] Implement and Add SideDrawerField for Formula Field
 (#1225)

* Implement and Add SideDrawerField for Formula Field

* Modify Formula SideDrawerField to use already calculated value

* fix unneccessary db update on formula calculations

---------

Co-authored-by: Han Tuerker <burhan.tuerker@gmail.com>
---
 src/atoms/tableScope/rowActions.ts            | 12 ++++-
 src/components/SideDrawer/MemoizedField.tsx   |  8 ++--
 .../SideDrawer/SideDrawerFields.tsx           |  1 +
 .../fields/Array/SideDrawerField/index.tsx    |  6 ++-
 src/components/fields/Formula/DisplayCell.tsx |  1 +
 .../fields/Formula/SideDrawerField.tsx        | 46 +++++++++++++++++++
 src/components/fields/Formula/index.tsx       |  9 +++-
 src/components/fields/Formula/useFormula.tsx  | 21 +++++++--
 src/components/fields/types.ts                |  2 +
 src/utils/table.ts                            |  6 +++
 10 files changed, 102 insertions(+), 10 deletions(-)
 create mode 100644 src/components/fields/Formula/SideDrawerField.tsx

diff --git a/src/atoms/tableScope/rowActions.ts b/src/atoms/tableScope/rowActions.ts
index d7292e2b..4185fa24 100644
--- a/src/atoms/tableScope/rowActions.ts
+++ b/src/atoms/tableScope/rowActions.ts
@@ -386,7 +386,9 @@ export const updateFieldAtom = atom(
     );
 
     if (!row) throw new Error("Could not find row");
-    const isLocalRow = Boolean(find(tableRowsLocal, ["_rowy_ref.path", path]));
+    const isLocalRow =
+      fieldName.startsWith("_rowy_formulaValue_") ||
+      Boolean(find(tableRowsLocal, ["_rowy_ref.path", path]));
 
     const update: Partial<TableRow> = {};
 
@@ -467,6 +469,14 @@ export const updateFieldAtom = atom(
         deleteFields: deleteField ? [fieldName] : [],
       });
 
+      // TODO(han): Formula field persistence
+      // const config = find(tableColumnsOrdered, (c) => {
+      //  const [, key] = fieldName.split("_rowy_formulaValue_");
+      //  return c.key === key;
+      // });
+      // if(!config.persist) return;
+      if (fieldName.startsWith("_rowy_formulaValue")) return;
+
       // If it has no missingRequiredFields, also write to db
       // And write entire row to handle the case where it doesn’t exist in db yet
       if (missingRequiredFields.length === 0) {
diff --git a/src/components/SideDrawer/MemoizedField.tsx b/src/components/SideDrawer/MemoizedField.tsx
index 0fb62f62..0c43c93b 100644
--- a/src/components/SideDrawer/MemoizedField.tsx
+++ b/src/components/SideDrawer/MemoizedField.tsx
@@ -6,6 +6,7 @@ import FieldWrapper from "./FieldWrapper";
 import { IFieldConfig } from "@src/components/fields/types";
 import { getFieldProp } from "@src/components/fields";
 import { ColumnConfig, TableRowRef } from "@src/types/table";
+import { TableRow } from "@src/types/table";
 
 export interface IMemoizedFieldProps {
   field: ColumnConfig;
@@ -16,6 +17,7 @@ export interface IMemoizedFieldProps {
   isDirty: boolean;
   onDirty: (fieldName: string) => void;
   onSubmit: (fieldName: string, value: any) => void;
+  row: TableRow;
 }
 
 export const MemoizedField = memo(
@@ -28,6 +30,7 @@ export const MemoizedField = memo(
     isDirty,
     onDirty,
     onSubmit,
+    row,
     ...props
   }: IMemoizedFieldProps) {
     const [localValue, setLocalValue, localValueRef] = useStateRef(value);
@@ -40,11 +43,7 @@ export const MemoizedField = memo(
       onSubmit(field.fieldName, localValueRef.current);
     }, [field.fieldName, localValueRef, onSubmit]);
 
-    // Derivative/aggregate field support
     let type = field.type;
-    if (field.config && field.config.renderFieldType) {
-      type = field.config.renderFieldType;
-    }
 
     const fieldComponent: IFieldConfig["SideDrawerField"] = getFieldProp(
       "SideDrawerField",
@@ -78,6 +77,7 @@ export const MemoizedField = memo(
           },
           onSubmit: handleSubmit,
           disabled,
+          row,
         })}
       </FieldWrapper>
     );
diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx
index 25ae9aad..f2ce5964 100644
--- a/src/components/SideDrawer/SideDrawerFields.tsx
+++ b/src/components/SideDrawer/SideDrawerFields.tsx
@@ -130,6 +130,7 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) {
           onDirty={onDirty}
           onSubmit={onSubmit}
           isDirty={dirtyField === field.key}
+          row={row}
         />
       ))}
 
diff --git a/src/components/fields/Array/SideDrawerField/index.tsx b/src/components/fields/Array/SideDrawerField/index.tsx
index b8415eb5..4f6efd09 100644
--- a/src/components/fields/Array/SideDrawerField/index.tsx
+++ b/src/components/fields/Array/SideDrawerField/index.tsx
@@ -11,7 +11,7 @@ import DragIndicatorOutlinedIcon from "@mui/icons-material/DragIndicatorOutlined
 import DeleteIcon from "@mui/icons-material/DeleteOutline";
 
 import { FieldType, ISideDrawerFieldProps } from "@src/components/fields/types";
-import { TableRowRef } from "@src/types/table";
+import { TableRow, TableRowRef } from "@src/types/table";
 
 import AddButton from "./AddButton";
 import { getPseudoColumn } from "./utils";
@@ -29,6 +29,7 @@ function ArrayFieldInput({
   onRemove,
   onSubmit,
   id,
+  row,
 }: {
   index: number;
   onRemove: (index: number) => void;
@@ -37,6 +38,7 @@ function ArrayFieldInput({
   onSubmit: () => void;
   _rowy_ref: TableRowRef;
   id: string;
+  row: TableRow;
 }) {
   const typeDetected = detectType(value);
 
@@ -80,6 +82,7 @@ function ArrayFieldInput({
               column={getPseudoColumn(typeDetected, index, value)}
               value={value}
               _rowy_ref={_rowy_ref}
+              row={row}
             />
           </Stack>
           <Box
@@ -174,6 +177,7 @@ export default function ArraySideDrawerField({
                     onRemove={handleRemove}
                     index={index}
                     onSubmit={onSubmit}
+                    row={props.row}
                   />
                 ))}
                 {provided.placeholder}
diff --git a/src/components/fields/Formula/DisplayCell.tsx b/src/components/fields/Formula/DisplayCell.tsx
index adf59b9d..8c3adf2e 100644
--- a/src/components/fields/Formula/DisplayCell.tsx
+++ b/src/components/fields/Formula/DisplayCell.tsx
@@ -6,6 +6,7 @@ import { defaultFn, getDisplayCell } from "./util";
 
 export default function Formula(props: IDisplayCellProps) {
   const { result, error, loading } = useFormula({
+    column: props.column,
     row: props.row,
     ref: props._rowy_ref,
     listenerFields: props.column.config?.listenerFields || [],
diff --git a/src/components/fields/Formula/SideDrawerField.tsx b/src/components/fields/Formula/SideDrawerField.tsx
new file mode 100644
index 00000000..59148861
--- /dev/null
+++ b/src/components/fields/Formula/SideDrawerField.tsx
@@ -0,0 +1,46 @@
+import { ISideDrawerFieldProps } from "@src/components/fields/types";
+import { IFieldConfig } from "@src/components/fields/types";
+import { getFieldProp } from "@src/components/fields";
+import { isEmpty } from "lodash-es";
+import { createElement } from "react";
+
+export default function Formula({
+  column,
+  onChange,
+  onSubmit,
+  _rowy_ref,
+  onDirty,
+  row,
+}: ISideDrawerFieldProps) {
+  const value = row[`_rowy_formulaValue_${column.key}`];
+
+  let type = column.type;
+  if (column.config && column.config.renderFieldType) {
+    type = column.config.renderFieldType;
+  }
+  const fieldComponent: IFieldConfig["SideDrawerField"] = getFieldProp(
+    "SideDrawerField",
+    type
+  );
+
+  // Should not reach this state
+  if (isEmpty(fieldComponent)) {
+    console.error("Could not find SideDrawerField component", column);
+    return null;
+  }
+
+  return (
+    <>
+      {createElement(fieldComponent, {
+        column,
+        _rowy_ref,
+        value,
+        onDirty,
+        onChange,
+        onSubmit,
+        disabled: true,
+        row,
+      })}
+    </>
+  );
+}
diff --git a/src/components/fields/Formula/index.tsx b/src/components/fields/Formula/index.tsx
index 2394092b..6bfe3a79 100644
--- a/src/components/fields/Formula/index.tsx
+++ b/src/components/fields/Formula/index.tsx
@@ -1,9 +1,16 @@
+import { lazy } from "react";
 import FormulaIcon from "@mui/icons-material/Functions";
 import { IFieldConfig, FieldType } from "@src/components/fields/types";
 import withRenderTableCell from "@src/components/Table/TableCell/withRenderTableCell";
 import DisplayCell from "./DisplayCell";
 
 import Settings, { settingsValidator } from "./Settings";
+const SideDrawerField = lazy(
+  () =>
+    import(
+      "./SideDrawerField" /* webpackChunkName: "SideDrawerField-Formula" */
+    )
+);
 
 export const config: IFieldConfig = {
   type: FieldType.formula,
@@ -16,7 +23,7 @@ export const config: IFieldConfig = {
   TableCell: withRenderTableCell(DisplayCell as any, null, undefined, {
     usesRowData: true,
   }),
-  SideDrawerField: () => null as any,
+  SideDrawerField,
   settings: Settings,
   settingsValidator: settingsValidator,
   requireConfiguration: true,
diff --git a/src/components/fields/Formula/useFormula.tsx b/src/components/fields/Formula/useFormula.tsx
index f6c44b75..7b60228f 100644
--- a/src/components/fields/Formula/useFormula.tsx
+++ b/src/components/fields/Formula/useFormula.tsx
@@ -1,9 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 import { pick, zipObject } from "lodash-es";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 
-import { TableRow, TableRowRef } from "@src/types/table";
-import { tableColumnsOrderedAtom, tableScope } from "@src/atoms/tableScope";
+import { TableRow, TableRowRef, ColumnConfig } from "@src/types/table";
+import {
+  tableColumnsOrderedAtom,
+  tableScope,
+  updateFieldAtom,
+} from "@src/atoms/tableScope";
 
 import {
   listenerFieldTypes,
@@ -12,11 +16,13 @@ import {
 } from "./util";
 
 export const useFormula = ({
+  column,
   row,
   ref,
   listenerFields,
   formulaFn,
 }: {
+  column: ColumnConfig;
   row: TableRow;
   ref: TableRowRef;
   listenerFields: string[];
@@ -78,5 +84,14 @@ export const useFormula = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [useDeepCompareMemoize(listeners), formulaFn]);
 
+  const updateField = useSetAtom(updateFieldAtom, tableScope);
+  useEffect(() => {
+    updateField({
+      path: row._rowy_ref.path,
+      fieldName: `_rowy_formulaValue_${column.key}`,
+      value: result,
+    });
+  }, [result, column.key, row._rowy_ref.path, updateField]);
+
   return { result, error, loading };
 };
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index 1c60aa92..04f37326 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -92,6 +92,8 @@ export interface ISideDrawerFieldProps<T = any> {
 
   /** Field locked. Do NOT check `column.locked` */
   disabled: boolean;
+
+  row: TableRow
 }
 
 export interface ISettingsProps {
diff --git a/src/utils/table.ts b/src/utils/table.ts
index 691dd385..0a46eea0 100644
--- a/src/utils/table.ts
+++ b/src/utils/table.ts
@@ -52,6 +52,12 @@ export const omitRowyFields = <T = Record<string, any>>(row: T) => {
   delete shallowClonedRow["_rowy_missingRequiredFields"];
   delete shallowClonedRow["_rowy_new"];
 
+  Object.keys(shallowClonedRow).forEach((key) => {
+    if (key.startsWith("_rowy_formulaValue_")) {
+      delete shallowClonedRow[key];
+    }
+  });
+
   return shallowClonedRow as T;
 };
 

From 9f6bc117c5a7a4c3c2562024679081e13e878d2a Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 2 May 2023 14:36:17 +0530
Subject: [PATCH 31/36] fix: delete first row in Array Sub Table

---
 src/hooks/useFirestoreDocAsCollectionWithAtom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index 1d0499a0..1c69022d 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -201,7 +201,7 @@ export function useFirestoreDocAsCollectionWithAtom<T = TableRow>(
   useEffect(() => {
     if (deleteDocAtom) {
       setDeleteRowAtom(() => (_: string, options?: ArrayTableRowData) => {
-        if (!options || !options.index) return;
+        if (!options || options.index === undefined) return;
         const updateFunction = deleteRow(options.index);
         return setRows(updateFunction);
       });

From 09a7ab8b680b6fb1dc6b1c541452ef7e2f7f5240 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 2 May 2023 14:37:28 +0530
Subject: [PATCH 32/36] removed logs

---
 src/hooks/useFirestoreDocAsCollectionWithAtom.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
index 1c69022d..9d204544 100644
--- a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -348,7 +348,6 @@ function useAlterArrayTable<T>({
 
       return (rows) => {
         if (addTo === "bottom") {
-          console.log("bottom", newRow(rows.length, false));
           rows.push(newRow(rows.length, false));
         } else {
           rows = [newRow(0, false), ...rows];

From 3b493a678587189b75f42b8d6f4ab784ba2731f6 Mon Sep 17 00:00:00 2001
From: Anish Roy <6275anishroy@gmail.com>
Date: Tue, 2 May 2023 14:54:42 +0530
Subject: [PATCH 33/36] fix: clear value not working

---
 .../Table/ContextMenu/MenuContents.tsx        | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/Table/ContextMenu/MenuContents.tsx b/src/components/Table/ContextMenu/MenuContents.tsx
index 0870409e..1e4cf425 100644
--- a/src/components/Table/ContextMenu/MenuContents.tsx
+++ b/src/components/Table/ContextMenu/MenuContents.tsx
@@ -141,6 +141,34 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
       });
     }
   };
+
+  const handleClearValue = () => {
+    const clearValue = () => {
+      updateField({
+        path: selectedCell.path,
+        fieldName: selectedColumn.fieldName,
+        arrayTableData: {
+          index: selectedCell.arrayIndex,
+        },
+        value: null,
+        deleteField: true,
+      });
+      onClose();
+    };
+
+    if (altPress || row._rowy_ref.arrayTableData !== undefined) {
+      clearValue();
+    } else {
+      confirm({
+        title: "Clear cell value?",
+        body: "The cell’s value cannot be recovered after",
+        confirm: "Delete",
+        confirmColor: "error",
+        handleConfirm: clearValue,
+      });
+    }
+  };
+
   const rowActions: IContextMenuItem[] = [
     {
       label: "Copy ID",
@@ -214,13 +242,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
     // Cell actions
     // TODO: Add copy and paste here
     const cellValue = row?.[selectedCell.columnKey];
-    const handleClearValue = () =>
-      updateField({
-        path: selectedCell.path,
-        fieldName: selectedColumn.fieldName,
-        value: null,
-        deleteField: true,
-      });
+
     const columnFilters = getFieldProp(
       "filter",
       selectedColumn?.type === FieldType.derivative
@@ -247,18 +269,7 @@ export default function MenuContents({ onClose }: IMenuContentsProps) {
           !row ||
           cellValue === undefined ||
           getFieldProp("group", selectedColumn?.type) === "Auditing",
-        onClick: altPress
-          ? handleClearValue
-          : () => {
-              confirm({
-                title: "Clear cell value?",
-                body: "The cell’s value cannot be recovered after",
-                confirm: "Delete",
-                confirmColor: "error",
-                handleConfirm: handleClearValue,
-              });
-              onClose();
-            },
+        onClick: handleClearValue,
       },
       {
         label: "Filter value",

From 57081537987e06fd024a83e8e29fbc8a13686797 Mon Sep 17 00:00:00 2001
From: Harini Janakiraman <harinijanakiraman@gmail.com>
Date: Tue, 2 May 2023 22:18:35 +1000
Subject: [PATCH 34/36] Update CONTRIBUTING.md

Fixed link
---
 CONTRIBUTING.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4b6c33ba..f7f920d5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,14 +17,14 @@ Read the documentation on setting up your local development environment
 Read how to submit a pull request [here](https://docs.rowy.io/contributing).
 
 To get familiar with the project,
-[good first issues](https://github.com/rowyio/rowy/projects/3) is a good place
+[good first issues](https://github.com/rowyio/rowy/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) is a good place
 to start.
 
 ## Working on existing issues
 
 
 
-Before you get started working on an [issue](https://github.com/rowyio/rowy/issues), please make sure to share that you are working on it by commenting on the issue and posting a message on #contributions channel in Rowy's [Discord](https://discord.com/invite/fjBugmvzZP). The maintainers will then assign the issue to you after making sure any relevant information or context in addition is provided before you can start on the task.
+Before you get started working on an [issue](https://github.com/rowyio/rowy/issues), please make sure to share that you are working on it by commenting on the issue and posting a message on #contributions channel in Rowy's [Discord](https://rowy.io/discord). The maintainers will then assign the issue to you after making sure any relevant information or context in addition is provided before you can start on the task.
 
 Once you are assigned a task, please provide periodic updates or share any questions or roadblocks on either discord or the Github issue, so that the commmunity or the project maintainers can provide you any feedback or guidance as needed. If you are inactive for more than 1-2 week on a issue that was assigned to you, then we will assume you have stopped working on it and we will unassign it from you - so that we can give a chance to others in the community to work on it.
 
@@ -36,7 +36,7 @@ create a new issue using
 to share your idea. If you are working on this to contribute to the project,
 then let others in the community and project maintainers know by posting on
 #contributions channel in Rowy's
-[Discord](https://discord.com/invite/fjBugmvzZP). This allows others in the
+[Discord](https://rowy.io/discord). This allows others in the
 community and the maintainers a chance to provide feedback and guidance before
 you spend time working on it.
 

From a2fde2f91ca8ee4eee2bf351fd202efb227ef302 Mon Sep 17 00:00:00 2001
From: Bobby Wang <bofei@mail.com>
Date: Tue, 2 May 2023 23:42:17 +0800
Subject: [PATCH 35/36] update unable to upload file link to new doc

---
 src/hooks/useFirebaseStorageUploader.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useFirebaseStorageUploader.tsx b/src/hooks/useFirebaseStorageUploader.tsx
index 2be914fd..4e69cbd8 100644
--- a/src/hooks/useFirebaseStorageUploader.tsx
+++ b/src/hooks/useFirebaseStorageUploader.tsx
@@ -127,14 +127,11 @@ const useFirebaseStorageUploader = () => {
                     <Paper elevation={0} sx={{ borderRadius: 1 }}>
                       <Button
                         color="primary"
-                        href={
-                          WIKI_LINKS.setupRoles +
-                          "#write-firebase-storage-security-rules"
-                        }
+                        href={WIKI_LINKS.faqsAccess + "#unable-to-upload-files"}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        Fix
+                        Learn More
                         <InlineOpenInNewIcon />
                       </Button>
                     </Paper>

From 60d4213b43dfb6292480c6cc6412a17a0bf19f44 Mon Sep 17 00:00:00 2001
From: alceil <ashishshajisrampickal@gmail.com>
Date: Wed, 3 May 2023 20:09:26 +0530
Subject: [PATCH 36/36] Fix label not showing in status type

---
 src/components/fields/Status/utils/getLabelHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/Status/utils/getLabelHelper.ts b/src/components/fields/Status/utils/getLabelHelper.ts
index 7cb8b33e..fceabe27 100644
--- a/src/components/fields/Status/utils/getLabelHelper.ts
+++ b/src/components/fields/Status/utils/getLabelHelper.ts
@@ -63,7 +63,7 @@ export default function getLabel(value: any, conditions: any) {
   let _label: any = undefined;
   const isBoolean = Boolean(typeof value === "boolean");
   const notBoolean = Boolean(typeof value !== "boolean");
-  const isNullOrUndefined = Boolean(!value && notBoolean);
+  const isNullOrUndefined = Boolean((value === null || value === undefined) && notBoolean);
   const isNumeric = Boolean(typeof value === "number");
 
   if (isNullOrUndefined) _label = getFalseyLabelFrom(conditions, value);