experiment with row renderers, enabled by plotly/dash-renderer#26

Author: chriddyp

package.json

@@ -16,7 +16,7 @@
     "copy-lib": "cp lib/* dash_table_experiments",
     "demo": "builder run demo",
     "install-local": "npm run copy-lib && python setup.py install",
-    "prepublish": "npm test && builder run build-dist && npm run copy-lib",
+    "prepublish": "builder run lint && builder run build-dist && npm run copy-lib",
     "build-local": "builder run build-dist && npm run copy-lib",
     "publish-all": "npm publish && python setup.py sdist upload",
     "publish-pypi": "npm run prepublish && python setup.py sdist upload",

src/components/DataTable.react.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import ReactDataGrid from 'react-data-grid';
+import ReactDataGrid, {Row} from 'react-data-grid';
 import {Toolbar} from 'react-data-grid-addons';
 import R from 'ramda';
 
@@ -87,7 +87,16 @@ class DataTable extends Component {
             name: c,
             editable: Boolean(props.editable),
             sortable: Boolean(props.sortable),
-            filterable: Boolean(props.filterable)
+            filterable: Boolean(props.filterable),
+            formatter: cellProps => {
+                /* eslint-disable */
+                console.warn(cellProps);
+                /* eslint-enable */
+                return (R.type(cellProps.value) === 'Object' ?
+                    props.render(cellProps.value) :
+                    <div>{cellProps.value}</div>
+                );
+            }
         }));
 
         this.setState(newState);
@@ -302,6 +311,14 @@ class DataTable extends Component {
                 rowGetter={this.rowGetter}
                 rowsCount={this.getSize()}
 
+                rowRenderer={props => {
+                    /* eslint-disable */
+                    console.warn(props);
+                    /* eslint-enable */
+                    props.height = props.idx === 0 ? 100 : props.height;
+                    return (<Row {...props}/>);
+                }}
+
                 {...extraProps}
 
             />

usage-sparklines.py

@@ -0,0 +1,67 @@
+# -*- coding: UTF-8 -*-
+
+import dash
+from dash.dependencies import Input, Output, State
+import dash_core_components as dcc
+import dash_html_components as html
+import dash_table_experiments as dt
+import json
+import pandas as pd
+import plotly
+
+app = dash.Dash()
+
+app.scripts.config.serve_locally = True
+
+DF_GAPMINDER = pd.read_csv(
+    'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
+)
+sparklines = {
+    c: html.Div(style={'height': 100, 'width': '100%'}, children=dcc.Graph(
+        id=c,
+        figure={
+            'data': [{
+                'x': DF_GAPMINDER[c],
+                'type': 'histogram'
+            }],
+            'layout': {
+                'height': 100,
+                'width': 150,
+                'margin': {
+                    'l': 0, 'r': 0, 't': 0, 'b': 0
+                },
+                'xaxis': {
+                    'showticklabels': False,
+                    'showline': False,
+                    'showgrid': False,
+                },
+                'yaxis': {
+                    'showticklabels': False,
+                    'showline': False,
+                    'showgrid': False,
+                }
+            }
+        },
+        config={'displayModeBar': False}
+    ))
+    for c in DF_GAPMINDER.columns
+}
+
+app.layout = html.Div([
+    html.H1('💖 Dash Sparklines 💖', style={'textAlign': 'center'}),
+    html.H2(html.I('Coming Soon'), style={'textAlign': 'center'}),
+    dt.DataTable(
+        rows=[sparklines] + DF_GAPMINDER.to_dict('records'),
+        id='table',
+        min_height=1500,
+    ),
+    html.Div(dcc.Dropdown(), style={'display': 'none'})
+], className="container")
+
+
+app.css.append_css({
+    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
+})
+
+if __name__ == '__main__':
+    app.run_server(debug=True, port=8060)

usage.py

@@ -9,6 +9,7 @@
 import plotly
 
 app = dash.Dash()
+server = app.server
 
 app.scripts.config.serve_locally = True
 # app.css.config.serve_locally = True