Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

table's height becomes too small when filtering returns 0 rows and virtualized=true #413

Open
@chriddyp

Description

@chriddyp

virtualized-collapse

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
# Assign row IDs
df['id'] = df.index

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H3('Row IDs'),

    dash_table.DataTable(
        id='table',
        columns=[{
            'id': c,
            'label': c
        } for c in df.columns if c != 'id'],
        data=df.to_dict('records'),
        virtualization=True,
        filtering='fe',
        sorting=True,
        pagination_mode=False,
        row_selectable='multi',
        derived_virtual_selected_row_ids=[]
    ),

    dcc.Graph(id='graph')
])


@app.callback(
    Output('graph', 'figure'),
    [Input('table', 'derived_virtual_row_ids'),
     Input('table', 'derived_virtual_selected_row_ids')])
def display_graph(row_ids, selected_row_ids):
    if row_ids is not None:
        filtered_df = df.loc[row_ids, :].copy()
    else:
        filtered_df = df.copy()

    filtered_df['color'] = '#0074D9'
    filtered_df.loc[selected_row_ids, 'color'] = '#85144b'

    return {
        'data': [
            {
                'x': filtered_df['country'],
                'y': filtered_df['gdpPercap'],
                'type': 'bar',
                'marker': {
                    'color': filtered_df['color']
                }
            }
        ],
        'layout': {
            'uirevision': 'constant',
            'yaxis': {
                'title': 'gdpPercap'
            }
        }
    }


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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions