AngularJS Tables

AngularJS Tables

Displaying data in an HTML table is one of the most common tasks in web development.

AngularJS makes generating massive, dynamic tables incredibly simple!

Using ng-repeat for Tables

To populate a table, you do not need to manually write dozens of <tr> rows.

You simply apply the ng-repeat directive to a single <tr> tag.

AngularJS will automatically duplicate that row for every item in your array!

Sorting Table Data

You can instantly sort your table data alphabetically or numerically.

You just apply the orderBy filter to your ng-repeat expression.

This builds highly interactive data grids with almost zero JavaScript code.

<div ng-app="myApp" ng-controller="customersCtrl">
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <!-- Loops through the array, sorted alphabetically by Country -->
    <tr ng-repeat="x in names | orderBy:'country'">
      <td>{{ x.name }}</td>
      <td>{{ x.country }}</td>
    </tr>
  </table>
</div>

SEO and Best Practices

Proper semantic HTML tables are highly favored by accessibility tools and screen readers.

Using <th> tags and clean table structures improves the overall semantic value of your page.

Search engines reward websites that provide clean, easily parseable structured data grids.