[examples/data-literate]: add example of TableGrid core component to demo - fixes #669.

Merge pull request #670 from datopian/add/custom-components]

examples/data-literate/components/DataLiterate.js

@@ -2,6 +2,7 @@ import Layout from '../components/Layout'
 import Head from 'next/head'
 import Excel from '../components/Excel'
 import Table from '../components/Table'
+import TableGrid from '../components/TableGrid'
 import LineChart from '../components/LineChart'
 import { MDXProvider } from '@mdx-js/react'
 import { Vega, VegaLite } from 'react-vega'
@@ -17,6 +18,7 @@ const components = {
   VegaLite,
   LineChart,
   Head,
+  TableGrid
 }
 
 

examples/data-literate/components/TableGrid.js

@@ -0,0 +1,81 @@
+import axios from 'axios'
+import React, { useEffect } from 'react'
+import { Table } from 'portal'
+
+const papa = require("papaparse")
+
+/*
+  Portaljs Table Grid
+  usage: <TableGrid url="" data={data} cols={cols} csv="" />
+*/
+export default function TableGrid({ data = [], cols = [], csv = '', url = '' }) {
+
+  if (csv) {
+    const out = parseCsv(csv)
+    data = prepareRowsForPortalJsTable(out.rows)
+    cols = out.fields
+  }
+
+  if (cols) {
+    cols = prepareColsForPortalJsTable(cols)
+  }
+
+  const [ourdata, setData] = React.useState(data)
+  const [ourcols, setCols] = React.useState(cols)
+
+  useEffect(() => {
+    if (url) {
+      loadUrl(url)
+    }
+  }, [url])
+
+  function loadUrl(path) {
+    // HACK: duplicate of Excel code - maybe refactor
+    // if url is external may have CORS issue so we proxy it ...
+    if (url.startsWith('http')) {
+      const PROXY_URL = window.location.origin + '/api/proxy'
+      url = PROXY_URL + '?url=' + encodeURIComponent(url)
+    }
+    axios.get(url).then((res) => {
+      const { rows, fields } = parseCsv(res.data)
+      setData(rows)
+      setCols(prepareColsForPortalJsTable(fields))
+    })
+  }
+  return (
+    <div>
+      <Table columns={ourcols} data={ourdata} height={"400px"} />
+    </div>
+  )
+}
+
+function prepareColsForPortalJsTable(cols) {
+  return cols.map((col) => {
+    return {
+      field: col.key,
+      headerName: col.name,
+      flex: true
+    }
+  })
+}
+
+function prepareRowsForPortalJsTable(rows) {
+  return rows.map((r) => {
+    return {
+      ...r,
+      id: r.id || r.key
+    }
+  })
+}
+
+function parseCsv(csv) {
+  csv = csv.trim()
+  const rawdata = papa.parse(csv, { header: true })
+  const cols = rawdata.meta.fields.map((r, i) => {
+    return { key: r, name: r }
+  })
+  return {
+    rows: rawdata.data,
+    fields: cols
+  }
+}

examples/data-literate/package.json

@@ -22,6 +22,7 @@
     "frictionless.js": "^0.13.4",
     "next": "12.1.0",
     "papaparse": "^5.3.1",
+    "portal": "https://github.com/datopian/portal.js.git",
     "postcss": "^8.2.10",
     "prop-types": "^15.7.2",
     "react": "17.0.2",

examples/data-literate/pages/demo.mdx

@@ -65,7 +65,7 @@ You can create a table of contents by having a markdown heading named `Table of
 
 ## A Table
 
-You can create tables ...
+You can create a simple table ...
 
 ```
 <Table cols={[
@@ -126,6 +126,71 @@ 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