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.
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
}
]