Skip to main content

Dash component for React-Table

Project description


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)


dash-react-table is hosted on PyPI, and can be installed by running

pip install dash-react-table


import dash
import dash_html_components as html
import pandas as pd

from dash_react_table import DashReactTable

df = pd.read_csv(

data = df.to_json(orient='records')

columns = [{'Header': i, 'accessor': i} for i in df.columns]

app.layout = html.Div([

if __name__ == '__main__':

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.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_react_table-0.0.3.tar.gz (788.8 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page