CSS/Wiki Help - Hide Select Columns of WikiTable

#1

Is there a better approach to providing a selectable interface for hiding columns in a wikitable? The first X number of columns depending on the table will not be selectable.

image
image1329Ă—251 21.6 KB

This currently works and is programmatically generated based on my limited CSS. It is not the prettiest of interfaces.

<style>
.col-toggle:has(#toggle-col6:checked) tr > *:nth-child(6),
...
...
...
.col-toggle:has(#toggle-col20:checked) tr > *:nth-child(20) {
  display: none;
}
</style>

<label><input type="checkbox" id="toggle-col6"> Data 1</label>
...
...
...
<label><input type="checkbox" id="toggle-col20"> Data 15</label>

Hoping there may be a better approach that doesn’t grow the .tid size so much as there are a lot of tables.

MRE provided for drag and drop to tiddlywiki.com
Hide Select Columns in WikiTable.json (3.0 KB)

#2

You can use dynamically-generated CSS for this:

<style>
<$list filter="[range[6],[20]]" variable="n" join=", ">
.col-toggle:has(#toggle-col<<n>>:checked) tr > *:nth-child(<<n>>)
</$list> {display: none;}
</style>

If you want to put this in a $:/tag/Stylesheet tiddler, you won’t be able to use type text/css, since that won’t be interpreted by the wikitext parser. Just use text/vnd.tiddlywiki or leave blank.

I wouldn’t actually use range[6],[20], but range[1],[MAX] where MAX is at least as large as the largest number of columns in any one table.

4 Likes
#3

Thank you, so much nicer than all those lines. Hopefully I won’t be back asking why it’s not working once I get it to a stage of moving to a stylesheet only to be reminded of the text/css issue.

Also learned about :not(:checked)) today, which allows me to uncheck to hide. Which is what the user wanted.

image
image1278Ă—329 24.3 KB

Hide Select Columns in WikiTable v2.json (3.0 KB)

3 Likes
#4

oh thats cool.

you could combine them so the checkboxes show after every header columns text.

sort of reminds me of smartaheet, which would be really cool to see a smartsheet equivilent

#5

I tried that, but then once the column is hidden so goes the toggle. Best I could manage so far.

Tried to get a toggle all on/off as well, hoping to be able to toggle all off and then select a few to show but I think CSS only is not gonna let that happen. At least my version of CSS skill.

1 Like
#6

ohh yea thats true, I believe a select all is 100% possibke tho, but Ive only seen it using the checkbox macro, maybe thats somtthing worth tinkering with?