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 Python 3

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