Displaying Data

Created by Roanne Jane Jane Jaype, Modified on Tue, 16 Aug, 2022 at 2:23 PM by Roanne Jane Jane Jaype

To display data you just need to add data-sheet-best attribute to any HTML tag

<div data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf"></div>

Then you will be able to just use {{ }} notation to add the insertion points of your data into the HTML.

<div data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf">
  <div>
    <h2>{{ Name }}</h2>
    <div>
      <span>Id: <b>{{ Id }}</b></span>
      <span>Age: <b>{{ Age }}</b></span>
    </div>
  </div>
</div>

Assuming your table looks like this:

Your HTML will be changed into this:

<div data-sheet-best="https://sheet.best/api/sheets/cf969697-682a-40e3-bad4-d54803eeeacf">
  <div>
    <h2>John Doe</h2>
    <div>
      <span>Id: <b>1</b></span>
      <span>Age: <b>23</b></span>
    </div>
  </div>
  <div>
    <h2>Jane Doe</h2>
    <div>
      <span>Id: <b>2</b></span>
      <span>Age: <b>34</b></span>
    </div>
  </div>
  <div>
    <h2>John Smith</h2>
    <div>
      <span>Id: <b>3</b></span>
      <span>Age: <b>45</b></span>
    </div>
  </div>
  <div>
    <h2>John Smith</h2>
    <div>
      <span>Id: <b>4</b></span>
      <span>Age: <b>56</b></span>
    </div>
  </div>
</div>

You can also use data from other tabs or filters by inserting them in the data-sheet-best attribute

<div data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf/tabs/Admin">
  <div>
    <h2>{{ Name }}</h2>
    <div>
      <span>Id: <b>{{ Id }}</b></span>
      <span>Age: <b>{{ Age }}</b></span>
    </div>
  </div>
</div>

Was this article helpful?