Docs

Retrieving HTML Table Data

In this guide, we'll walk you through how to use an HTML table element as a data source.

Assigning Data to the Grid

If you want to populate your grid using data from an HTML table, there are three ways to do so.

One of the approaches is to add [is="zing-grid"] attribute to the <table> tag.

<table is="zing-grid">
  <tr>
    <th>First</th>
    <th>Last</th>
    <th>Number</th>
  </tr>
  <tr>
    <td><b>Maria</b></td>
    <td>John</td>
    <td>123</td>
  </tr>
  <tr>
    <td><ins>David</ins></td>
    <td>Smith</td>
    <td>456</td>
  </tr>
  <tr>
    <td><i>Felicity</i></td>
    <td>Snow</td>
    <td>789</td>
  </tr>
</table>

or

The second approach is to wrap the <zing-grid? around the <table>.

<zing-grid>
  <table>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Number</th>
    </tr>
    <tr>
      <td><b>Maria</b></td>
      <td>John</td>
      <td>123</td>
    </tr>
    <tr>
      <td><ins>David</ins></td>
      <td>Smith</td>
      <td>456</td>
    </tr>
    <tr>
      <td><i>Felicity</i></td>
      <td>Snow</td>
      <td>789</td>
    </tr>
  </table>
</zing-grid>

or

The last approach is to set the data attribute to the selector of the HTML table.

<table id="gridSource">
  <tr>
    <th>First</th>
    <th>Last</th>
    <th>Number</th>
  </tr>
  <tr>
    <td><b>Maria</b></td>
    <td>John</td>
    <td>123</td>
  </tr>
  <tr>
    <td><ins>David</ins></td>
    <td>Smith</td>
    <td>456</td>
  </tr>
  <tr>
    <td><i>Felicity</i></td>
    <td>Snow</td>
    <td>789</td>
  </tr>
</table>

<zing-grid data="#gridSource"></zing-grid>
Top

Attributes

Once the HTML table data populates the grid, you can add the following <zg-param>s:

Attribute Description
tableDataFormat Specifies if the grid should copy the full html value of the data rows or just the text data.
tableHead Specifies the values that should be used for the grid's header.
tableHeadFormat Specifies if the grid should copy the full html value of the header row or just the text data.
tableHide Hide the table referenced as table data.
Top

Table Attributes

Here is a list of supported attributes for HTML table-related elements.

Attribute Element Description
data-zg-* table Sets a ZingGrid attribute (Ex. data-zg-pager corresponds to the ZingGrid[pager] attribute).
data-zg-* col Sets a ZGColumn attribute (Ex. data-zg-hidden corresponds to the ZGColumn[hidden] attribute).
data-zg-data-format table Specifies if the grid should copy the full html value of the data rows or just the text data.
data-zg-frozen-column th Freezes the column.
data-zg-frozen-row tr Freezes the row.
data-zg-head-format table Specifies if the grid should copy the full html value of the head row or just the text data.
data-zg-head-row tr Specifies row as the header row.
data-zg-ignore-row tr Specifies to ignore row and not include in the grid.
is table Accepts the value "zing-grid" to specify to the grid to use table as a data source.

Refer to the below demos to see these in action.

Top

[data: HTML table]