Post
Ask Question

Responsive Table Using AngularJS And Bootstrap

In today’s world, responsiveness is one of the main key advantages of web development. Since we need to open the same page on different types of devices like desktop, tab, or mobile. Due to the different screen sizes, it is important when we design a page either in HTML format or aspx format for web development, that the design must be responsive i.e. it automatically adjusts all types of screen designs. In this article, I am going to display how to create a responsive table using Bootstrap and AngularJS.

For it, we first need to create some stylesheets. For this, add a stylesheet file to the project and write down the following code.

body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar.nav-second-level {
    display: none;
}

/* TABLES */
.table-bordered {
    border: 1px solid #EBEBEB;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    background-color: #FFF;
    border-bottom-width: 1px;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #e7e7e7;
    border-width: 1px 1px 0 1px;
}

.table > thead > tr > th {
    border-bottom: 1px solid #DDDDDD;
    vertical-align: bottom;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: 1px solid #e7eaec;
    line-height: 1.42857;
    padding: 5px;
    vertical-align: top;
}

/* GLOBAL */
.ibox {
    clear: both;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 0;
}

.ibox.collapsed .ibox-content {
    display: none;
}

.ibox.collapsed .fa.fa-chevron-up:before {
    content: "\f078";
}

.ibox.collapsed .fa.fa-chevron-down:before {
    content: "\f077";
}

.ibox:after,
.ibox:before {
    display: table;
}

.ibox-title {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 0px 0px 0px 0px;
    color: inherit;
    margin-bottom: 0;
    padding: 10px 15px 0;
    min-height: 28px;
}

.ibox-content {
    background-color: #ffffff;
    color: inherit;
    padding: 10px 10px 10px;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 0px 0px;
}

.ibox-footer {
    color: inherit;
    border-top: 1px solid #e7eaec;
    font-size: 90%;
    background: #ffffff;
    padding: 10px 15px;
}

table.table-mail tr td {
    padding: 12px;
}

.table-mail.check-mail {
    padding-left: 20px;
}

.table-mail.mail-date {
    padding-right: 20px;
}

.ibox-content {
    clear: both;
}

.ibox-heading {
    background-color: #f3f6fb;
    border-bottom: none;
}

.ibox-heading h3 {
    font-weight: 200;
    font-size: 24px;
}

.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
    color: #1ab394;
    font-weight: bold;
}

.ibox-title .label {
    float: left;
    margin-left: 4px;
}

.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
}

.ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
}

.ibox-tools a.btn-primary {
    color: #fff;
}

.ibox-tools.dropdown-menu > li > a {
    padding: 4px 10px;
    font-size: 12px;
}

.ibox.ibox-tools.open > .dropdown-menu {
    left: auto;
    right: 0;
}

.ibox.fullscreen {
    z-index: 2030;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    margin-bottom: 0;
}

.ibox.fullscreen .collapse-link {
    display: none;
}

.ibox.fullscreen .ibox-content {
    min-height: calc(100% - 48px);
}

/* Responsive Table */
.ibox-table {
    position: relative;
}

.ibox-table.responsive-table {
    width: 100%;
}

.ibox-table.responsive-table th,
.ibox-table.responsive-table td {
    padding: 7px;
}

@media screen and (max-width: 992px) {
    .ibox-table.responsive-table thead {
        display: none;
    }

    .ibox-table.responsive-table tr {
        display: block;
        border-bottom: 1px solid #ddd;
    }

    .ibox-table.responsive-table td {
        display: block;
        text-align: left;
        padding: 7px 5px 7px 50% !important;
    }

    .ibox-table.responsive-table td:last-child {
        border-bottom: 0;
    }

    .ibox-table.responsive-table td:before {
        content: attr(data-label);
        text-align: right;
        width: 45%;
        position: absolute;
        left: 2px;
        font-weight: bold;
        white-space: pre-wrap;
        padding: 0px 0 5px;
    }
}

.minimalize-styl-2.fa-bars {
    display: inline-block;
}

.minimalize-styl-2.fa-chevron-left {
    display: none;
}

body.mini-navbar.minimalize-styl-2.fa-chevron-left {
    display: inline-block;
}

body.mini-navbar.minimalize-styl-2.fa-bars {
    display: none;
}

