WIP - enable components as cells

dash_table_experiments/dash_table_experiments.css

@@ -1,3 +1,8 @@
+.react-grid-Cell {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+}
+
 .react-grid-Container {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;

dash_table_experiments/metadata.json

@@ -229,6 +229,17 @@
         "required": false,
         "description": ""
       },
+      "column_width": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
       "row_height": {
         "type": {
           "name": "number"

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, {Cell, Row} from 'react-data-grid';
 import {Toolbar} from 'react-data-grid-addons';
 import R from 'ramda';
 
@@ -87,7 +87,17 @@ class DataTable extends Component {
             name: c,
             editable: Boolean(props.editable),
             sortable: Boolean(props.sortable),
-            filterable: Boolean(props.filterable)
+            filterable: Boolean(props.filterable),
+            width: props.column_width,
+            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);
@@ -294,14 +304,31 @@ class DataTable extends Component {
                 headerRowHeight={header_row_height}
                 minHeight={min_height}
                 minWidth={min_width}
-                row_height={row_height}
+                rowHeight={row_height}
                 row_scroll_timeout={row_scroll_timeout}
                 tab_index={tab_index}
 
                 columns={columns}
                 rowGetter={this.rowGetter}
                 rowsCount={this.getSize()}
 
+                rowRenderer={props => {
+                    /* eslint-disable */
+                    console.warn('rowProps', props);
+                    /* eslint-enable */
+                    return (
+                        <Row
+                            cellRenderer={(cellProps) => {
+                                /* eslint-disable */
+                                console.warn('cellProps', cellProps);
+                                /* eslint-enable */
+                                cellProps.children = this.props.render(cellProps.value);
+                                return <Cell {...cellProps}/>
+                            }}
+                            {...props}
+                        />);
+                }}
+
                 {...extraProps}
 
             />
@@ -338,6 +365,9 @@ DataTable.propTypes = {
     //     rows_start: PropTypes.number,
     //     rows_end: PropTypes.number
     // }),
+    column_width: PropTypes.number, // TODO or null?
+    // TODO - column properties for each column
+    // TODO - column_style?
     row_height: PropTypes.number,
     row_scroll_timeout: PropTypes.number,
     tab_index: PropTypes.number,
@@ -363,7 +393,8 @@ DataTable.defaultProps = {
     sortable: true,
     filters: {},
     selected_row_indices: [],
-    row_selectable: false
+    row_selectable: false,
+    column_width: null
 }
 
 export default DataTable;

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