Best Of

I used a DDX brick + a webform. This is the DDX brick I am using: https://www.domo.com/appstore/app/ddx-html-table-app/overview

For your webform, you'll also want a column with values that can correspond to a PDP policy.

My Webform:

DDX Brick code:

Javascript:

var domo = window.domo;
var datasets = window.datasets;
var myDataTable = document.getElementById('myDataTable');

// Data Column Names
var dataColumnName = 'Image URL';


// Form the data query
var select = [dataColumnName];
var query = `/data/v1/${datasets[0]}?select=${select.join()}

&filter='Image URL'!=null`;


// Get the data and build table
domo.get(query, {format: 'array-of-arrays'}).then(buildTableGrid);

function buildTableGrid(data){
   // var max = 0, min = 0, total = 0;
  var totalTableHeaders = [data.columns[0]];
  var totalTable = [];
  data.rows.forEach(function(row, index){
    totalTable.push([row[0]])
  });

  buildTable(myDataTable, 
             totalTableHeaders, 
             totalTable);
}

function buildTable(tableEl, headers, data){
  // Build header row
  var thead = tableEl.appendChild(document.createElement('thead'));
  var headerRow = thead.appendChild(document.createElement('tr'));
  headers.forEach(function(h){
    var th = headerRow.appendChild(document.createElement('th'));
    th.innerText = h;
  });
  
  
  // Add table data rows
  var tbody = tableEl.appendChild(document.createElement('tbody'));
  var fragment = document.createDocumentFragment();
  data.forEach(function(row){
    fragment.append(getRow(row));
  });
  tbody.appendChild(fragment);
}

function getRow(rowData){
  var rowEl = document.createElement('tr');
  rowData.forEach(function(d){
    debugger
    var td = rowEl.appendChild(document.createElement('td'));
    td.innerHTML = d;

  });
  return rowEl;
}

HTML:

<link href="//fonts.googleapis.com/css?family=Roboto+Mono:300" rel="stylesheet" type="text/css">

<table id="myDataTable"></table>

CSS:

body{
  font-size: 14px;
}

table {
  border-collapse: collapse;
}
.column_heading {
  height:0px;
}
th {
  background-color: transparent;
  border: transparent;
  text-align: left;
  padding: 0px;
  color: #333;
  border-top: 0px;
}
.form-matrix-row-headers {

    display : none !important;

}

th:nth-child(1){

    display: none;

}
table tr th {
   border: transparent;
   border-top: none;
   border-bottom: none;
}
th:first-child {
  visibility:hidden;
  padding: none;
  border-collapse: collapse;
}
td {
  border: transparent;
  padding: none;
  width: 1500px;
  font-family: "Arial", monospace;
  font-weight: 300;
  color: #333;
  text-align: left;
}

tr:nth-child(odd) td {
  background-color: transparent;
}

#myStatsTable{
  float: left;
  margin-right: 20px;
}

Final result:

https://www.loom.com/share/34d96f00b9db4862a6c184ffd5248151?sid=ff1f7560-3559-4ca1-b47d-2c3eca8865f9