在 Dash DataTable 中对齐 header

Question

我想在 Dash DataTable 中将 header 左对齐。我使用 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)

我希望与 style_cell 中的行为相同，但它没有任何效果，列为 left-aligned，header 为 right-aligned。我不确定，但自从我更新到 Dash 2.1.0 后我就想到了。如何将 header 左对齐？

Answer 1

该行为似乎是由这些样式引起的

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name {
    margin-left: auto;
}

作为解决方法，您可以添加自己的样式来覆盖上面的样式

div.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name {
    margin-left: unset;
}

在 Dash DataTable 中对齐 header

Align header in Dash DataTable

python

datatable

alignment

plotly-dash