Html resizable table in angularjs.

Today, we will learn how to resize table, basically we use the table for display static data or dynamic data. There so oldest time we all are used simple table for displayed data. When we use table then we have to use table heading, table body, and table row and table column. Table heading is use for display heading of data like a (ID, Name) and table body is main part for the table row and column, table row is a collection of data and table column is a field of data like (ID Column, Name Column ). We can design the table using custom CSS and apply sorting, filtering, paging by our custom JavaScript or any other script. There are so many plug-in for apply sorting, filtering, pagination, resizing etc. you can do it using JQuery because JQuery is an advance of JavaScript. When we bind the large amount of data in table then the table width is so wide and the data doesn’t look nice because some of the field’s names are large and some of the fields data are not larger but the table column width is fixed so large data wrapped and data is going very long, so for fix this issue we have create this tutorial to resize the table column.

For this tutorial, we have used AngularJs, we will create this tutorial using AngularJS and create some the component or directive. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. There so many versions are available for AngularJS.

Open the visual studio or visual studio code for this tutorial, but we use visual studio for creating this tutorial, so open visual studio and create new empty project, after created empty project we will create some important folders like ( bower_components, controllers, scripts, views ). These all folders are useful, the first folder is (bower_components) , in this folder we installed the angular, jquery, jqueri-ui. In the second folder (controllers) we will create controller file but before create controller file we must have to create modular file for this tutorial and this modular file is create in (scripts) folder, the last one is HTML page in folder of (views).

We have installed angular, jquery and jqueri-ui from bower component site or using commands in the ( bower_components ) folder. All the required packages are installed, now we create the modular file (app.js) in scripts folder. A modular file is main part of the whole project, because we create the other (.Js) file based on modular.

App.JS (Modular)

var app = angular.module('TableResize', [ ]);

A modular name is “Table Resize” and we will create another file like controller using variable of app. A controller is a connect with HTML page; we bind the data in UI from getting controller side. We write the business logic in the controller and controller getting the data from service because service connect with API and get data from API. Now we create controller

tableResize.JS (Controller)

app.controller('tableResize', function ($http, $scope) 
{
    
});

We have created tableresize controller using modular name and Inject $http and $scope in controller function. For the table resize we have to implement the directive. This directive we use view side for resizing the table. We can create the directive using the modular name and we will create it the tableResize controller file, you can create directive in different file like directive.js but in this tutorial we will create it in controller file.

app.directive('resizable', function () {

    return {
        restrict: 'A',
        scope: {
            callback: '&onResize'
        },
        link: function postLink(scope, elem, attrs) {
            elem.resizable({ handles: 'e' });
            elem.on('resize', function (evt, ui) {
                scope.$apply(function () {
                    if (scope.callback) {
                        scope.callback({ $evt: evt, $ui: ui });
                    }
                })
            });
        }
    };
});

Above we have created “resizable” directive, a resizable directive call when table is initialize. In directive some of the attributes are used like ‘restrict’, ‘scope ‘, link function. When we resize the table then call the elem.on(‘resize’) function with two parameters of “evt” and “ui”. Now we will see how to call this directive in UI side and when call this directive, for this we have create view file that is HTML page in view folder. After create HTML page we have to inject the component files, project files or other files.

Index.html

<!DOCTYPE html>
<html ng-app="TableResize">
<head>
<title>Table Resize</title>
<link href="../bower_components/jqueri-ui/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/jqueri-ui/jquery-ui.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../scripts/app.js"></script>
    <script src="../controllers/tableResize.js"></script>
</body>
</html>

In Index.html page we have inject the modular name in tag. It is most important to inject modular name in the main page of your project. In the tag we have injected jquery.ui.min.css file, we have inject only one css file, currently in tag we have injected first jquery.min.js, jquery-ui.js because onResize function doesn’t work proper without this (.js) file, then inject the angular file and last two files are our project files that is modular and controller file. Now we add table in tag and apply resizable directive on that table heading.

<table border="1" style="width:100%">
<thead>
<tr>
<th resizable on-resize="resize($evt, $ui)" id="colNotes" class="text-center">
<div class="handle"></div>
First Name
</th>
<th resizable on-resize="resize($evt, $ui)" id="colNotes" class="text-center">
<div class="handle"></div>
Last Name
</th>
<th resizable on-resize="resize($evt, $ui)" id="colNotes" class="text-center">
<div class="handle"></div>
Work 
</th>
<th resizable on-resize="resize($evt, $ui)" id="colNotes" class="text-center">
<div class="handle"></div>
Designation
</th>
<th resizable on-resize="resize($evt, $ui)" id="colNotes" class="text-center">
<div class="handle"></div>
Description
</th>
<th resizable on-resize="resize($evt, $ui)" id="colNotes" class="text-center">
<div class="handle"></div>
Hobby
</th></tr></thead><tbody><tr>
<td><span style="word-break : break-word">Gautam</span></td>
<td><span style="word-break : break-word">Nagraj</span></td>
<td><span style="word-break : break-word">Web/Software Developement</span>           </td><td><span style="word-break : break-word">Developer</span></td>
<td><span style="word-break : break-word">I like to do Blogging.</span>
</td><td><span style="word-break : break-word">Cricket</span></td>
</tr></tbody></table>

You can see in above HTML we have called the directive of resizable and this directive call when on-resize function call. You can see it in every table heading. In resize function we pass two parameters “$evt” and “$ui”. If you want to design the better table then you can write your own css and apply that css in the table or you can use Bootstrap, It is very useful for the designing purpose and there are many versions are available, you can download it and add in your project. After added you can use Bootstrap class on HTML page.

Here we have only call resizable directive and second one is on-resize attribute with the resize function. You can create it in your project by following above instructions.

Thanks Again,