AngularJS Tables - The Coding College

Displaying tabular data is a common requirement in web applications. AngularJS provides powerful tools to dynamically create, bind, and manipulate tables with ease. This guide will walk you through creating tables, using AngularJS directives for dynamic data, and enhancing tables with sorting, filtering, and pagination.

Visit The Coding College for more in-depth programming tutorials and coding tips.

Why Use AngularJS for Tables?

AngularJS simplifies table management by:

Dynamically generating rows and columns using ng-repeat.
Integrating two-way data binding for real-time updates.
Supporting filters for sorting and searching.
Enhancing user experience with features like pagination.

Basic Table Creation with AngularJS

Example: Simple Dynamic Table

<div ng-app="myApp" ng-controller="myCtrl">
    <h3>User Information</h3>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat="user in users">
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.age }}</td>
        </tr>
    </table>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.users = [
            { name: 'John Doe', email: '[email protected]', age: 28 },
            { name: 'Jane Smith', email: '[email protected]', age: 34 },
            { name: 'Mike Johnson', email: '[email protected]', age: 45 }
        ];
    });
</script>

Output:
Displays a table with user information dynamically generated from the users array.

Adding Filters to Tables

AngularJS filters allow you to sort and search data easily.

Example: Table with Search and Sorting

<div ng-app="myApp" ng-controller="myCtrl">
    <h3>Search and Sort</h3>
    <input type="text" ng-model="searchText" placeholder="Search Users">
    <table border="1">
        <tr>
            <th ng-click="sortColumn='name';reverse=!reverse">Name</th>
            <th ng-click="sortColumn='email';reverse=!reverse">Email</th>
            <th ng-click="sortColumn='age';reverse=!reverse">Age</th>
        </tr>
        <tr ng-repeat="user in users | filter:searchText | orderBy:sortColumn:reverse">
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.age }}</td>
        </tr>
    </table>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.users = [
            { name: 'John Doe', email: '[email protected]', age: 28 },
            { name: 'Jane Smith', email: '[email protected]', age: 34 },
            { name: 'Mike Johnson', email: '[email protected]', age: 45 }
        ];
        $scope.sortColumn = 'name';
        $scope.reverse = false;
    });
</script>

Features:

Search: Type in the input box to filter results dynamically.
Sorting: Click on column headers to sort data.

Pagination for Large Tables

Handling large datasets requires pagination for better usability.

Example: Table with Pagination

<div ng-app="myApp" ng-controller="myCtrl">
    <h3>Paginated Table</h3>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat="user in users.slice((currentPage-1)*pageSize, currentPage*pageSize)">
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.age }}</td>
        </tr>
    </table>
    <div>
        <button ng-disabled="currentPage === 1" ng-click="currentPage = currentPage - 1">Previous</button>
        <button ng-disabled="currentPage === totalPages" ng-click="currentPage = currentPage + 1">Next</button>
    </div>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.users = [
            { name: 'John Doe', email: '[email protected]', age: 28 },
            { name: 'Jane Smith', email: '[email protected]', age: 34 },
            { name: 'Mike Johnson', email: '[email protected]', age: 45 },
            { name: 'Anna White', email: '[email protected]', age: 22 },
            { name: 'Tom Brown', email: '[email protected]', age: 31 }
        ];
        $scope.pageSize = 2;
        $scope.currentPage = 1;
        $scope.totalPages = Math.ceil($scope.users.length / $scope.pageSize);
    });
</script>

Features:

Displays a subset of data based on the current page.
Includes navigation buttons for moving between pages.

Using External Libraries

For advanced features like column resizing, export options, and advanced pagination, you can use libraries like ui-grid or angular-datatables.

Example: Using Angular-Datatables

<div ng-app="myApp" ng-controller="myCtrl">
    <table datatable="ng" class="row-border hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users">
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.age }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://l-lin.github.io/angular-datatables/archives/dist/angular-datatables.min.js"></script>
<script>
    var app = angular.module('myApp', ['datatables']);
    app.controller('myCtrl', function($scope) {
        $scope.users = [
            { name: 'John Doe', email: '[email protected]', age: 28 },
            { name: 'Jane Smith', email: '[email protected]', age: 34 },
            { name: 'Mike Johnson', email: '[email protected]', age: 45 }
        ];
    });
</script>

Best Practices for AngularJS Tables

Optimize Performance: Use pagination or virtual scrolling for large datasets.
Leverage Filters: Use AngularJS filters for search and sort functionality.
Avoid Inline Logic: Move complex logic to controllers or services.
Use External Libraries: Enhance table capabilities with libraries like ui-grid or angular-datatables.

Conclusion

AngularJS simplifies table creation and management, allowing you to dynamically display, filter, and paginate data with minimal effort. By combining built-in directives with external libraries, you can build robust, user-friendly tables.