Missing tr inside thead
martinos opened this issue · 5 comments
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
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
}
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
-- }
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.
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