diff --git a/dash_table_experiments/dash_table_experiments.css b/dash_table_experiments/dash_table_experiments.css index 1946da8..295a975 100644 --- a/dash_table_experiments/dash_table_experiments.css +++ b/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; diff --git a/dash_table_experiments/metadata.json b/dash_table_experiments/metadata.json index 7070f4d..7f10fbd 100644 --- a/dash_table_experiments/metadata.json +++ b/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" diff --git a/package.json b/package.json index a62e818..d89764f 100644 --- a/package.json +++ b/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", diff --git a/src/components/DataTable.react.js b/src/components/DataTable.react.js index 763ea2a..33c4564 100644 --- a/src/components/DataTable.react.js +++ b/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) : +
{cellProps.value}
+ ); + } })); this.setState(newState); @@ -294,7 +304,7 @@ 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} @@ -302,6 +312,23 @@ class DataTable extends Component { rowGetter={this.rowGetter} rowsCount={this.getSize()} + rowRenderer={props => { + /* eslint-disable */ + console.warn('rowProps', props); + /* eslint-enable */ + return ( + { + /* eslint-disable */ + console.warn('cellProps', cellProps); + /* eslint-enable */ + cellProps.children = this.props.render(cellProps.value); + return + }} + {...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; diff --git a/usage-sparklines.py b/usage-sparklines.py new file mode 100644 index 0000000..45e8c5b --- /dev/null +++ b/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) diff --git a/usage.py b/usage.py index 73be52b..06e0bc1 100644 --- a/usage.py +++ b/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

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /