IG Hack - #2 Display Column Name from Query as Interactive Grid Column Heading

This blog explains, how to display column name from query as IG column heading.

Let me explain this with a use case:

Developer 1: The region source of my IG is Function Body returning SQL query. I want to display the column alias name given in my SQL queries as the IG column heading. Can this be achieved?

Developer 2: Ofcourse, yes!  You can also display the column name/alias even if the region source is SQL Query.

Let's Start....

1) Create an IG in the page. Select the region source as SQL query. Paste the below code.

SELECT 'Akil'   as "Employee_Name",
       'Oracle' as "Employee Department",
       'India'  as "Country"
    FROM dual
UNION
SELECT 'John'    as "Employee_Name",
       'JAVA'    as "Employee Department",
       'Canada'  as "Country"
    FROM dual
UNION
SELECT 'Max'  as "Employee_Name",
       'IOT'  as "Employee Department",
       'USA'  as "country"
    FROM dual
UNION    
SELECT 'Julian'  as "Employee_Name",
       'Oracle'  as "Employee Department",
       'Germany' as "Country"
    FROM dual;

Note: 

• The region source can be SQL Query (or) Function Body returning SQL query (based on the requirement).
• I am using the above SQL query because I did not want to complicate the use case.

2) Put the below code in the Attributes -> JavaScript Initialization Code of the IG.

function( options ) {
    var colOptions = options.columns;
    
    for (let i = 0; i < colOptions.length; i++) {
        let isHidden = colOptions[i].isHidden,
            igColHeading =  colOptions[i].name;

        if(!isHidden)  {
        colOptions[i].heading.heading = igColHeading;
        }
    }
    return options;
}

Important Note: In the above code, i=0 must be changed to i=1 if the IG is editable.  

4) Save and Run the page.

Click here for DEMO

Happy CODING!!!

Thank you :)