How to Rename the Table Column Using Custom JavaScript

Imagine, you want to change the name of the column of ShortPoint Table component without changing the name of the List's field. This article will help you to do it. It can be also applied to applying any other custom changes after ShortPoint rendering.

Let's say you want to change Modified column to "Last updated".

If you check the HTML you will note, that Table component has data-shortpoint-type attribute set to "table-dynamic", so we can use it to find this element using JavaScript.

For example, using jQuery we can do this task with this one line:

$('[data-shortpoint-type="table-dynamic"] thead th')[1].innerText = "Last updated";

The selector is looking for th inside thead inside element with attribute data-shortpoint-type="table-dynamic". Then we take second element(the index is 1) and update the innerText.
If you have multiple tables on the page but want to fix only one, then you can place them inside Sections. Give each Section a different id and then put something like this as a selector:

#section1_id [data-shortpoint-type="table-dynamic"] thead th

And you can write a function like this to wait until the element is on the page:

function fixHeader() {
    if (!$('#section1_id [data-shortpoint-type="table-dynamic"] thead th').length) {
        setTimeout(fixHeader, 200);
        return;
    }
 
    // element is ready, let's fix it
    $('#section1_id [data-shortpoint-type="table-dynamic"] thead th')[1].innerText = "Last updated";
}

Result: