Page_action= "native" not working as expected

[kanishkaK]

html.Div(children=
151 [
152 dcc.Interval(
153 id=‘interval-component’,
154 interval= 30 * 1000,
155 n_intervals=0
156 ),
157 dash_table.DataTable(
158 id=‘table’,
159 columns= generate_columns(time_intervals),
160 page_size=50,
161 # page_current=0,
162 page_action= “native”,
163
164 data=history_df.to_dict(‘records’),
This is a snippet of my code where the table is a child.

this is how to shows instead of arrows.

worth noting: I’ve styled my table “style_table={‘height’: ‘400px’, ‘overflowY’: ‘auto’},” (in case that makes any difference.

[Berbere]

Hey @kanishkaK,

Your problem is most likely due to styling. I would check the external style sheet and/or theme ( if you use any). If you do not use any of them; my second “go to” would be to check the version of dash_table library. It might be the case that styling of a table was designed in that way in the earlier versions.

If you end up not finding a solution to your issue, feel free to share your full code in a reformatted text (by using </> button on top of the text input area). Unfortunately it is very hard to read your code.

Cheers!

[kanishkaK]

hey yeah I just cleaned my code. I don’t think there’s an issue with the style as it’s just fonts and colors.
please take a look at it (I hope it’s cleaner.)

app = dash.Dash(name)

app.layout = html.Div(children=[
html.Div(“HPC Perforce Infrastructure Monitoring Dashboard solutions”,
className=‘dashboard-header’),
html.H1(“Cheetah Perforce Project Status”, className=‘custom-heading’),
html.H5(“End to end monitoring of Cheetah Perforce for each project”, className=“custom-heading”),
html.Div([
html.Button(“Synced”, className=‘custom-button-green’, title=“Green Button”),
html.Button(“Not Synced”, className=‘custom-button-red’, title=“Red Button”),
]),
html.Div(children=[
dcc.Interval(id=‘interval-component’, interval=30 * 1000, n_intervals=0),
dash_table.DataTable(
id=‘table’,
columns=generate_columns(time_intervals),
page_size=50,
page_action=“native”,
data=history_df.to_dict(‘records’),
style_data_conditional=style_condition,
style_header={‘backgroundColor’: ‘#1d3557’, ‘fontWeight’: ‘bold’, ‘color’: ‘white’},
style_cell={‘whiteSpace’: ‘normal’, ‘textAlign’: ‘center’},
style_table={‘height’: ‘400px’, ‘overflowY’: ‘auto’}
)
])
])

[Berbere]

Hey @kanishkaK

Here I reproduce a table with your dash_table.DataTable() props, It works as expected for me.

from dash import Dash, dash_table, html
from plotly.express import data

app = Dash(__name__)

df= data.election()

app.layout = html.Div(children=[
                    dash_table.DataTable(
                    id="table",
                    columns=[{"name": i, "id": i} for i in df.columns],
                    page_size=50,
                    page_action="native",
                    data=df.to_dict("records"),
                    #style_data_conditional=style_condition,
                    style_header={'backgroundColor': '#1d3557', 'fontWeight': 'bold', 'color': 'white'},
                    style_cell={"whiteSpace": "normal", "textAlign": "center"},
                    style_table={"height": "400px", "overflowY": "auto"},
                    )
                ])
                      
if __name__ == '__main__':
    app.run(debug=True)

Could you please copy & paste and run this code and share the output for me?

By the way I am getting this output on a Safari browser.

[kanishkaK]

Hey, I’m getting the same buttons but I couldn’t import data-table from dash. I was getting error "ImportError: cannot import name ‘dash_table’ from ‘dash’ "
This is how I had to change the code to get it to run. I’m running it on a server and not my local machine.

import dash
import dash_html_components as html
import dash_table
from plotly.express import data

app = dash.Dash(name)

df= data.election()

app.layout = html.Div(children=[
dash_table.DataTable(
id=“table”,
columns=[{“name”: i, “id”: i} for i in df.columns],
page_size=50,
page_action=“native”,
data=df.to_dict(“records”),
#style_data_conditional=style_condition,
style_header={‘backgroundColor’: ‘#1d3557’, ‘fontWeight’: ‘bold’, ‘color’: ‘white’},
style_cell={“whiteSpace”: “normal”, “textAlign”: “center”},
style_table={“height”: “400px”, “overflowY”: “auto”},
)
])

if name == ‘main’:
app.run_server(host=‘0.0.0.0’, port=8050, debug=True)

[kanishkaK]

[Berbere]

Hey again @kanishkaK,

Ahaaa!
As I suspected; you are using the old version of Dash.

As of Dash 2, the development of Dash Table has been moved to the main Dash repo

I would suggest you to uninstall dash and dash_table packages and re-install dash again!

Cheers!

[kanishkaK]

I did that, I don’t know what’s happening. I’ll check again tomorrow

[kanishkaK]

Hey @Berbere ,
I’ve the latest version of dash 2.14.1 and it’s still not able to import dash_table from it.
These are the versions I have.

dash 2.14.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0

[Berbere]

Hey @kanishkaK,

Are you on a IDE? If yes, please check whether it uses the right python path. Alternatively, you can create a conda environment, activate it and installl your dash packages in it.

Cheers!