Child pages
  • Using Table Enhancer plugin together with ConfiForms TableView to render sticky header for the table

This is the documentation for ConfiForms Server/Data Center app

However, this might also work for ConfiForms cloud and in most cases it does. But please see this page to understand the differences between server and cloud versions of the ConfiForms app.

ConfiForms is good at presenting data, there are various options available. See more Multiple ways to show your form data in Confluence with ConfiForms

But as always, there is a need to get "more". We try very hard to have integrations with 3rd party macros and one of the good combos is Table Enhancer. A free macro available on Atlassian marketplace to help you to tune up the tables.


Here is how Table Enhancer could be used together with ConfiForms TableView to render the table with "sticky" header

Imagine a simple form with couple of fields. Let's say we have field1 of type text and field2 of type dropdown



And the table to show the data from the form (default view, showing all defined columns)

What we can do is we "wrap" or TableView into the Table Enhancer macro like this

And set the Table Enhancer macro to show 1 row as always visible

And here is the result (scroll down to see how the table header stays visible)


Now you can see that having a sticky header on your tables rendered with ConfiForms is really easy and ... free (smile)


Similar functionality can also be achieved without external plugin, if you have an option to embed custom script on the page (for example you have HTML macro enabled in your Confluence instance).


The following code needs to be added

AJS.$('.confiforms-table').stickyTableHeaders();


It is better to have this inside an initializer and give it some time to load like this

(as the "stickyTableHeaders" function is not available on page load)


<script type="text/javascript">
  AJS.toInit(function(){
    window.setTimeout(function() {
       AJS.$('.confiforms-table').stickyTableHeaders();
    }, 2000);
  });
</script>


In this example we give it 2000 milliseconds to load the page and initialize the table before calling "stickyTableHeaders" function

  • No labels