ng-table - resizable columns

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="http://rawgit.com/esvit/ng-table/master/dist/ng-table.js"></script>
    <script src="http://rawgit.com/esvit/ng-table-resizable-columns/master/ng-table-resizable-columns.src.js"></script>
    <script src="http://rawgit.com/marcuswestin/store.js/master/store.min.js"></script>
    
    <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/ng-table.css">
</head>
<body ng-app="main">

<h1>ngTable Resize Columns</h1>

<div ng-controller="DemoCtrl">

    <table ng-table="tableParams" show-filter="true" class="table ng-table-resizable-columns ng-table-rowselected table-bordered" data-resizable-columns-id="myTable">
            <thead>
            <tr>
                <th data-resizable-column-id="name" class="sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy('name', 'asc'),
                    'sort-desc': tableParams.isSortBy('name', 'desc')
                  }"
                    ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})" rowspan="2">
                    <div>Name</div>
                </th>
                <th data-resizable-column-id="age" class="text-center sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy('age', 'asc'),
                    'sort-desc': tableParams.isSortBy('age', 'desc')
                  }"
                    ng-click="tableParams.sorting({'age' : tableParams.isSortBy('age', 'asc') ? 'desc' : 'asc'})">
                    <div>Age</div>
                </th>
            </tr>
        </thead>
        <tr ng-repeat="user in $data"
            ng-click="user.$selected = !user.$selected; changeSelection(user)"
            ng-class="{'active': user.$selected}">
            <td data-title="'Name'" header-class="text-left" header-data-id="junk" sortable="'name'" filter="{ 'name': 'text' }">
                {{user.name}}
            </td>
            <td data-title="'Age'" header-class="text-right" class="text-right" sortable="'age'" filter="{ 'age': 'text' }">
                {{user.age}}
            </td>
        </tr>
    </table>



<script>
    var app = angular.module('main', ['ngTable', 'ngTableResizableColumns']).
            controller('DemoCtrl', function ($scope, $filter, ngTableParams) {
                var data = [
                    {name: "Moroni blah blah this is long text", age: 50},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34},
                    {name: "Tiancum", age: 43},
                    {name: "Jacob", age: 27},
                    {name: "Nephi", age: 29},
                    {name: "Enos", age: 34}
                ];
                $scope.data = data;

                $scope.tableParams = new ngTableParams({
                    page: 1,            // show first page
                    count: 10,          // count per page
                    filter: {
                        //name: 'M'       // initial filter
                    },
                    sorting: {
                        //name: 'asc'     // initial sorting
                    }
                }, {
                    total: data.length, // length of data
                    getData: function ($defer, params) {
                        // use build-in angular filter
                        var filteredData = params.filter() ?
                                $filter('filter')(data, params.filter()) :
                                data;
                        var orderedData = params.sorting() ?
                                $filter('orderBy')(filteredData, params.orderBy()) :
                                data;

                        params.total(orderedData.length); // set total for recalc pagination
                        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });

                $scope.changeSelection = function(user) {
                    // console.info(user);
                }
            })
</script>

<style>
.rc-handle-container {
  position: relative; }

.rc-handle {
  position: absolute;
  width: 7px;
  cursor: ew-resize;
  margin-left: -3px;
  z-index: 2; }

table.rc-table-resizing {
  cursor: ew-resize; }
  table.rc-table-resizing thead, table.rc-table-resizing thead > th, table.rc-table-resizing thead > th > a {
    cursor: ew-resize; }
</style>

</div>


</body>
</html>

Demonstration of ng-table column resizing.  

Also saves resized columns to local storage.