Skip to main content

Dash component for React-Table

Project description

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.

Project details


Download files

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

Filename, size & hash SHA256 hash help File type Python version Upload date
dash_react_table-0.0.3.tar.gz (788.8 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page