Add Footers/ Summary in Google Grids

Problem Statement:

Google Grids do not have direct implementation for adding footers to the grid. So there is no direct provision for having a fixed total row in Google Charts- table (Google grids).

To achieve this, we need to add an extra row; add this row to the end of the table. We also need to ensure that the row is added even after pagination and sorting is performed on the grid.

So here we go:

1. Declare this variable at top of your script

footer = [[‘1st column text’,1st_ColSpan],[‘2nd column text’,2nd_ColSpan],….];

Example :

footer=[[‘Total’,5],[‘1,234,567’,1]];

// <—assume our table have 6 columns

2. Add this function to your script (anywhere)

function addFooter() {try {

if (document.getElementById(‘google-visualization-table-summaryFooter’)) return;

var tables = $(‘#parentID table’); // Parent container element of table. To //find exact table

for (i = 0; i < tables.length; i++)

if (tables[i].className == ‘google-visualization-table-table’) {

var r = tables[i].insertRow(tables[i].rows.length);

r.id = ‘google-visualization-table-summaryFooter’ // This ID should be same as in the IF condition of the first line of this //function

var c;

r.className = ‘google-visualization-table-tr-head’;

for (j = 0; j < footer.length; j++) {

c = r.insertCell(j);

c.className = ‘google-visualization-table-th gradient’;

c.style.textAlign = (j == 0) ? ‘start’ : ‘right’;

c.innerHTML = footer[j][0]

c.colSpan = footer[j][1]

}

catch (ex) {

// Exception Logging

}

3. Add these event listener before table.draw() method

google.visualization.events.addListener(table, ‘ready’, addFooter);

google.visualization.events.addListener(table, ‘sort’, addFooter);

google.visualization.events.addListener(table, ‘page’, addFooter);

Enjoy!!

You have your footer in the table as you want. Additionally you can apply custom styles based on the footer row ID to visually enhance the experience.

Comments