dash_react_table

Dash component for React-Table


Keywords
plotly-dash
License
MIT
Install
npm install dash_react_table@0.0.3

Documentation

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-table

Usage

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.