Category: How do I do X?

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How to sort table columns by headers?


I have a table with columns that are fetched from a datasource in a random order. I want to programmatically sort them so they are displayed in a specific order, without using the UI. Additionally, I want to freeze certain columns in place while still sorting the rest. This would be helpful for cases where the columns are dynamic and need to be sorted in a specific way. I believe there may be an 'order' property on the column object that can be accessed programmatically to solve this issue, and I've filed a feature request for it.


The requester wanted to programmatically sort columns in a table with headers “1”, “2”, “3” that came in a random order from the datasource. They also wanted to know if it was possible to freeze some of the columns in place using freeze column functionality. The expert suggested that columns can be manually reordered in the table's property pane and that JavaScript could be used to handle sorting the columns. They also found a related article on Stack Overflow but the requester felt that it did not address the issue.

The expert then suggested that there must be an 'order' property set on the column object when the user drags the column in the properties pane. Having access to that property programmatically could solve the issue. They provided a link for the requester to file a feature request/bug report, and mentioned that internally the column order is stored in the columnOrder list within canvas.json of the page.

In summary, the current solution is to manually reorder the columns in the table property pane or to file a feature request to access the column object's 'order' property programmatically. The expert has provided a link for the requester to file the feature request/bug.