From 7da7deceaba6fdfb9495780bcedcaf37e43c1c33 Mon Sep 17 00:00:00 2001
From: William Lima <33525547+willy1989cv@users.noreply.github.com>
Date: Thu, 22 Aug 2024 16:40:54 +0000
Subject: [PATCH] add table previews post

---
 .../Add Table previews to your content.md     | 114 ++++++++++++++++++
 assets/data.csv                               |   7 ++
 2 files changed, 121 insertions(+)
 create mode 100644 DataHub Cloud/Add Table previews to your content.md
 create mode 100644 assets/data.csv

diff --git a/DataHub Cloud/Add Table previews to your content.md b/DataHub Cloud/Add Table previews to your content.md
new file mode 100644
index 0000000..3e3e177
--- /dev/null
+++ b/DataHub Cloud/Add Table previews to your content.md	
@@ -0,0 +1,114 @@
+# Adding a Table Component
+
+Datahub Cloud allows you to easily add table components to your datasets or data stories. Here’s how you can do it using different approaches:
+
+## FlatUiTable
+
+The `FlatUiTable` component dynamically renders your dataset (whether it’s an array of objects, a CSV file, inline CSV, or an external source) in a table view. It offers features like filtering, sorting, pagination, and export options.
+
+### Adding Data from Array Objects
+
+To display static data in your story, pass a `data.values` attribute to the component in your `.md` file. For example:
+
+```js
+<FlatUiTable
+  data={{
+    values: [
+      { FirstName: "Jon", LastName: "Snow", Age: 35 },
+      { FirstName: "Cersei", LastName: "Lannister", Age: 42 },
+      { FirstName: "Jaime", LastName: "Lannister", Age: 45 },
+    ],
+  }}
+/>
+```
+
+To visualize and interact with your data:
+
+<FlatUiTable
+data={{
+    values: [
+      {
+        FirstName: "Jon",
+        LastName: "Snow",
+        Age: 35,
+      },
+      {
+        FirstName: "Cersei",
+        LastName: "Lannister",
+        Age: 42,
+      },
+      {
+        FirstName: "Jaime",
+        LastName: "Lannister",
+        Age: 45,
+      }
+    ]
+  }}
+/>
+
+### Adding Data from External Sources
+
+Your data source could be a csv in you githup project or even an external CSV file. You can display it by passing the `data.url` property to the `FlatUiTable` component:
+
+```js
+<FlatUiTable
+  data={{
+    url: "/assets/data.csv",
+  }}
+/>
+```
+
+And the table will be rendered like this:
+
+<FlatUiTable
+data={{
+    url: "/assets/data.csv",
+  }}
+/>
+
+### Using Inline CSV
+
+You can also write inline CSV data using the `data.csv` property:
+
+```js
+<FlatUiTable
+  data={{
+    csv: `
+    Year,Temp Anomaly
+    1850,-0.418
+    2020,0.923
+    `,
+  }}
+/>
+```
+
+To see it in action:
+
+<FlatUiTable
+data={{
+    csv: `
+    Year,Temp Anomaly
+    1850,-0.418
+    2020,0.923
+    `,
+  }}
+/>
+
+## Excel
+
+If you’re working with Excel files, the `Excel` component is a great option to display your data. This component supports features like filtering, sorting, and viewing multiple sheets, making it easy to interact with your Excel data directly in your story.
+
+```js
+<Excel
+  data={{
+    url: "https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx",
+    //you can also use local csv and xlsx files
+  }}
+/>
+```
+
+<Excel
+data={{
+    url: "https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx",
+  }}
+/>
diff --git a/assets/data.csv b/assets/data.csv
new file mode 100644
index 0000000..b2c871f
--- /dev/null
+++ b/assets/data.csv
@@ -0,0 +1,7 @@
+ID,Name,Age,Country,Job Title,Department
+1,John Doe,35,USA,Software Engineer,IT
+2,Jane Smith,42,UK,Project Manager,IT
+3,Ivan Petrov,29,Russia,Data Analyst,Analytics
+4,Ali Hasan,31,Azerbaijan,Network Administrator,Infrastructure
+5,Maria Gonzalez,27,Spain,Cybersecurity Expert,Security
+6,Cheng Wei,38,China,Database Administrator,Data Management
\ No newline at end of file