History
Screwturn uses a rather complex syntax when you need to create a table on a wiki page.
The current syntax for tables (version 3.*) is pretty flexible, but is at the same time rather complex as well as unlogical for everyday use.
To overcome this, I have been trying several ways to solve it for myself, but until now, I didn't publish them, because my solutions was clumpsy or too complex in syntax.
But recently I found a way to implement a flexible and easy to use method.
Solution
The entry to the cave of implementing new syntax, are snippets.
When Snippets are combined with JQuery and JavaScript, you can do almost anything.
In this solution I create two snippets, one to define a table on the page, and another to feed rows of data into that table.
I call these two snippets
qtab and
qrow,
q for quick.
Create the qtab snippet
Create a new snippets with the name
'qtab, enter the code:
<table style="text-align:left;margin-left:auto;margin-right:auto;" id="snippet_qtable_?1?"></table>
<nowiki><script>
data = "?2?".replace(/\s{3,}/g, " ").split(" ");
tr = 'TR';
td = 'TD';
colsum_?1? = [];
colsumcnt_?1? = [];
rowstyle = ';background-color: #9CF;';
cells = "";
for(ci in data) {
colsum_?1?[ci] = 0;
colsumcnt_?1?[ci] = 0;
cells += '<' + td + ' style="' + rowstyle + '">' + data[ci] + '</' + td + '>';
}
$('<' + tr + '>' + cells + '</' + tr + '>').appendTo('table#snippet_qtable_?1?');
</script></nowiki>
Remove the terminating newline, so that the caret sits right behind </nowiki> and cannot come further down. Save the snippet.
Create the qrow snippet
Create a new snippets with the name
'qrow, enter the code:
<nowiki><script>
row = ("?2?").replace(/\s{3,}/g," ").split(" ");
tr = 'TR';
td = 'TD';
cellstyle = ';font-weight: bolder;';
rowsum = 0;
rowsumcnt = 0;
cells = "";
norowsum = false;
nocolsum = false;
for(ci in row) {
if(row[ci].search(/^\.{2,}$/) >= 0) {
row[ci] = ' ';
}
if(row[ci] == '_rowsum') {
row[ci] = rowsum.toString();
cellstyle = ';font-weight: bolder;';
norowsum = true;
}
if(row[ci] == '_rowavg') {
row[ci] = (Math.round(100*rowsum/rowsumcnt)/100).toString();
cellstyle = ';font-weight: bolder;';
norowsum = true;
}
if(row[ci] == '_colsum') {
row[ci] = colsum_?1?[ci].toString();
cellstyle = ';font-weight: bolder;';
nocolsum = true;
}
if(row[ci] == '_colavg') {
row[ci] = (Math.round(100*colsum_?1?[ci]/colsumcnt_?1?[ci])/100).toString();
cellstyle = ';font-weight: bolder;';
nocolsum = true;
}
num = parseFloat(row[ci].replace(/,/,'.'));
if(isNaN(num) == false) {
cellstyle += ';text-align:right;';
if(norowsum == false) {
rowsum += num;
rowsumcnt++;
}
if(nocolsum == false) {
colsumcnt_?1?[ci]++;
colsum_?1?[ci] += num;
}
}
if(isNaN(num) == false) {
row[ci] = num.toString().replace(/\./,',');
}
cells += '<' + td + ' style="' + cellstyle + '">' + row[ci] + '</' + td + '>';
cellstyle='';
}
$('<' + tr + '>' + cells + '</' + tr + '>').appendTo('table#snippet_qtable_?1?');
</script></nowiki>
Remove the terminating newline, so that the caret sits right behind </nowiki> and cannot come further down. Save the snippet.
Use the new snippets
Create a new page and enter this in the pages text:
{s:qtab|a|Name Hours week 1 Hours week 2 Hours week 3 Total}
{s:qrow|a|Andrew 12 22 33 _rowsum}
{s:qrow|a|Lars 7 34 27 _rowsum}
{s:qrow|a|Kathleen 23 4 16 _rowsum}
{s:qrow|a|Total _colsum _colsum _colsum _colsum}
Which will look like this:
It's important to set the
qtab before the
qrow snippet with the same name, the first argument in the snippet, here
a.
Secondy the field delimiter is always
two or more spaces. Single spaces do not separate fields, so ordinary text with spaces for a single field or header is possible. Notice that the headers
Hours week x all have spaces in them, but are still only one field.
The fact that
two or more spaces are separating the fields, make it possible to adjust the text so the rows of data are aligned correctly below each other. This is also the reason why I made the snippet names the same size, qtab and qrow, both 4 characters. Then all rows are nicely aligned below each other.
The name of the table is unique for the page no matter how short it is, because the snippets add more to the name to make names unique for this type of snippet. But if you have more tables on a single page, you must give them different names. On this page, there are two tables using this exact snippet system, so they are names
a and
b.
All rows for a table should have the same number of fields as the number of header fields in the table itself.
A few
macros have been added to the snippet, so that fields can be added or averaged across a table. You should study the snippt code to see how this is done, but more macros can be made, and you may even add special codes for markup, like colors or such.
'_rowsum' og '_colsum' should be considered formulas, like in spreadsheets, except that they can only reference their own row or column.
I would have likes to make formulas as '=rowsum', but since the snippet system do not allow for using equalsigns in the parameters, I choose to use the underline character, but you may change this for something else. Just take care not to use any wiki syntax character.
You may also enter a text like this:
{s:qtab|b|Navn Hours week 1 Hours week 2 Hours week 3 Total Average}
{s:qrow|b|Andrew 12 22 33 _rowsum _rowavg}
{s:qrow|b|Lars 7 34 27 _rowsum _rowavg}
{s:qrow|b|Kathleen 23 4 16 _rowsum _rowavg}
{s:qrow|b|Total _colsum _colsum _colsum _colsum _colsum}
{s:qrow|b|Average _colavg _colavg _colavg _rowsum ....}
Which will end up like this:
Notice here that two or more dots
.. in a field, will be replaced with a blank cell.
A word about styling
This method do not allow for the author to do styling, like the screwturn table syntax do. I like that, because I, admin, can ensure how tables should look, by defining that in the snippet or leave it to the base style defined in the css files loaded by the site.
You may also offer a special styling snippet, lets say
qtabstyle, that takes the table name
a and a few parameters, which use JQuery to set colors, alignment as well as other styling as needed. A parameter could be to use table style red, blue or gray.
Have fun.