elm-ui で column 内の table にスクロールバーを出す

スクロールバー出ない

import Element exposing (..)

column [ width fill, height fill, explain Debug.todo ]
    [ el [ width fill, height <| px 30 ] <| text "container on table"
    , table [ width fill, height fill, spacing 1, scrollbarY, explain Debug.todo ]
    <| { data = List.repeat 50 "table data"
        , columns =
            [ { header = text "table header"
            , width = fill
            , view = el [ padding 3 ] << text
            }
            ]
    }
    ]

column の子要素に直接 table を配置してその属性に scrollbarY を指定しても、スクロールバーが表示されず column の範囲をはみ出して描画されてしまいます。

• スクロールバー出ない版コード ＠ Ellie
  • 左側がスクロールバーの出ない table です。
  • 右側は table の親要素が column ではありません。こちらはスクロールバーが出ています。

この動きがバグなのか仕様なのかはちょっと分からないです。
似たような事象は 2018年の 9月に issue が挙がってますが、その後音沙汰がないです。

• Using centerX in a column with scrollbars causes the column to overflow its container

スクロールバー出る

import Element exposing (..)

column [ width fill, height fill, explain Debug.todo  ]
    [ el [ width fill, height <| px 30 ] <| text "container on table"
    , el [ width fill, height fill, scrollbarY ]  -- この el がポイント
    <| table [ width fill, height fill, spacing 1, explain Debug.todo ]
    <| { data = List.repeat 50 "table data"
        , columns =
            [ { header = text "table header"
            , width = fill
            , view = el [ padding 3 ] << text
            }
            ]
    }
    ]

column に直接 table を配置するのではなく、間に el を挟んでこの el の属性に scrollbarY を指定します。
こうすると期待した形でスクロールバーが表示されます。

• スクロールバー出る版コード ＠ Ellie

おしまり