How can we help you today?

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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more