Turn this:
Into this: (with full customization)
Step 1) Select the Markdown Viz
Step 2) Apply custom HTML Table Code and customize
<style>
h3 {
margin-block-start: 0;
}
.comp-table {
width: 100%;
border-collapse: collapse;
/* margin: 25px 0; */
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.comp-table td {
white-space: wrap;
vertical-align: center;
}
.comp-table thead tr {
background-color: #b0ddae;
color: #ffffff;
text-align: left;
}
.comp-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.comp-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.comp-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
</style>
<table class="comp-table">
<thead>
<th>{{fields.account.name.view_label}}</th>
<th>{{fields.opportunity.total_arr.label}}</th>
</thead>
<tbody>
{{#result}}
<tr>
<td>
<p style="font-size:1.5em;">{{account.name.value}}</p><br/>
<p style="font-size:.8em;">{{account.segment.value}}</p></td>
<td>{{opportunity.total_arr.value}}</td>
</tr>
{{/result}}
</tbody>
</table>
Key points:
-
Notice the tags:
{{#result}} ... {{/result}}
That’s allowing us to loop over the results -
In the header, we’re referring to labels:
<th>{{fields.account.name.view_label}}</th>
That’s allowing us to get metadata like field names -
In the table cells, we’re able to get data:
<td>{{opportunity.total_arr.value}}</td>
These values come with Omni’s links and drilling intact
-
Alternatively, if we want to remove drilling and links we can use
value_static:
<td>{{opportunity.total_arr.value_static}}</td>
and no links will be rendered
