Some usefull features to display tables

Help / Discuss
1

User sometimes like to fix the headline (“excel like”) of a table and scroll the content below.
A change of the size of the table (vertically or horizontally) dynamically while displaying it is welcome too.

The following macro code (groovy) with parameters (“height”,“resize”,“class”) is a working proof of concept to get this features by defining a css class dynamically. Assigning the class name to the table gives the desired features.

{{groovy}}
height       = xwiki.context.macro.params.get("height")
resizeParam  = xwiki.context.macro.params.get("resize")
if (resizeParam == null || resizeParam == "") { resize=""} else { resize="resize:"+resizeParam+";"}
className = xwiki.context.macro.params.get("class")
if (className == null || className == "") { className="tableFixHead" }

info= "." + className + " { table-layout: fixed; border-collapse: collapse; } " +
      "." + className + " tbody { display: block; width: 100%; overflow: auto; height:" + height + ";" + resize + "}" +
      "." + className + " td { padding: 5px 10px; } " +
      "." + className + " th {z-index:2; position: sticky; background-color:rgb(240,240,240); top: 0;}"

xwiki.linkx.use("data:text/css,"+info, ['type': 'text/css', 'rel': 'stylesheet'])
{{/groovy}}

(Obviously you can this inline by the last 2 statements, just define the 3 variables “height”,“resize”, “className” before.)

A typical value of ‘height=“70vh”’ limits the table size to 70% of the browser window height.
“resize” expects one of the css values “vertical”, “horizontal” or “both” to add an area at the bottom to do a dynamic resize.

I suggest to standardise such layout features.

2 Likes