From d3334ab45cfb072bbe964206bb4f0820f4b2e7cb Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Tue, 15 Mar 2022 10:33:08 +0100
Subject: [PATCH] [demo][s]: Update demo to use TableGrid

---
 examples/data-literate/content/demo.mdx | 63 +++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/examples/data-literate/content/demo.mdx b/examples/data-literate/content/demo.mdx
index c3984a4b..c662cbc9 100644
--- a/examples/data-literate/content/demo.mdx
+++ b/examples/data-literate/content/demo.mdx
@@ -126,6 +126,69 @@ Year,Temp Anomaly,
 ```
 <Table url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
 ```
+___
+
+You can also create a Table Grid, with more advance features
+
+```
+<TableGrid cols={[
+    { key: 'id', name: 'ID' },
+    { key: 'firstName', name: 'First name' },
+    { key: 'lastName', name: 'Last name' },
+    { key: 'age', name: 'Age' }
+  ]} data={[
+    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+  ]}
+  />
+```
+
+<TableGrid cols={[
+    { key: 'id', name: 'ID' },
+    { key: 'firstName', name: 'First name' },
+    { key: 'lastName', name: 'Last name' },
+    { key: 'age', name: 'Age' }
+  ]} data={[
+    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+  ]}
+  />
+
+### Table Grid from Raw CSV
+
+You can also pass raw CSV as the content ...
+
+```
+<TableGrid csv={`
+Year,Temp Anomaly
+1850,-0.418
+2020,0.923
+`} />
+```
+
+<TableGrid csv={`
+Year,Temp Anomaly,
+1850,-0.418
+2020,0.923
+`} />
+
+### Table Grid from a URL
+
+```
+<TableGrid url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
+```
+
+<TableGrid url='/_files/HadCRUT.5.0.1.0.analysis.summary_series.global.annual.csv' />
 
 ## Charts