new "v1.0"Dash のスイートを使用しています(以下のpip要件を参照)。全幅を取るDataTable
を作成したい(<p>
要素のように)。
テーブルを次のように設定しました(以下の完全なMWE)。
dash_table.DataTable(
…
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%',
},
…
ただし、以下のデモに示すように、生成された<div class="cell cell-1-1 dash-fixed-content">
のHTMLコンテナーが全幅であっても、そこに含まれる<table>
はそうではありません。
問題は… 同じ 同様のコードはダッシュ0.xで動作します…
Dash 1.0を使用して、セルを水平方向に自動拡張して、テーブルが水平方向のスペース全体を占めるようにする方法を教えてください。
または、言い換えると、DataTable
要素を介して<table>
要素をスタイルする方法は?
0.x_requirements.txt
dash-core-components==0.39.0
dash-html-components==0.13.2
dash-renderer==0.15.1
dash-table==3.1.7
dash==0.31.1
datetime
pandas==0.23.4
plotly==3.4.1
0.x_testapp.py
import dash
import dash_table
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P(
"foobar",
id='datatable-interactivity-container',
),
dash_table.DataTable(
id='table',
# data import
data=df.to_dict("rows"),
columns=[{"name": i, "id": i} for i in df.columns],
# table interactivity
editable=True,
# filtering=True,
sorting=True,
sorting_type="multi",
row_selectable="multi",
# row_deletable=True,
# table style (ordered by increased precedence: see
# https://dash.plot.ly/datatable/style in § "Styles Priority"
# style table
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%',
},
# style cell
style_cell={
'fontFamily': 'Open Sans',
'textAlign': 'center',
'height': '60px',
'padding': '2px 22px',
'whiteSpace': 'inherit',
'overflow': 'hidden',
'textOverflow': 'Ellipsis',
},
style_cell_conditional=[
{
'if': {'column_id': 'State'},
'textAlign': 'left'
},
],
# style header
style_header={
'fontWeight': 'bold',
'backgroundColor': 'white',
},
# style filter
# style data
style_data_conditional=[
{
# stripped rows
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
},
{
# highlight one row
'if': {'row_index': 4},
"backgroundColor": "#3D9970",
'color': 'white'
}
],
),
]
)
if __name__ == '__main__':
app.run_server(debug=True)
1.x_requirement.txt
dash_renderer==1.0.0
dash-core-components==1.0.0
dash-html-components==1.0.0
dash-table==4.0.0
dash==1.0.0
pandas==0.24.2
plotly==3.10.0
1.x_testapp.py
import dash
import dash_table
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P(
"foobar",
id='datatable-interactivity-container',
),
dash_table.DataTable(
id='table',
# data import
data=df.to_dict("rows"),
columns=[{"name": i, "id": i} for i in df.columns],
# table interactivity
editable=True,
# filtering=True,
sort_action="native",
sort_mode="multi",
row_selectable="multi",
# row_deletable=True,
# table style (ordered by increased precedence: see
# https://dash.plot.ly/datatable/style in § "Styles Priority"
# style table
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%',
},
# style cell
style_cell={
'fontFamily': 'Open Sans',
'textAlign': 'center',
'height': '60px',
'padding': '2px 22px',
'whiteSpace': 'inherit',
'overflow': 'hidden',
'textOverflow': 'Ellipsis',
},
style_cell_conditional=[
{
'if': {'column_id': 'State'},
'textAlign': 'left'
},
],
# style header
style_header={
'fontWeight': 'bold',
'backgroundColor': 'white',
},
# style filter
# style data
style_data_conditional=[
{
# stripped rows
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
},
{
# highlight one row
'if': {'row_index': 4},
"backgroundColor": "#3D9970",
'color': 'white'
}
],
),
]
)
if __name__ == '__main__':
app.run_server(debug=True)
単純なWordをクラスに追加して、アプリケーションの全幅テーブルを作成できます。
これに:
<div class="cell cell-1-1 dash-fixed-content">
これを追加:
<div class="table table-bordered table-hover table-responsive cell cell-1-1 dash-fixed-content">
これにより、幅が100%になるだけでなく、応答性も向上します。どうやって?ブラウザのサイズを変更して、効果を確認してください。
お役に立てれば。