[Components][s]: Add TableGrid component from Portaljs

examples/data-literate/components/DataLiterate.js

@@ -1,10 +1,10 @@
 import Layout from '../components/Layout'
-
 import { MDXRemote } from 'next-mdx-remote'
-import dynamic from 'next/dynamic'
 import Head from 'next/head'
-import Link from 'next/link'
-
+import TableGrid from './TableGrid'
+import Table from '../components/Table'
+import Excel from '../components/Excel'
+import LineChart from '../components/LineChart'
 import { Vega, VegaLite } from 'react-vega'
 
 // Custom components/renderers to pass to MDX.
@@ -12,12 +12,12 @@ import { Vega, VegaLite } from 'react-vega'
 // to handle import statements. Instead, you must include components in scope
 // here.
 const components = {
-  Table: dynamic(() => import('../components/Table')),
-  Excel: dynamic(() => import('../components/Excel')),
-  // TODO: try and make these dynamic ...
-  Vega: Vega,
-  VegaLite: VegaLite,
-  LineChart: dynamic(() => import('../components/LineChart')),
+  Table,
+  TableGrid,
+  Excel,
+  Vega,
+  VegaLite,
+  LineChart,
   Head,
 }
 

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

@@ -19,6 +19,7 @@
     "next": "12.1.0",
     "next-mdx-remote": "^3.0.4",
     "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",