Datatable toggle columns button placement in python

You can use the css property to style the dash_table buttons (see: https://dash.plotly.com/datatable/reference). The code below moves the toggle columns button below the table and changes the font:

import dash
import dash_html_components as html
import dash_table
import pandas as pd
import numpy as np

app = dash.Dash(name)

df = pd.DataFrame({
‘A’ : np.random.rand(10),
‘B’ : np.random.rand(10)
})

app.layout = html.Div(children=[
dash_table.DataTable(
id=‘table’,
columns=[{‘name’: i, ‘id’: i,‘hideable’:True} for i in df.columns],
data=df.to_dict(‘records’),
css =[
{‘selector’:’.dash-spreadsheet-menu’,‘rule’:‘position:absolute;bottom:-30px’}, #move below table
{‘selector’:’.show-hide’,‘rule’:‘font-family:Impact’}, #change font
]
)
])

if name == ‘main’:
app.run_server(debug=True)

3 Likes