Can you freeze columns or rows in a table?

[Levans]

Hi all!

Is it possible to freeze (or make sticky) columns or rows in a table, or is this functionality planned for the future? We’ve tested adding CSS (by adding a StyleSheet Extension object to the page) but this is only an option for global admins because of how we’ve set up advanced user types. If there’s an easy way for general users to do this, that would be great!

We’ve looked at the Make Tables Sorteable macro (community-contributed), but the Sticky feature doesn’t seem to…stick.

Thanks!

[TomTheWise]

I would love to see such QoL improvements in the future too, for example with Cristal.

[NorSch]

Have you seen

Some usefull features to display tables

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(…

This freeze the table head. It may help sometimes.

[Levans]

Thanks!! Could it work for header row (or both) as well?

[NorSch]

Here is a solution to fix head and first column based on CSS:

Example:

{{velocity}}
#set($tableWidth="50%")
#set($tableHeight="15vh")
#set($tableFixColors="rgb(240,240,240)")
#set($discard=$xwiki.linkx.use("data:text/css,
     table.tableFixColumn {  width:$tableWidth; overflow-x:scroll; display:block} 
     table.tableFixColumn td:first-child { background-color:$tableFixColors;position:sticky;left:0; z-index:10 }
     table.tableFixColumn th:first-child { position:sticky;left:0; z-index:11 }
     table.tableFixColumn th {background-color:$tableFixColors}
     table.tableFixHead { table-layout: fixed; border-collapse: collapse; }
     table.tableFixHead tbody { display: block; xwidth: 30%; overflow: auto; height: $tableHeight; }
     table.tableFixHead  td { padding: 1px 10px;}
     table.tableFixHead th{ z-index:10; position: sticky; background-color:$tableFixColors; top: 0;}
	" , { 'type': 'text/css', 'rel': 'stylesheet'}))

{{/velocity}}

fix head and first column:

(% class="tableFixColumn tableFixHead" %)
|=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header  |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header|=Header 
| A-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| B-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| C-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| D-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| E-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| F-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999


fix head only


(% class="tableFixHead" %)
|=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header  |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header|=Header 
| A-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| B-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| C-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| D-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| E-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| F-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999

fix first column only

(% class="tableFixColumn" %)
|=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header  |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header|=Header 
| A-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| B-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| C-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| D-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| E-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| F-11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999

The velocity part is used to define width and height of the visible part of the table as these values are embedded as CSS units within the class definition.
Hint: All CSS units may be used: % vh vw cm …