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
Description
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)