0.0.3 • Published 5 years ago
dash_react_table v0.0.3
dash-react-table
Dash component for react-table
dash-react-table provides a lightweight table component built on top of react-table.
Note: This above link will take you to version 6 which is the one I used for this component (v6.8.6 to be exact)
Installation
dash-react-table is hosted on PyPI, and can be installed by running
pip install dash-react-tableUsage
import dash
import dash_html_components as html
import pandas as pd
from dash_react_table import DashReactTable
df = pd.read_csv(
'https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
data = df.to_json(orient='records')
columns = [{'Header': i, 'accessor': i} for i in df.columns]
app.layout = html.Div([
DashReactTable(
id='table',
data=data,
columns=columns
)
])
if __name__ == '__main__':
app.run_server(debug=True)
DashReactTable Properties
| Attribute | Description | Type | Default value |
|---|---|---|---|
| id | Optional identifier used to reference component in callbacks | string | |
| data | An array of data | list of dict where each dict corresponds to a row of data | |
| columns | An array of column attributes | list of dict which can contain the followings keys: Header(string), accessor(string), sortable(boolean), filterable(boolean), show(boolean), width(int), minWidth(int), maxWidth(int), className(string), style(string), headerClassName(string), headerStyle(string) | |
| showPagination | Turn on pagination | boolean | false |
| showPaginationTop | Put pagination on top | boolean | false |
| showPaginationBottom | Put pagination on top | boolean | true |
| showPageSizeOptions | Provide options for pagination | boolean | true |
| pageSizeOptions | Define the size options for pagination | list of int | 5, 10, 20, 25, 50, 100 |
| defaultPageSize | Default page size | int | 20 |
| minRows | Controls the minimum number of rows to display | int | |
| sortable | Allow columns to be sorted | boolean | true |
| resizable | Allow columns to be resizable | boolean | true |
| filterable | Allow columns to be filterable. The component has a custom filter which performs a case/order insensitive filter. | boolean | false |
| className | Add classname to react-table. The main use case for this is to add "-striped" and/or "-highlight" | string | |
| style | inline table styles | dict | |
| conditionalFormatting | Custom conditional color formatting. Currently only supports d3.scaleThreshold. | dict with contains the following keys: domain(list of int), range(list of dict styles), ignore(list of string) |
Additonal notes:
All column properties can override table level properties
To use conditional formatting you must have N + 1 range values for N domain values. Range values must be camelcased styles.
To make a scrolling table with fixed headers, be sure to add a fixed height to the table's style property.