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.
Now add a html file named index.html and add the following code.
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.
![Responnsive Bootstrap]()