Reposition List Columns in UI Builder

Introduction

When working with long Lists in Joget, certain action columns, such as the Activity Link, may appear far to the right, requiring users to scroll horizontally. This can affect usability, especially when the Activity Link is frequently accessed. This article explains how to reposition the list columns toward the front of the table by applying a simple JavaScript enhancement.

How does it work?

Joget allows UI customisation through JavaScript in the List View Custom Footer. By using jQuery to manipulate the table structure, you can rearrange the positions of specific columns. The example below demonstrates how to move the Activity Link column from its existing position to appear immediately after the first column. You may adjust the column indexes based on your own List configuration.

1. In UI Builder, add any menu that supports displaying lists. This includes:
   • CRUD Menu
   • Inbox Menu
   • List Inbox Menu
   • List Menu
   • Task Delegation Menu
   • Universal Inbox Menu
2. Navigate to Properties > UI > List View Custom Footer, and add the following script:

<script>
$('#list_request tr').each(function() { // replace "listId" with your List ID
    var tr = $(this);

    if (tr.find('th').length > 0) {
        var th1 = tr.find('th:eq(3)'); // replace 3 with the current index position of the list column you want to move
        var th2 = tr.find('th:eq(0)'); // replace 0 with the destination index position of the list column you want to move to
        th1.detach().insertBefore(th2);
    } else {
        var td1 = tr.find('td:eq(3)'); // replace 3 with the current index position of the list column you want to move
        var td2 = tr.find('td:eq(0)'); // replace 0 with the destination index position of the list column you want to move to
        td1.detach().insertBefore(td2);
    }
});
</script>

Expected Outcome

The Activity Link is now displayed on the left (because we changed the index position from 3 to 0) as demonstrated below:

Before:

After:

Download sample app