Add thead and tfoot to TWiki tables

YahooUserInterfaceContrib has a JavaScript based table sorting, that relies on the header row being in a thead section, which is currently not the case.

I'd like to add both thead and tfoot to TWikiTables

so

| *Task* | *Summary* | *who* |
| 1 | make tables have headers | Sven| 
| 2 | add tfooters | Sven |
| 3 | add footer= to SEARCH | Sven |
| *Task* | *Summary* | %CALC{$SUM($ABOVE)}% |

• would 'somehow' determine that the top and bottom rows were thead and tfoot sections.
• also, multiple rows should be able to be in the thead and tfoot sections.

-- Contributors: SvenDowideit - 08 Mar 2007

Discussion

TWiki seems to be confused about what constitutes a header.

if you look at the html output of a table defined like

| *Task* | Summary | who |
| 1 | make tables have headers | Sven| 
| 2 | add tfooters | Sven |

Task	Summary	who
1	make tables have headers	Sven
2	add tfooters	Sven

you can see that the Task cell is a th element, but the other 2 are =td='s.

---

If you want to see how it looks with YahooUserInterfaceContrib, install it into a MAIN svn checkout, and then add the following to a topic

<link type="text/css" rel="stylesheet" href="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/datatable/assets/datatable.css"> 
<!-- Dependencies --> 
<script type="text/javascript" src="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<!-- OPTIONAL: Connection (enables XHR) --> 
<script type="text/javascript" src="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/connection/connection-min.js"></script> 
<!-- OPTIONAL: Drag Drop (enables resizeable columns) --> 
<script type="text/javascript" src="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/dragdrop/dragdrop-min.js"></script> 
<!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables JSON validation) --> 
<script type="text/javascript" src="http://www.json.org/json.js"></script> 
<!-- Source file --> 
<script type="text/javascript" src="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/datasource/datasource-beta-min.js"></script> 
<script type="text/javascript" src="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/datatable/datatable-beta-min.js"></script> 
<script type="text/javascript" src="%PUBURL%/TWiki/YahooUserInterfaceContrib/build/logger/logger.js"></script>
<script>
YAHOO.example.enhanceFromMarkup = function() { 
//    this.logger = new YAHOO.widget.LogReader(); 
    this.columnHeaders = [ 
        {key:"taskid",text:"Task",type:"number",sortable:true}, 
        {key:"summary",text:"Summary",sortable:true}, 
        {key:"state",text:"Who",sortable:true}, 
    ]; 
    this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders); 
    var markup = YAHOO.util.Dom.get("markup"); 

    this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null,{caption:"Example: Progressively Enhanced Table from Markup"}); 
}; 
YAHOO.util.Event.onContentReady("markup",YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true); 
</script>
<style>
/* custom css*/ 
#markup {margin:1em;} 
#markup table {border-collapse:collapse;} 
#markup th {border:1px solid #000;padding:.25em;background-color:lightblue;color:#fff;}/*dark gray*/ 
#markup td {border-bottom:1px solid #000;padding:.25em;} 
</style>



<div id="markup">
%TABLE{headerrows="3" footerrows="1"}%
| *Task* | *Summary* | *who* |
| *asdf* | *mhjmhj* | *rety* |
| *sd* | *ergreg* | *erty* |
| 1 | make tables have headers | Sven| 
| 2 | add tfooters | Sven |
| 3 | add footer= to SEARCH | Sven |
| Task | *Summary* | %CALC{$SUM($ABOVE)}% |
</div>

I'll be adding more magic to do the YUI table creation automagically.

-- SvenDowideit - 08 Mar 2007

TablePlugin renders one row per thead and tfoot section, whereas the table renderer in the core (due to its line by line nature) is only able to know if its in the thead (it has no idea how close to the end of the table it might be).

-- SvenDowideit - 26 Mar 2007

Sven has implemented a scheme where any row that contains a TH is added to a THEAD. I think this is wrong. Just because a row has a TH doesn't make it a header row. Consider this table:

	0	1
0	0	1
1	1	2

Clearly (to me anyway) only the top row should be in the THEAD, but right now all the rows get added.

We could argue about whether TH is "legal" outside a THEAD, but the fact is that HTML allows it. But we have a chance with TML to design a smarter heuristic which assigns rows to THEAD and TFOOT on a more intelligent basis. Here's my proposal; the THEAD should contain all rows at the top of the table that contain only empty cells and *cells*, and are contiguous with other head rows. TFOOT should use the same heuristic at the bottom of the table.

Of course this doesn't reflect the case where a long table has running headers - say every 20 rows - but then, TML tables are not very smart.

-- CrawfordCurrie - 11 May 2007

Add a TBODY around the remaining rows, along with 2 lines of CSS and you get a scrollable table too whose header/footer remains in place. Then you wouldn't need to repeat the headers every 20 lines.

Maybe an extra parameter (SCROLLABLE) to determine whether to add this CSS to a table or not. It will be more of a nuisance for smaller tables.

-- PankajPant - 11 May 2007

That's an excellent idea! The EditRowPlugin already uses THEAD and TFOOT to constrain the sorted rows.

-- CrawfordCurrie - 11 May 2007

mmm, so far, I'm glad i made the naive impl - its at least sparked the above better idea - I welcome and look forward to the improved implementation

-- SvenDowideit - 11 May 2007

Change state to UnderConstruction because this feature is not half way finished. On the contrary the current 4 checkins have left EditTablePlugin totally broken and failing unit test cases.

-- KennethLavrsen - 27 May 2007

All is now implemented and working

-- KennethLavrsen - 17 Dec 2007

The reason why we got buggy behaviour is that the order of the table elements is important. It should be:

1. THEAD
2. TFOOT
3. TBODY

It is quite unintuitive. The latest TablePlugin has it working correcltly.

-- ArthurClemens - 17 Dec 2007