Now add a html file named index.html and add the following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Responsive Data Grid in Angular Js</title>
    <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
    <link href="Style.css" rel="stylesheet" />
    <script src="../../Scripts/angular.min.js"></script>
    <script src="IndexController.js"></script>
</head>
<body data-ng-app="TestApp" data-ng-controller="IndexController as model">
    <div class="row animated fadeInRight">
        <div class="col-lg-12">
            <div class="rowDiv">
                <h3>{{model.message}}</h3>
            </div>
        </div>
        <div class="ibox-content">
            <div class="ibox-table">
                <div class="table-responsive">
                    <table class="responsive-table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th data-ng-repeat="header in model.headerData" data-ng-switch on="header.caption">
                                    <span data-ng-switch-when="chkBox">
                                        <input id="chkHeader" type="checkbox" class="i-checks" name="input[]" data-ng-init="model.assignControlProperty(-1);" />
                                    </span>
                                    <span data-ng-switch-when="btnInfo"></span>
                                    <span data-ng-switch-default>{{header.caption}}</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="item in model.gridData">
                                <td data-ng-repeat="field in model.columnField" data-ng-switch on="field.fieldName" data-label="{{field.dataLabel}}" data-ng-click="model.gridRowClick(item, $parent.$index, field);">
                                    <span data-ng-switch-default>{{item[field.fieldName]}}</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Now add a JavaScript file and add the following code.

'use strict';

var testApp = angular.module('TestApp', []);

testApp.controller('IndexController', ['$http', function ($http) {
    var self = this;
    self.message = 'Responsive Bootstrap Based Table';

    var gridData = [
        {
            Id: 1,
            Code: 'A001',
            EmployeeName: 'Sumit Sharma',
            Dept: 'Accounts',
            Desig: 'Manager',
            City: 'Kolkata',
            Salary: 25000
        },
        {
            Id: 2,
            Code: 'A002',
            EmployeeName: 'Ramesh Sharma',
            Dept: 'Sales',
            Desig: 'Agent',
            City: 'New Delhi',
            Salary: 15000
        },
        {
            Id: 3,
            Code: 'A003',
            EmployeeName: 'Arun Roy',
            Dept: 'Accounts',
            Desig: 'Clerk',
            City: 'Mumbai',
            Salary: 22000
        },
        {
            Id: 4,
            Code: 'D001',
            EmployeeName: 'Swapan Das',
            Dept: 'HR',
            Desig: 'Admin',
            City: 'Kolkata',
            Salary: 40000
        },
        {
            Id: 5,
            Code: 'S021',
            EmployeeName: 'Akash Srivastava',
            Dept: 'Marketing',
            Desig: 'Manager',
            City: 'Pune',
            Salary: 32000
        },
        {
            Id: 6,
            Code: 'A004',
            EmployeeName: 'Nilesh Roy',
            Dept: 'Sales',
            Desig: 'Executive',
            City: 'Kolkata',
            Salary: 17000
        }
    ];

    var gridHeader = 'Code,Employee Name,Department,Designation,Salary Amount';
    var displayField = 'Code,EmployeeName,Dept,Desig,Salary';
    
    self.gridData = gridData;
    self.headerArray = gridHeader.split(',');
    self.headerData = [];

    angular.forEach(self.headerArray, function (field, i) {
        self.headerData.push({
            caption: self.headerArray[i]
        });
    });

    var returnDataLabel = function (index) {
        return self.headerArray[index];
    };

    var colData = displayField.split(',');
    self.columnField = [];

    angular.forEach(colData, function (field, i) {
        self.columnField.push({
            fieldName: colData[i],
            dataLabel: returnDataLabel(i)
        });
    });

    self.gridRowClick = function (item, index, column) {
        alert('grid row click for ' + item.EmployeeName);
    };
}]);

The above-mentioned table is totally dynamic. Since the grid source data (i.e. self.source) contains menu fields like id etc but in the table, it only shows those fields that are mentioned in the displayed variable. Firstly, we run the above-written code, and below is the output.

Grid source data

The following output is for small-screen devices.

Output

Now, I want to remove the city field from the table. For that, just change the following two lines of code and check.

var gridHeader = 'Code,Employee Name,Department,Designation,Salary Amount';
var displayField = 'Code,EmployeeName,Dept,Desig,Salary';

Responnsive Bootstrap


Similar Articles