Skip to main content

Dash component based on React Table v6

Project description

ReactTableDash

Installation

pip install react-table-dash

Usage

Example app

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import numpy as np
import pandas as pd
import dash_bootstrap_components as dbc
import dash_core_components as dcc
from react_table_dash import ReactTableDash
from datetime import datetime

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

N_COLS, N_ROWS = 3, 1000

def random_data(n_cols, n_rows):
    # Generate dummy data
    alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    df = pd.DataFrame({alphabets[i]: np.random.rand(n_rows).tolist() for i in range(n_cols)})
    if n_cols > 1:
        df.loc[:, 'B'] = df.B - 0.5

    data = df.to_dict(orient='records')
    columns = [{'Header': 'Column {}'.format(c), 'accessor': c} for c in alphabets[:n_cols]]

    # Add custom column
    columns.append({
        'Header': 'Progress A',
        'accessor': 'A',
        'customType': {
            'type': 'progressBar',
            'thresholds': [0.2, 0.4, 0.6, 0.8],
            'colors': ['#2dc937', '#99c140', '#e7b416', '#db7b2b', '#cc3232']
        }
    })

    columns.append({
        'Header': 'Decimal A',
        'accessor': 'A',
        'customType': {
            'type': 'decimal',
            'decimalPlaces': 2
        }
    })

    columns.insert(0, {
        'Header': 'Details',
        'width': 80,
        'customType': {'type': 'button', 'label': 'Details'}
    })

    return data, columns

col_slider = dbc.FormGroup([
    dbc.Label("Columns", html_for="cols"),
    dcc.Slider(id="n_cols", min=1, max=10, step=1, value=N_COLS),
])

row_slider = dbc.FormGroup([
    dbc.Label("Rows", html_for="rows"),
    dcc.Slider(id="n_rows", min=100, max=10000, step=100, value=N_ROWS),
])

refresh_btn = dbc.Button('Refresh', id='refresh-btn', size='sm')
dev_btn = dbc.Button('Dev', id='dev-btn', size='sm')


data, columns = random_data(N_COLS, N_ROWS)
text = 'columns = {}, rows = {}'.format(N_COLS, N_ROWS)
tbl = ReactTableDash(
    id='tbl',
    data=data,
    columns=columns,
    defaultPageSize=100,
    className="-striped -highlight",
    showPagination=True,
    showPaginationTop=False,
    showPaginationBottom=True,
    showPageSizeOptions=True,
    pageSizeOptions=[10, 20, 25, 50, 100, 500],
    style={'height': '400px'},
    filterable=True
)

app.layout = html.Div([
        dbc.CardDeck([
            dbc.Card([
                dbc.CardBody([
                    col_slider,
                    row_slider,
                    refresh_btn
                ])
            ]),
            dbc.Card([
                dbc.CardHeader([
                    'Info'
                ]),
                dbc.CardBody([
                    html.Div(text, id='output'),
                    html.Div(id='output2')
                ])
            ])
        ]),
    dbc.Row([
        dbc.Col([
            html.Div(tbl, id='tbl-container')
        ], width=12),
    ], id='main-container'),
])

@app.callback(Output('output2', 'children'),
            [Input('tbl', 'click')])
def output2(tbl_value):
    return 'Clicked row index: {}'.format(tbl_value)

@app.callback([Output('tbl', 'data'), Output('tbl', 'columns'), Output('output', 'children')],
            [Input('refresh-btn', 'n_clicks')],
            [State('n_cols', 'value'),
             State('n_rows', 'value')])
def load_data(n_clicks, n_cols, n_rows):
    data, columns = random_data(n_cols, n_rows)
    return data, columns, 'columns = {}, rows = {}'.format(n_cols, n_rows)

if __name__ == '__main__':
    app.run_server(debug=True)

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

react_table_dash-0.0.3.tar.gz (148.8 kB view hashes)

Uploaded source

Built Distribution

react_table_dash-0.0.3-py3-none-any.whl (148.8 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page