jqwidgets-framework/demos/Angular/src/grid/loadfromtable/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<table #myTable style="width: 850px" cellSpacing='0' cellPadding='2'>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Product</th>
      <th>Available</th>
      <th>Ship Date</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nancy</td>
      <td>Vileid</td>
      <td>Espresso con Panna</td>
      <td>true</td>
      <td>5/20/2012</td>
      <td>9</td>
      <td>$3.25</td>
    </tr>
    <tr>
      <td>Elio</td>
      <td>Nagase</td>
      <td>Espresso con Panna</td>
      <td>true</td>
      <td>9/26/2012</td>
      <td>6</td>
      <td>$3.25</td>
    </tr>
    <tr>
      <td>Cheryl</td>
      <td>Nagase</td>
      <td>Doubleshot Espresso</td>
      <td>false</td>
      <td>4/19/2012</td>
      <td>9</td>
      <td>$3.30</td>
    </tr>
    <tr>
      <td>Regina</td>
      <td>Devling</td>
      <td>Caramel Latte</td>
      <td>true</td>
      <td>2/26/2012</td>
      <td>11</td>
      <td>$3.80</td>
    </tr>
    <tr>
      <td>Michael</td>
      <td>Winkler</td>
      <td>Doubleshot Espresso</td>
      <td>false</td>
      <td>7/16/2012</td>
      <td>4</td>
      <td>$3.30</td>
    </tr>
    <tr>
      <td>Mayumi</td>
      <td>Burke</td>
      <td>Caffe Americano</td>
      <td>false</td>
      <td>9/7/2012</td>
      <td>1</td>
      <td>$2.50</td>
    </tr>
    <tr>
      <td>Andrew</td>
      <td>Nagase</td>
      <td>Caffe Espresso</td>
      <td>true</td>
      <td>4/15/2012</td>
      <td>3</td>
      <td>$3.00</td>
    </tr>
    <tr>
      <td>Ian</td>
      <td>Burke</td>
      <td>Green Tea</td>
      <td>false</td>
      <td>11/16/2012</td>
      <td>5</td>
      <td>$1.50</td>
    </tr>
    <tr>
      <td>Yoshi</td>
      <td>Petersen</td>
      <td>White Chocolate Mocha</td>
      <td>false</td>
      <td>7/26/2012</td>
      <td>2</td>
      <td>$3.60</td>
    </tr>
    <tr>
      <td>Lars</td>
      <td>Bjorn</td>
      <td>Peppermint Mocha Twist</td>
      <td>false</td>
      <td>7/17/2012</td>
      <td>11</td>
      <td>$4.00</td>
    </tr>
    <tr>
      <td>Guylene</td>
      <td>Devling</td>
      <td>Caramel Latte</td>
      <td>true</td>
      <td>8/9/2012</td>
      <td>6</td>
      <td>$3.80</td>
    </tr>
    <tr>
      <td>Michael</td>
      <td>Burke</td>
      <td>Caffe Americano</td>
      <td>false</td>
      <td>9/10/2012</td>
      <td>11</td>
      <td>$2.50</td>
    </tr>
    <tr>
      <td>Petra</td>
      <td>Vileid</td>
      <td>White Chocolate Mocha</td>
      <td>false</td>
      <td>8/21/2012</td>
      <td>7</td>
      <td>$3.60</td>
    </tr>
    <tr>
      <td>Lars</td>
      <td>Nodier</td>
      <td>White Chocolate Mocha</td>
      <td>false</td>
      <td>7/16/2012</td>
      <td>8</td>
      <td>$3.60</td>
    </tr>
  </tbody>
</table>

<div style="margin-top: 10px"></div>
<jqxButton (onClick)="loadBtn()">Load Angular Grid from Table</jqxButton>

<div style="margin-top: 10px"></div>
<jqxGrid #myGrid [auto-create]="false"></jqxGrid>