In this article, we will demonstrate how to move the action column of a list through the use of Javascript. 


To implement this, go to CRUD Properties > UI (List) > Custom Footer then input this code:

$(document).ready(function() {
    // Reorder the header row
    $('#list_form thead tr').each(function() {
        // Get the current header row
        var tr = $(this);
        // Select the 5th header cell (index 4)
        var th1 = tr.find('th:eq(4)');
        // Select the 1st header cell (index 0)
        var th2 = tr.find('th:eq(0)');
        // Move the 5th header cell after the 1st header cell

    // Reorder the body rows
    $('#list_form tbody tr').each(function() {
        // Get the current body row
        var tr = $(this);
        // Select the 5th cell in the row (index 4)
        var td1 = tr.find('td:eq(4)');
        // Select the 1st cell in the row (index 0)
        var td2 = tr.find('td:eq(0)');
        // Move the 5th cell after the 1st cell

/* Add content "Action" after the elements with class row_action in the header */
th.row_action:after {
    content: "Action";

Be sure to use the correct List ID in line 4 and line 16. Once you have configured it correctly, this is what the list should look like:

Figure 1: Datalist before implementation

Figure 2: Datalist after implementation

Do note how the action column has been shifted to the left. We have also added a column name above the button. Feel free to explore the app further in the sample app below.

Download Sample App:

  • No labels