Missing tr inside thead

[martinos]

I tried the elm-sortable-table with Twitter Bootstrap, but my table header was not displaying well. So I have found that the <th> elements were not wrapped into <tr> before being wrapped themselves by a <thead>

So I looked at the MDN Docs and it says for <thead> that:

Permitted content:  Zero or more <tr> elements.

I think that if we want the elm-sortable-table to play well with all the css frameworks, wrapping the <th> with a <tr>would be a must.

eg using this

  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
    </tr>
  </thead>

instead of

  <thead>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
      <th>Table Header 4</th>
   </thead>

Thanks

[tekul]

A possible workaround is to use the customization option for thead:

    c =
        Table.defaultCustomizations

    myThead =
        c.thead
            >> .children
            >> tr []
            >> List.singleton
            >> Table.HtmlDetails []

    tableCustomizations =
        { c | thead = myThead }

    cfg =
        Table.customConfig
            { toId = ...
            ...
            , customizations = tableCustomizations
            }

[gyzerok]

I can confirm that there is same issue with Bulma

[martinos]

I just rewrote @tekul solution for me to understand. I hope this will help other people:

defaultCustomizations =
    Table.defaultCustomizations

-- Since Table.simpleThead is private we can extract it:

simpleThead =
    defaultCustomizations.thead

-- We extract the children from the simpleThead (th [] []) and we rewrap them in a tr

correctedThead : List ( String, Table.Status, Attribute msg ) -> Table.HtmlDetails msg
correctedThead rowDefn =
    Table.HtmlDetails []
        [ tr [] (rowDefn |> simpleThead >> .children) ]

tableCustomizations =
    { defaultCustomizations | thead = correctedThead }

-- Since this method is not exported from the package
-- cfg =
--         Table.customConfig
--             { toId = ...
--             ...
--             , customizations = tableCustomizations
--             }

[martinos]

For those who are interested, I have fixed the issue on my forked version of the project. Note that the api is not exactly the same. I have added some types and renamed some others to help me understand the project.

http://package.elm-lang.org/packages/martinos/elm-sortable-table/latest

The second example in the README uses Bulma.

[billstclair]

I fixed this as well in version 1.0.3 of my 0.19 upgrade of Evan's code. Had I known about @martinos's package, I may have asked him to upgrade to 0.19 instead (or provided a PR doing that), but I didn't discover it until now.

https://package.elm-lang.org/packages/billstclair/elm-sortable-table/latest