Add JSONTable component

fixed-data-table
react-virtualized
vanilla HTML

Author: gnestor

README.md

@@ -1,8 +1,8 @@
 # jupyterlab_table
 
-A JupyterLab and Jupyter Notebook extension for rendering JSONTable
+A JupyterLab and Jupyter Notebook extension for rendering [JSON Table Schema](http://frictionlessdata.io/guides/json-table-schema/)
 
-![output renderer](http://g.recordit.co/QAsC7YULcY.gif)
+![output renderer](http://g.recordit.co/l9WLsSxPPd.gif)
 
 ## Prerequisites
 
@@ -15,19 +15,73 @@ To render JSONTable output in IPython:
 ```python
 from jupyterlab_table import JSONTable
 
-JSONTable({
-    "string": "string",
-    "array": [1, 2, 3],
-    "bool": True,
-    "object": {
-        "foo": "bar"
+JSONTable(data=[
+    {
+        "Date": "2000-03-01",
+        "Adj Close": 33.68,
+        "Open": 89.62,
+        "Low": 88.94,
+        "Volume": 106889800,
+        "High": 94.09,
+        "Close": 90.81
+    },
+    {
+        "Date": "2000-03-02",
+        "Adj Close": 34.63,
+        "Open": 91.81,
+        "Low": 91.12,
+        "Volume": 106932600,
+        "High": 95.37,
+        "Close": 93.37
     }
+], schema={
+    "fields": [
+        {
+            "type": "any",
+            "name": "Date"
+        },
+        {
+            "type": "number",
+            "name": "Open"
+        },
+        {
+            "type": "number",
+            "name": "High"
+        },
+        {
+            "type": "number",
+            "name": "Low"
+        },
+        {
+            "type": "number",
+            "name": "Close"
+        },
+        {
+            "type": "integer",
+            "name": "Volume"
+        },
+        {
+            "type": "number",
+            "name": "Adj Close"
+        }
+    ]
 })
 ```
 
-To render a `.table.json` file as a tree, simply open it:
+Using a pandas DataFrame:
 
-![file renderer](http://g.recordit.co/cbf0xnQHKn.gif)
+```python
+from jupyterlab_table import JSONTable
+import pandas
+import numpy
+
+df = pandas.DataFrame(numpy.random.randn(2, 2))
+JSONTable(df)
+```
+
+To render a .table.json file as a tree, simply open it:
+
+![file renderer](http://g.recordit.co/7BNlGqlKtP.gif)
 
 ## Install
 

component/README.md

@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  Table, 
+  Column, 
+  Cell
+} from 'fixed-data-table';
+import 'fixed-data-table/dist/fixed-data-table.min.css';
+// hack: `stream.Transform` (stream-browserify) is undefined in `csv-parse` when 
+// built with @jupyterlabextension-builder 
+import infer from 'jsontableschema/lib/infer';
+// import { infer } from 'jsontableschema';
+import './index.css';
+
+const ROW_HEIGHT = 34;
+
+function inferSchema(data) {
+  const headers = data.reduce((result, row) => [...new Set([...result, ...Object.keys(row)])], []);
+  const values = data.map(row => Object.values(row));
+  return infer(headers, values);
+}
+
+export default class FixedDataTable extends React.Component {
+    
+  state = {
+    columnWidths: {}
+  }
+
+  render() {
+    let { schema, data } = this.props;
+    if (!schema) schema = inferSchema(data);
+    return (
+      <Table
+        rowHeight={ROW_HEIGHT}
+        headerHeight={ROW_HEIGHT}
+        rowsCount={data.length}
+        width={3000}
+        height={ROW_HEIGHT * (data.length + 1)}
+        onColumnResizeEndCallback={(columnWidth, columnKey) => {
+          this.setState(({columnWidths}) => ({
+            columnWidths: {
+              ...columnWidths,
+              [columnKey]: columnWidth,
+            }
+          }));
+        }}
+      >
+        {
+          schema.fields.map((field, fieldIndex) =>
+            <Column
+              key={fieldIndex}
+              columnKey={field.name}
+              width={this.state.columnWidths[field.name] || 300}
+              header={props =>
+                <Cell>{field.name}</Cell>
+              }
+              cell={props =>
+                <Cell>{data[props.rowIndex][field.name]}</Cell>
+              }
+              fixed={false}
+              isResizable={true}
+            />
+          )
+        }
+      </Table>
+    );
+  }
+
+}

component/fixed-data-table.js

@@ -1,3 +1,39 @@
-.JSONTable {
-  
+.fixedDataTableLayout_main {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
+}
+
+.public_fixedDataTableCell_main {
+  border-color: #ddd;
+}
+
+.public_fixedDataTable_header {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
+}
+
+.public_fixedDataTable_header {
+  background: #fff;
+}
+
+.public_fixedDataTable_header, .public_fixedDataTable_header .public_fixedDataTableCell_main {
+  background: #fff;
+  text-align: center;
+}
+
+.public_fixedDataTableCell_cellContent {
+  padding: 6px 13px;
+}
+
+.public_fixedDataTableRow_highlighted, .public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main {
+  background: #f8f8f8;
+}
+
+.dataframe {
+  width: 100%;
+  border-spacing: 1px;
+}
+
+.dataframe .header {
+  text-align: right;
 }

component/index.css

@@ -1,14 +1,4 @@
-import React from 'react';
-import './index.css';
-
-export default class JSONTableComponent extends React.Component {
-
-  render() {
-      return (
-        <div className="JSONTable">
-          {JSON.stringify(this.props.data)}
-        </div>
-      );
-  }
-
-}
+export VirtualizedTable from './virtualized-table';
+export VirtualizedGrid from './virtualized-grid';
+export FixedDataTable from './fixed-data-table';
+export VanillaTable from './vanilla-table';

component/index.js

@@ -1,7 +1,7 @@
 {
   "name": "jupyterlab_table_react",
   "version": "1.0.0",
-  "description": "A React component for rendering JSONTable",
+  "description": "A React component for rendering JSON schema table",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -10,9 +10,13 @@
     "jupyter",
     "react"
   ],
-  "author": "Grant Nestor <grantnestor@gmail.com>",
+  "author": "Grant Nestor",
   "license": "ISC",
   "dependencies": {
-    "react": "^15.3.2"
+    "fixed-data-table": "^0.6.3",
+    "jsontableschema": "^0.2.2",
+    "react": "^15.3.2",
+    "react-addons-shallow-compare": "^15.4.2",
+    "react-virtualized": "^8.11.4"
   }
 }

component/package.json

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+// hack: `stream.Transform` (stream-browserify) is undefined in `csv-parse` when 
+// built with @jupyterlabextension-builder 
+import infer from 'jsontableschema/lib/infer';
+// import { infer } from 'jsontableschema';
+import './index.css';
+
+function inferSchema(data) {
+  const headers = data.reduce((result, row) => [...new Set([...result, ...Object.keys(row)])], []);
+  const values = data.map(row => Object.values(row));
+  return infer(headers, values);
+}
+
+export default class VanillaTable extends React.Component {
+
+  render() {
+    let { schema, data } = this.props;
+    if (!schema) schema = inferSchema(data);
+    return (
+      <table className="dataframe">
+        <thead>
+          <tr className="header">
+            {
+              schema.fields.map((field, index) => (
+                <th key={index}>{field.name}</th>
+              ))
+            }
+          </tr>
+        </thead>
+        <tbody>
+          {
+            props.data.map((row, rowIndex) =>
+              <tr key={rowIndex}>
+                {
+                  schema.fields.map((field, index) => (
+                    <td key={index}>{row[field.name]}</td>
+                  ))
+                }
+              </tr>
+            )
+          }
+        </tbody>
+      </table>
+    );
+  }
+
+}