How to use Google Tables

Create a new RMP user interface
Include this as a .js in the header of your webform (this is a google library with table chart package)
https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22table%22%5D%7D%5D%7D
Add an html widget with the following code :

Code

1	<div id="table_div"><div>

Add a javascript gadget in your RMP webform with this script :

Code

function drawTable  (html_id,array_data,array_column,table_width,table_height,html_allow,showNumber) {
google.load('visualization', '1', {packages:['table']}); 
var data = new google.visualization.DataTable();


for(i=0;i<array_column.length;i++)
{
data.addColumn(array_column[i].type, array_column[i].title);
}


var array_array_data = new Array();
for(i=0;i<array_data.length;i++)
{
array_array_data.push([array_data[i].day,array_data[i].day_label,array_data[i].am,array_data[i].pm]);
}

data.addRows(array_array_data); 
var my_index1 = data.getFilteredRows([{column: 1, value: "Sat"}]);
var my_index2 = data.getFilteredRows([{column: 1, value: "Sun"}]);
var my_index = my_index1.concat(my_index2);

for (i=0;i< my_index.length;i++) 
{
      for(j=0;j<4;j++)
{
              data.setProperties(my_index[i],j,{'style': 'background-color: red;'}); 
}
}

var table = new google.visualization.Table(document.getElementById(html_id));
table.draw(data, {allowHtml: html_allow , showRowNumber: false,width: table_width, height: table_height});
}


var array_data = [{"day":1,"day_label":"Mon","am":"P","pm":"P"},{"day":2,"day_label":"Tue","am":"P","pm":"P"},{"day":3,"day_label":"Wed","am":"P","pm":"P"},{"day":4,"day_label":"Thu","am":"P","pm":"P"},{"day":5,"day_label":"Fri","am":"P","pm":"P"},{"day":6,"day_label":"Sat","am":"Abs","pm":"Abs"},{"day":7,"day_label":"Sun","am":"Abs","pm":"Abs"}];


var array_column = [{"type":"number","title":"Day"},{"type":"string","title":"Day Label"},{"type":"string","title":"AM"},{"type":"string","title":"PM"}];


var showNumber = "false";
var html_allow = "true";
var html_id = "table_div";
var table_width = 600;
var table_height = 600;


drawTable(html_id,array_data,array_column,table_width,table_height,html_allow,showNumber);

Save your webform, switch to test mode and preview

how-to-use-google-table

You can now adapt this feature to your own data source : you just have to compute array_column and array_data (from RunMyProcess Collections for example) and call this js function.

To highlight table rows according to your criteria, you have to modify the column and its value in getFilteredRows([{column: "column_number", value: "criteria_value"}]) function.

NB : This feature doesn't require working in a google environment as this is not a google gadget

For more information/properties about Google tables:https://developers.google.com/chart/interactive/docs/gallery/table

Docs

Developer Guide

How to use Google Tables