I want to align the header to the left in a Dash DataTable. I use the example code from the Dash DataTable documentation. Then I have implemented the style_header dicitionary as suggested in the DataTable reference.
from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict
data = OrderedDict(
[
("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
("Humidity", [10, 20, 30, 40, 50, 60]),
("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
]
)
df = pd.DataFrame(data)
app = Dash(__name__)
app.layout = dash_table.DataTable(
data=df.to_dict('records'),
columns=[{'id': c, 'name': c} for c in df.columns],
style_header={'textAlign': 'left'},
style_cell={'textAlign': 'left'}
)
if __name__ == '__main__':
app.run_server(debug=True)
I would expect the same behaviour as in style_cell, but it has no effect, the columns are left-aligned and the header is right-aligned. I'm not sure, but it occurs to me since I have updated to Dash 2.1.0. How can I align the header to the left?
The behavior seems to be caused by these styles
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name {
margin-left: auto;
}
As a workaround you could add your own styles to overwrite the above
div.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name {
margin-left: unset;
}