Dynamic list of td's

Learn
1

I have a BOOLEAN of showhurdle.
If True then show an extra td.
if False then do not show and extra td.

I have tried…
colspan 0

how can i exclude a td?
or
Else Nothing…

someBodyTds : Date -> List (Html msg)
someBodyTds date = let
    hurdlePoint =
        if showHurdle then
            td
                []
                -- TODO: This should hold the actual hurdle points.
                [ text "Hurdle 1 " ]

        else
            --DONT show this TD AT ALL
            td [] [ text "I should not exist" ]
in
[ td 
        []
        [ text "td ONE" ]
, td
    []
    [ text Date.toIsoString date ]
, hurdlePoint
, td
    []
    [ text " td THREE or FOUR depending... "]
]
2

A common solution is to replace td [] [ text "I should not exist" ] with text "".

Another solution is to build the list like this:

List.concat
  ( [ [ td 
          []
          [ text "td ONE" ]
      , td
          []
          [ text Date.toIsoString date ]
      ]
    , hurdlePoint
    , [ td
        []
        [ text " td THREE or FOUR depending... "]
      ]
    ]
  )

Where hurdlePoint is List (Html msg) and returns [] if showHurdle is false.

1 Like
3

replacing with text "" still gives a td its just empty.
it then offsets the whole table. as the the table header has a colspan of 3 or 4.
So that does not work. Since I need the WHOLE td to either exist or not. not the text data.

i know I could do…

someBodyTds : Date -> List (Html msg)
someBodyTds date = let
    hurdlePoint =
        if showHurdle then
            [ td 
                []
                [ text "td ONE" ]
            , td
                []
                [ text Date.toIsoString date ]
            , td [] [ text "Hurdle 1" ]
            , td
                []
                [ text " td THREE or FOUR depending... "]
             ]

        else
            [ td 
                []
                [ text "td ONE" ]
            , td
                []
                [ text Date.toIsoString date ]
            , td
                []
                [ text " td THREE or FOUR depending... "]
             ]
in
hurdlePoint
4

I meant something like this, which shouldn’t print an extra td if showHurdle is false.

someBodyTds : Date -> List (Html msg)
someBodyTds date = let
    hurdlePoint =
        if showHurdle then
            td
                []
                -- TODO: This should hold the actual hurdle points.
                [ text "Hurdle 1 " ]

        else
            --DONT show this TD AT ALL
            text ""
in
[ td 
        []
        [ text "td ONE" ]
, td
    []
    [ text Date.toIsoString date ]
, hurdlePoint
, td
    []
    [ text " td THREE or FOUR depending... "]
]
1 Like
5

Thank you so much!

Also List.concat is probably the better approach. it looks cleaner…

SomeBodyTds : Date -> List (Html msg)
forecastBottomThs date =
    let
        hurdlePoint =
            if showHurdle then
                [ td [] [ text "text MAYBE 3" ] ]

            else
                []
    in
    List.concat
        [ [ td [] [ text "text 1" ] ]
        , [ td [] [ text "text 2" ] ]
        , hurdlePoint
        , [ td [] [ text "text 3 or 4" ] ]
        ]
1 Like
6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.