Search code examples
elmelm-ui

Same row height for all table columns using elm-ui


I cannot figure out how to obtain the same row height for every column when using table or indexedTable in elm-ui. Is this possible (without setting a fixed height) or should I resort to implementing my own table with row and column?

The following ellie illustrates the issue. This is the code used to build the table

bgcolor idx =
    (if modBy 2 idx == 0 then
        gray

     else
        white
    )
        |> Background.color

view model =
    indexedTable []
        { data =
            [ { f1 = "f11", f2 = "f12" }
            , { f1 = "f21", f2 = "f22" }
            , { f1 = "f31", f2 = "f32" }
            , { f1 = "f41", f2 = "f42" }
            ]
        , columns =
            [ { header = text "f1"
              , width = fill
              , view = \idx d -> el [ Font.size 30, bgcolor idx ] <| text d.f1
              }
            , { header = text "f2"
              , width = fill
              , view = \idx d -> el [ Font.size 15, bgcolor idx ] <| text d.f2
              }
            ]
        }
        |> layout []

Thanks in advance.


Solution

  • Adding height fill to each cell's attributes fixes your Ellie example:

            , columns =
                [ { header = text "f1"
                  , width = fill
                  , view =
                        \idx d ->
                            el
                                [ Font.size 30
                                , bgcolor idx
                                , height fill -- NEW!!!
                                ]
                            <|
                                text d.f1
    
                  --
                  }
                , { header = text "f2"
                  , width = fill
                  , view =
                        \idx d ->
                            el
                                [ Font.size 15
                                , bgcolor idx
                                , height fill -- NEW!!!
                                ]
                            <|
                                text d.f2
                  }
                ]
    

    Fixed Ellie here.