✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Datatable toggle columns button placement in python

I’m trying to move the “toggle columns” button from the top of the datatable to under it.
And changing the “Toggle Columns” font and in the dropdown menu.
I can’t find anything online so anything feedback is appreciated!

Here dumbed down version of my code / problem.

import dash
import dash_table
import pandas as pd

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

app = dash.Dash(name)

cols = [{i: i, “id”: i,‘hideable’:True} for i in df.columns]

app.layout = dash_table.DataTable(
id=‘table’,
columns=[{“name”: i, “id”: i,‘hideable’:True} for i in df.columns],
data=df.to_dict(‘records’),
)

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

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)

1 Like

Thank you! :smiley:
I thought I had to do something with css but as a beginner it is quite hard to figure out what (for me at least)!

1 Like