Moving the Action Column of a List

Introduction

In this article, you will learn how to move the action column in a list using JavaScript.

How does it work?

1. To implement this, make sure you have configure the desired CRUD.
2. Launch the UI Builder and select the CRUD to open the Properties tab.
3. In the Properties tab, select UI (List) and scroll down to Custom Footer.
4. Enter the code below into the Custom Footer with your own List ID in line 4 and line 16. 

   <script>
   $(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
           th1.detach().insertAfter(th2);
       });
   
       // 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
           td1.detach().insertAfter(td2);
       });
   });
   </script>
   
   <style>
   /* Add content "Action" after the elements with class row_action in the header */
   th.row_action:after {
       content: "Action";
   }
   </style>

5. Save and publish to see the result.

Expected outcome

Once you have configured it correctly, this is what the list should look like:

Before:

After:

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