Tags:
archive_me1Add my vote for this tag create new tag
, view all tags

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 smile

<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 smile

-- 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 smile

-- 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

Edit | Attach | Watch | Print version | History: r16 < r15 < r14 < r13 < r12 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r16 - 2007-12-17 - SvenDowideit
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.