[WIP] Use df.to_json(orient='table')

component/virtualized-grid.js

@@ -1,20 +1,27 @@
 import React from 'react';
-import { Grid, MultiGrid, AutoSizer, CellMeasurer } from 'react-virtualized';
+import ReactDOM from 'react-dom';
+import { MultiGrid, AutoSizer, CellMeasurer } from 'react-virtualized';
 import 'react-virtualized/styles.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;
+const ROW_HEIGHT = 42;
+const GRID_MAX_HEIGHT = 336;
 
 function inferSchema(data) {
-  const headers = data.reduce(
-    (result, row) => [ ...new Set([ ...result, ...Object.keys(row) ]) ],
+  // Take a sampling of rows from data
+  const range = Array.from({ length: 10 }, (v, i) =>
+    Math.floor(Math.random() * data.length));
+  // Separate headers and values
+  const headers = range.reduce(
+    (result, row) => [...new Set([...result, ...Object.keys(data[row])])],
     []
   );
-  const values = data.map(row => Object.values(row));
+  const values = range.map(row => Object.values(data[row]));
+  // Infer column types and return schema for data
   return infer(headers, values);
 }
 
@@ -32,27 +39,30 @@ export default class VirtualizedGrid extends React.Component {
   }
 
   render() {
+    const rowCount = this.data.length + 1
+    const height = rowCount * ROW_HEIGHT;
     return (
       <AutoSizer disableHeight>
         {({ width }) => (
           <CellMeasurer
             cellRenderer={this.cellRenderer}
             columnCount={this.schema.fields.length}
             height={ROW_HEIGHT}
-            rowCount={this.data.length + 1}
+            rowCount={rowCount}
           >
             {({ getColumnWidth }) => (
               <MultiGrid
                 cellRenderer={this.cellRenderer}
                 columnCount={this.schema.fields.length}
-                columnWidth={getColumnWidth}
+                columnWidth={index => getColumnWidth(index) + 10}
+                fixedColumnCount={1}
                 fixedRowCount={1}
                 height={
-                  (this.data.length + 1) * (ROW_HEIGHT + 8) < 400
-                    ? (this.data.length + 1) * (ROW_HEIGHT + 8)
-                    : 400
+                  height < GRID_MAX_HEIGHT
+                    ? height
+                    : GRID_MAX_HEIGHT
                 }
-                rowCount={this.data.length + 1}
+                rowCount={rowCount}
                 rowHeight={ROW_HEIGHT}
                 width={width}
               />
@@ -70,13 +80,13 @@ export default class VirtualizedGrid extends React.Component {
         style={{
           ...style,
           fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-          fontSize: 16,
+          fontSize: 12,
           fontWeight: rowIndex === 0 ? 600 : 'normal',
           backgroundColor: rowIndex % 2 === 0 && rowIndex !== 0
             ? '#f8f8f8'
             : '#fff',
-          border: '1px solid #ddd',
-          padding: '6px 13px'
+          padding: '6px 13px',
+          boxSizing: 'border-box'
         }}
       >
         {

component/virtualized-table.js

@@ -84,7 +84,7 @@ export default class VirtualizedTable extends React.Component {
             {this.schema.fields.map((field, fieldIndex) => (
               <Column
                 key={fieldIndex}
-                label={field.name}
+                label={`${field.name}`}
                 // cellDataGetter={({ columnData, dataKey, rowData }) =>
                 //   rowData
                 // }

jupyterlab_table/__init__.py

@@ -1,7 +1,9 @@
 from IPython.display import display, DisplayObject
 import json
 import pandas as pd
-from .utils import prepare_data
+
+pd.options.display.html.table_schema = True
+pd.options.display.max_rows = 10000
 
 
 # Running `npm run build` will create static resources in the static
@@ -22,6 +24,16 @@ def _jupyter_nbextension_paths():
         'require': 'jupyterlab_table/extension'
     }]
 
+def prepare_data(data=None, schema=None):
+    """Prepare JSONTable data from Pandas DataFrame."""
+
+    if isinstance(data, pd.DataFrame):
+        data = data.to_json(orient='table')
+        return json.loads(data)
+    return {
+        'data': data,
+        'schema': schema
+    }
 
 # A display class that can be used within a notebook. E.g.:
 #   from jupyterlab_table import JSONTable
@@ -88,14 +100,7 @@ def schema(self, schema):
 
     def _ipython_display_(self):
         bundle = {
-            'application/vnd.dataresource+json': {
-                'resources': [
-                    {
-                        'schema': self.schema,
-                        'data': prepare_data(self.data)
-                    }
-                ]
-            },
+            'application/vnd.dataresource+json': prepare_data(self.data, self.schema),
             'text/plain': '<jupyterlab_table.JSONTable object>'
         }
         metadata = {

labextension/src/doc.js

@@ -56,8 +56,8 @@ export class DocWidget extends Widget {
     if (this.isAttached) {
       const content = this._context.model.toString();
       try {
-        const { resources: [ props ] } = JSON.parse(content);
-        ReactDOM.render(<JSONTable {...props} />, this.node);
+        const { data, schema } = JSON.parse(content);
+        ReactDOM.render(<JSONTable data={data} schema={schema} />, this.node);
       } catch (error) {
         const ErrorDisplay = props => (
           <div

labextension/src/output.js

@@ -39,13 +39,13 @@ export class OutputWidget extends Widget {
    * A render function given the widget's DOM node.
    */
   _render() {
-    const { resources: [ props ] } = this._data.get(this._mimeType);
+    const { data, schema } = this._data.get(this._mimeType);
     // const metadata = this._metadata.get(this._mimeType);
-    if (props) ReactDOM.render(<JSONTable {...props} />, this.node);
-    // Inject static HTML into mime bundle
+    // if (data) 
+    ReactDOM.render(<JSONTable data={data} schema={schema} />, this.node);
     this._data.set(
       'text/html', 
-      ReactDOMServer.renderToStaticMarkup(<JSONTable {...props} />)
+      ReactDOMServer.renderToStaticMarkup(<JSONTable data={data} schema={schema} />)
     );
   }
 }

nbextension/src/renderer.js

@@ -10,9 +10,9 @@ const CLASS_NAME = 'output_JSONTable rendered_html';
 /**
  * Render data to the output area
  */
-function render(data, node) {
-  const { resources: [ props ] } = data;
-  ReactDOM.render(<JSONTable {...props} />, node);
+function render(json, node) {
+  const { data, schema } = json;
+  ReactDOM.render(<JSONTable data={data} schema={schema} />, node);
 }
 
 /**