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>

Attributes

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

AttributeDescription
tableDataFormatSpecifies if the grid should copy the full html value of the data rows or just the text data.
tableHeadSpecifies the values that should be used for the grid's header.
tableHeadFormatSpecifies if the grid should copy the full html value of the header row or just the text data.
tableHideHide the table referenced as table data.

Table Attributes

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

AttributeElementDescription
data-zg-*tableSets a ZingGrid attribute (Ex. data-zg-pager corresponds to the ZingGrid[pager] attribute).
data-zg-*colSets a ZGColumn attribute (Ex. data-zg-hidden corresponds to the ZGColumn[hidden] attribute).
data-zg-data-formattableSpecifies if the grid should copy the full html value of the data rows or just the text data.
data-zg-frozen-columnthFreezes the column.
data-zg-frozen-rowtrFreezes the row.
data-zg-head-formattableSpecifies if the grid should copy the full html value of the head row or just the text data.
data-zg-head-rowtrSpecifies row as the header row.
data-zg-ignore-rowtrSpecifies to ignore row and not include in the grid.
istableAccepts 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]