web-dev-qa-db-ja.com

`DataTable`定義を介してCSSを<table>要素に適用する方法（幅を100％にするため）？

問題

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>はそうではありません。

gif demo

問題は… 同じ 同様のコードはダッシュ0.xで動作します…

質問

Dash 1.0を使用して、セルを水平方向に自動拡張して、テーブルが水平方向のスペース全体を占めるようにする方法を教えてください。

または、言い換えると、DataTable要素を介して<table>要素をスタイルする方法は？

最小（時々そうではない）作業例

dash 0.xの場合：✓

  • 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)

dash 1.0の場合：✗

  • 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)
cssplotly-dash
7
ebosi

単純な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％になるだけでなく、応答性も向上します。どうやって？ブラウザのサイズを変更して、効果を確認してください。

お役に立てれば。

1
noobprogrammer