Datatable toggle columns button placement in python

[jlkdanske]

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)

[Jwolf]

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)

[jlkdanske]

Thank you!
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)!

[Funkyman]

Hi, I have a really similar question.

I am new in Dash and in css so sorry if it is too simple or this is not the most appropriate place.

I just want to modify the name of the toggle button. I have tried to modify it following for example:

How to rename "Toggle Columns" button?

Hi! I have a dash_table.Datatable with hideable columns and a “Toggle Columns” button. I know how to style and hide it. But I would also like to edit the inner text inside the <button> tag. I could not do it with CSS. How can I do that?

but no success.

Thanks