Merge pull request #173 from tableflowhq/feature/docs-metadata

Added metadata examples to docs
tableflowhq · Nov 1, 2023 · 267fc90 · 267fc90
2 parents 9fdbc5a + 5c968bb
commit 267fc90
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 41 deletions.
diff --git a/docs/embed-importer.mdx b/docs/embed-importer.mdx
@@ -12,8 +12,8 @@ TableFlow is designed to be added to your frontend with ease. The [React SDK](/s
 <CodeGroup>
 
 ```javascript React
-import {useState} from "react";
-import {TableFlowImporter} from "@tableflow/react";
+import { useState } from "react";
+import { TableFlowImporter } from "@tableflow/react";
 
 function MyComponent() {
   const [isOpen, setIsOpen] = useState(false);
@@ -23,10 +23,11 @@ function MyComponent() {
       <button onClick={() => setIsOpen(true)}>Open TableFlow Importer</button>
 
       <TableFlowImporter
-        importerId={"b0fadb1d-9888-4fcb-b185-21b984bcb227"} // Use your importer ID
+        importerId={"6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353"} // Use your importer ID
         modalIsOpen={isOpen}
         modalOnCloseTriggered={() => setIsOpen(false)}
         darkMode={true}
+        metadata={"user_id": 1234} // Pass through user or import info
         onComplete={(data) => console.log(data)}
       />
     </>
@@ -38,10 +39,11 @@ function MyComponent() {
 import createTableFlowImporter from "@tableflow/js";
 
 const importer = createTableFlowImporter({
-  importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID from https://app.tableflow.com/importers
+  importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID 
   modalOnCloseTriggered: () => importer.close(),
-  onComplete: (data) => console.log(data),
   darkMode: true,
+  metadata: {"user_id": 1234}, // Pass through user or import info
+  onComplete: (data) => console.log(data)
 });
 
 const uploadButton = document.getElementById("uploadButton");
@@ -55,20 +57,21 @@ uploadButton.addEventListener("click", () => {
   <script src="https://unpkg.com/@tableflow/js@latest/build/index.js"></script>
 </head>
 <body>
-<button id="uploadButton">Open TableFlow Importer</button>
-<script>
-  const importer = createTableFlowImporter({
-  importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID from https://app.tableflow.com/importers
-  modalOnCloseTriggered: () => importer.close(),
-  onComplete: (data) => console.log(data),
-  darkMode: true,
-});
-
-  const uploadButton = document.getElementById("uploadButton");
-  uploadButton.addEventListener("click", () => {
-  importer?.showModal();
-});
-</script>
+  <button id="uploadButton">Open TableFlow Importer</button>
+  <script>
+    const importer = createTableFlowImporter({
+      importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID
+      modalOnCloseTriggered: () => importer.close(),
+      darkMode: true, 
+      metadata: {"user_id": 1234}, // Pass through user or import info
+      onComplete: (data) => console.log(data),
+    });
+
+    const uploadButton = document.getElementById("uploadButton");
+    uploadButton.addEventListener("click", () => {
+      importer?.showModal();
+    });
+  </script>
 </body>
 ```
 

diff --git a/docs/sdk/javascript.mdx b/docs/sdk/javascript.mdx
@@ -21,10 +21,11 @@ yarn add @tableflow/js
 import createTableFlowImporter from "@tableflow/js";
 
 const importer = createTableFlowImporter({
-  importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID from https://app.tableflow.com/importers
+  importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID 
   modalOnCloseTriggered: () => importer.close(),
-  onComplete: (data) => console.log(data),
   darkMode: true,
+  metadata: {"user_id": 1234}, // Pass through user or import info
+  onComplete: (data) => console.log(data)
 });
 
 const uploadButton = document.getElementById("uploadButton");
@@ -39,20 +40,21 @@ Or directly in HTML
   <script src="https://unpkg.com/@tableflow/js@latest/build/index.js"></script>
 </head>
 <body>
-  <button id="uploadButton">Open TableFlow Importer</button>
-  <script>
-    const importer = createTableFlowImporter({
-      importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID from https://app.tableflow.com/importers
-      modalOnCloseTriggered: () => importer.close(),
-      onComplete: (data) => console.log(data),
-      darkMode: true,
-    });
+<button id="uploadButton">Open TableFlow Importer</button>
+<script>
+  const importer = createTableFlowImporter({
+    importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID
+    modalOnCloseTriggered: () => importer.close(),
+    darkMode: true,
+    metadata: {"user_id": 1234}, // Pass through user or import info
+    onComplete: (data) => console.log(data),
+  });
 
-    const uploadButton = document.getElementById("uploadButton");
-    uploadButton.addEventListener("click", () => {
-      importer?.showModal();
-    });
-  </script>
+  const uploadButton = document.getElementById("uploadButton");
+  uploadButton.addEventListener("click", () => {
+    importer?.showModal();
+  });
+</script>
 </body>
 ```
 
@@ -198,7 +200,11 @@ Or directly in HTML
   An example use case is associating a user ID in your application to an import so when the data is retrieved, you'll
   know which user the data belongs to.
   ```javascript
-  metadata: {userId: 1234, userEmail: "test@example.com"}
+  metadata: {
+    user_id: 1234, 
+    user_email: "test@example.com", 
+    environment: "dev"
+  }
   ```
 </ResponseField>
 
@@ -220,8 +226,9 @@ Or directly in HTML
     "num_columns": 4,
     "num_processed_values": 16,
     "metadata": {
-      "userEmail": "test@example.com",
-      "userId": 1234
+      "user_id": 1234, 
+      "user_email": "test@example.com", 
+      "environment": "dev"
     },
     "is_stored": true,
     "has_errors": false,

diff --git a/docs/sdk/react.mdx b/docs/sdk/react.mdx
@@ -30,10 +30,11 @@ function MyComponent() {
       <button onClick={() => setIsOpen(true)}>Open TableFlow Importer</button>
 
       <TableFlowImporter
-        importerId={"b0fadb1d-9888-4fcb-b185-21b984bcb227"} // Use your importer ID from https://app.tableflow.com/importers
+        importerId={"6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353"} // Use your importer ID
         modalIsOpen={isOpen}
         modalOnCloseTriggered={() => setIsOpen(false)}
         darkMode={true}
+        metadata={"user_id": 1234} // Pass through user or import info
         onComplete={(data) => console.log(data)}
       />
     </>
@@ -196,7 +197,11 @@ function MyComponent() {
   An example use case is associating a user ID in your application to an import so when the data is retrieved, you'll
   know which user the data belongs to.
   ```jsx
-  metadata={{userId: 1234, userEmail: "test@example.com"}}
+  metadata={{
+    user_id: 1234, 
+    user_email: "test@example.com", 
+    environment: "dev"
+  }}
   ```
 </ResponseField>
 
@@ -218,8 +223,9 @@ function MyComponent() {
     "num_columns": 4,
     "num_processed_values": 16,
     "metadata": {
-      "userEmail": "test@example.com",
-      "userId": 1234
+      "user_id": 1234, 
+      "user_email": "test@example.com", 
+      "environment": "dev"
     },
     "is_stored": true,
     "has_errors": false,