Discuss: Is this concept to hide/show columns and rows of a table sustainable?

Help / Discuss
1

The problem: Get a better user interface for viewing large tables by hiding table row and columns

Is the following approach (it works!) sustainable ?

The following proof of concept with the javascript macros:

function toggleColumn(c) {
    what1="td:nth-child("+c+")";   require(["jquery"],function($) {$(what1).toggleClass("hidden");});
    what2="th:nth-child("+c+")";   require(["jquery"],function($) {$(what2).toggleClass("hidden");});
};
function toggleRow(c) {
    what1="tr:nth-child("+c+")";   require(["jquery"],function($) {$(what1).toggleClass("hidden");});
};

stored as code in a XWiki.JavaScriptExtension Object - made available by
#set ($discard = $xwiki.jsx.use($doc.getFullName()))

combined an example table like with some additional html - input to get checkboxes

|= Country |= People |= Size |= Gini
| Germany | 83,000,000 | 357,385 km^^2^^ | 29.5
| France | 67.200,000 | 543,940 km^^2^^ | 30.1
| Italy | 60,500,000 | 301,300 km^^2^^ | 33.1
| Spain | 46,700,000 | 505,990 km^^2^^ | 34.5
| Luxembourg | 602,000 | 2,600 km^^2^^ | 28,7
{{html}}
<input type=checkbox checked onclick="toggleColumn(1)">County</input>
<input type=checkbox checked onclick="toggleColumn(2)">People</input>
<input type=checkbox checked onclick="toggleColumn(3)">Size</input>
<input type=checkbox checked onclick="toggleColumn(4)">Gini</input>
<br>
<input type=checkbox checked onclick="toggleRow(1)">Title</input>
<input type=checkbox checked onclick="toggleRow(2)">Germany</input>
<input type=checkbox checked onclick="toggleRow(3)">France</input>
<input type=checkbox checked onclick="toggleRow(4)">Italy</input>
<input type=checkbox checked onclick="toggleRow(5)">Spain</input>
<input type=checkbox checked onclick="toggleRow(6)">Luxembourg</input>
{{/html}}

gives an impression what is wanted

Any comments are welcome!

(I know it works only with one table in the document)

2

Hello,
For this I use bootstrap (included in xwiki) with

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

You can replace buuton with tr, td etc.

Pascal B