Radioitem to choose from dataframe

Dash Python
1

Hello there,

i want to use a radioItem component to choose between two sets of a dataframe.
i’m not very firm with dash yet and also not with callbacks.

I would like use the radioItems to output a value either which i can then use to filter a dataframe.

My RadioItem

   dcc.RadioItems(
        id='types',
        options=[{'label':'Puts','value':'Puts'},
                 {'label':'Calls','value':'Calls'}
                 ],
                 value='Puts', inline=True),

Which then would output either ‘Puts’ or ‘Calls’

df = (df[df['Type'] == 'types'])

which sorts the column df['type'] by those containing either 'Puts'/'Calls'.

Is this possible without a callback function? Many thanks in advance for any help!!

Sorry for adding this to the exisiting question.

According to this guide you can add ClassName to the DataTable container to pass a stylesheet to a DataTable which it doesn’t by default… However if you follow the instructions you get this error:

TypeError: The dash_table.DataTable component (version 2.9.1) received an unexpected keyword argument: className
Allowed arguments: active_cell, cell_selectable, column_selectable, columns, css, data, data_previous, data_timestamp, derived_filter_query_structure, derived_viewport_data, derived_viewport_indices, derived_viewport_row_ids, derived_viewport_selected_columns, derived_viewport_selected_row_ids, derived_viewport_selected_rows, derived_virtual_data, derived_virtual_indices, derived_virtual_row_ids, derived_virtual_selected_row_ids, derived_virtual_selected_rows, dropdown, dropdown_conditional, dropdown_data, editable, end_cell, export_columns, export_format, export_headers, fill_width, filter_action, filter_options, filter_query, fixed_columns, fixed_rows, hidden_columns, id, include_headers_on_copy_paste, is_focused, loading_state, locale_format, markdown_options, merge_duplicate_headers, page_action, page_count, page_current, page_size, persisted_props, persistence, persistence_type, row_deletable, row_selectable, selected_cells, selected_columns, selected_row_ids, selected_rows, sort_action, sort_as_null, sort_by, sort_mode, start_cell, style_as_list_view, style_cell, style_cell_conditional, style_data, style_data_conditional, style_filter, style_filter_conditional, style_header, style_header_conditional, style_table, tooltip, tooltip_conditional, tooltip_data, tooltip_delay, tooltip_duration, tooltip_header, virtualization

Has this been removed? if so which keyword argument has the be used now?

2

Hey @mvnchi,

As a general rule; callbacks are used to make connection between components, more specifically between component properties, (e.g value property of your RadioItem with ‘types’ id as a input to data property of a table as a output). Hence, you can use a callback function to connect via filtering your data to the selected value of your RadioItem. However, it may not convenient for your case, since Dash_table components have inherent filtering option.

Actually the guide you shared has an example code that shows how to use Dash_table and and how to implement any themes to it.

I am sharing with you below in case you missed that:


"""
If you run this theme locally, you will see the "VAPOR" theme.  To change the theme,
update the theme in the `external_stylesheets`.  Or use one of the theme change components.

"""

import dash
from dash import html, dash_table
import dash_bootstrap_components as dbc
import pandas as pd


dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.VAPOR, dbc_css])

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

table = html.Div(
    dash_table.DataTable(
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict("records"),
        row_selectable="single",
        row_deletable=True,
        editable=True,
        filter_action="native",
        sort_action="native",
        style_table={"overflowX": "auto"},
    ),
)


with_theme = html.Div(
    [
        html.H5("DataTable with Bootstrap theme"),
        table,
    ],
    className="dbc dbc-row-selectable",
)


without_theme = html.Div([html.H5("No theme", className="mt-4"), table])

app.layout = dbc.Container([with_theme, without_theme])


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

Cheers!

1 Like