Introduction
In this article, we will demonstrate how to move the action column of a list through the use of Javascript.
Implementation
To implement this, go to CRUD Properties > UI (List) > Custom Footer then input this code:
Javascript
<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>
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.