Embedding table data in a UI

[phamalda]

G'morning, BudiMates. Apologies once again if this topic has been resolved in the past. I've been searching for this for a while. I have a view that I need to present in a page (screen) of our UI. I only need to show the data in that view. To break this down a bit, this is what the original table looks like...

This is what the filtered view looks like...

And this is what that view currently looks like in our UI...

All I need to see are the data values from that view. I don't really need to see the checkbox in the top-left, the row numbers, the datatype symbols next to column header, etc. It currently appears that I copied a few blocks from a spreadsheet and pasted them in the page or something. I'd really like to have this appear to be a hardcoded part of the UI with just column names and data values.

It should be noted that this is what the data looks like in a Text Field Binding I currently have. I can see the data is in the Rows Array. I am getting a little better at using Handlebars in JavaScript, but I'm not quite sure how to pull these values:

With all of that being said, I need to find a way to loop through this Provider Object changing the value beyond Rows:

$("[Priorities Provider].Rows.0")     // Showing all of element 0 in the Rows array

I have been working with configurations of a Data Provider along with a Repeater Block to pretty this up a bit, but I just haven't found the right combination. If anyone has any advice, I would really appreciate the help. Thanks a ton.

[phamalda]

Good afternoon, BudiMates. Just a quick update, I got this resolved...somewhat. I wound up using a combination of simple HTML/CSS and Handlebars. Below is the simple logic I used. This is still relatively dynamic around the data in the view containing this data. Of course, I did need to use the 'date' helper to properly format that column. Please let me know if you have any questions/concerns/recommendations. Thanks a ton!

<h1>Current Priorities</h1>
<style>
  .white-text {
    color: white;
  }
  .column-one {
    width: 5%
  }
  .column-two {
    width: 25%
  }
  .all-columns {
    width: 15%
  }
  th {
    text-align: left;
  }
</style>
<table class="custom-table" style.color = white>
  <thead>
    <tr class="white-text">
      <th class="column-one">Priority</th>
      <th class="column-two">Title</th>
      <th class="all-columns">RFP Date</th>
      <th class="all-columns">Role</th>
      <th class="all-columns">Solicit</th>
      <th class="all-columns">Revenue</th>
    </tr>
  </thead>
  <tbody>
    {{#each   [Priorities Provider].Rows  }}
      <tr class="white-text">
        <td> {{Priority}} </td>
        <td> {{Title}} </td>
        <td> {{date RFP_Date "DD-MM-YYYY"}} </td>
        <td> {{Role}} </td>
        <td> {{Solicit}} </td>
        <td> ${{Revenue}}M </td>
      </tr>
    {{/each}}
  </tbody>
</table>

And this is what the resulting visualized data looks like. I still have a bit of modification left to either add some borders or get the titles all on the same line. I will work with the end users for their feedback prior to making any further changes. Thanks again...