m←⍕¨{⍵⍴⍳×/⍵}1000 100
t←NewTable m
'CI12' ⎕FMT ⎕SIZE ,¨'mt'
4,800,040
242,324,696

HTML Tables Revisited

February 16, 2025

The last time we looked at tables was way back in 2021. That’s a cute little function, and it’s useful for relatively small tables, but to put it kindly, it is not particularly efficient.

The Abacus DOM creates a namespace for every element. Tables have lots of elements. This is not good in space:

m←⍕¨{⍵⍴⍳×/⍵}1000 100
t←NewTable m
'CI12' ⎕FMT ⎕SIZE ,¨'mt'
4,800,040
242,324,696

Yikes!

And the time to create is excessive as well. Rendering is slow too. For the Abacus DataGrid component we had to write some special code to get around this as we recreate and re-render the table on every key stroke when scrolling around. A general solution is called for. Rather than creating a namespace for every element, we can create just a few namespaces to hold content values and attribute values:

NewOptiTable←{
t←⎕NS''
t.Tag←'optitable'
t.(Body Header Footer)←{
s←⎕NS''
s.Values←⍵⍴⍨¯2↑1,⍴⍵
s.Rows←⎕NS''
s.Cells←⎕NS''
s}¨3↑⍬ ⍬,⍨(⊂⍣(2=≡⍵))⍵
t
}

This takes hardly any space:

t2←NewOptiTable m
'CI12' ⎕FMT ⎕SIZE ,¨'m' 't' 't2'
4,800,040
242,324,696
4,821,416

And no time, as it doesn’t really do anything:

cmpx 'NewOptiTable m' 'NewTable m'
NewOptiTable m → 2.3E¯3 |      0%
* NewTable m     → 9.4E¯1 | +41822% ⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕

(Results are of course different.)

Rendering now requires special code:

RenderOptiTable←{
⍝ ⍵ ←→ OptiTable
o←⊂'Whitespace' 'Preserve'
o,←⊂'UnknownEntity' 'Preserve'
xml←⎕XML⍠o
a←ComposeAttributes ⍵
xml 0 'table' ''a⍪⊃⍪/'thead' 'tbody' 'tfoot'{
r c←⍴⍵.Values
0∊r,c:0 4⍴0
n←r+r×c
m←n 2⍴1 c⌿2 2⍴2 'tr' 3((⍺≡'tbody')⊃'th' 'td')
m,←,(⊂''),⍵.Values
a←,⊃,/r(r c){
d←⍺
n←(⎕C ⎕A)⍵.⎕NL ¯2
0=≢n:d⍴⊂0 2⍴⊂''
v←⍵⍎¨n
n←'-'@('_'∘=)¨n
b←{80=⎕DR⊃⊃⍵}¨v
a←{
0=∨/b:d⍴⊂0 2⍴⊂''
k←↑{d⍴⊆⍵}¨b/v
(r q)←0 ¯1+⍴⍴k
⊂[0 r](b/n),⍤0⍤0 q⊢k ⍝ Hat tip: AB
}0
a⊣(n/⍨~b){
' '=⊃⍺:0
n i v←↓⍉(⊂⍺),↑⍵
0⊣a[i]←a[i]⍪¨↓⍉↑n v
}¨v/⍨~b
}¨⍵.Rows ⍵.Cells
t←ComposeAttributes ⍵
1 ⍺''t⍪m,a
}¨⍵.(Header Body Footer)
}

But is much faster:

cmpx 'RenderOptiTable t2'  'DOM2HTML t'
RenderOptiTable t2 → 2.7E¯2 |     0% ⎕
DOM2HTML t         → 1.5E0  | +5441% ⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕⎕

The argument to NewOptiTable is identical to NewTable, but specifying attributes is done differently:

t←NewOptiTable (⍕¨3 2⍴⍳6) ('One' 'Two')
t.class←'table-class'
t.Header.class←'header-class'
t.Header.Cells.class←'col1' 'col2'
t.Body.Rows.id←'rowid1' 'rowid2' 'rowid3'
t.Body.Cells.class←'cell-class'
t.Body.Cells.id←'id'∘,¨⍕¨3 2⍴⍳6
t.Body.Cells.onclick←((0 0) 'foo1') ((2 1) 'foo2')

Attributes are specified by assignment in the root for the table element, and in the Header, Body, and Footer subspaces for the thead, tbody, and tfoot elements respectively. Each of these 3 subspaces contain a Rows and Cells subspace for attributes for tr and either td or th elements as appropriate. The only purpose of the Rows and Cells subspaces is to have place to specify attributes.

Attributes are enclosed if simple, and reshaped to match the target elements in question, providing something analagous to scalar extension. (For example, to specfiy a class per column in the above example simply do t.Body.Cells.class←'c1' 'c2'.) Alternatively, attributes may be specified by explicit index. So the above produces:

RenderOptiTable t
<table class="table-class">
<thead class="header-class">
<tr>
<th class="col1">One</th>
<th class="col2">Two</th>
</tr>
</thead>
<tbody>
<tr id="rowid1">
<td class="cell-class" id="id0" onclick="foo1">0</td>
<td class="cell-class" id="id1">1</td>
</tr>
<tr id="rowid2">
<td class="cell-class" id="id2">2</td>
<td class="cell-class" id="id3">3</td>
</tr>
<tr id="rowid3">
<td class="cell-class" id="id4">4</td>
<td class="cell-class" id="id5" onclick="foo2">5</td>
</tr>
</tbody>
</table>

An optitable element cannot be added to the DOM like a regular element. It must be rendered first and then double enclosed. So to add as a child to some element e:

e.Content←⊂⊂RenderOptiTable t