<!DOCTYPE html>
|
<!--[if lt IE 7]>
|
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
<!--[if IE 7]>
|
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
<!--[if IE 8]>
|
<html class="no-js lt-ie9"> <![endif]-->
|
<!--[if gt IE 8]><!-->
|
<html class="no-js"> <!--<![endif]-->
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
|
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
|
<script src="../bower_components/angular/angular.js"></script>
|
<script src="../dist/ng-table.js"></script>
|
<script src="js/ng-table-resizable-columns.js"></script>
|
<link rel="stylesheet" href="../dist/ng-table.css">
|
</head>
|
<body ng-app="main">
|
|
<h1>Table with Resizable Columns</h1>
|
|
<div ng-controller="DemoCtrl">
|
|
<table ng-table="tableParams" show-filter="true" class="table ng-table-resizable-columns">
|
<tr ng-repeat="user in $data">
|
<td data-title="'Name'" header-class="'text-left'" sortable="'name'" filter="{ 'name': 'text' }">
|
{{user.name}}
|
</td>
|
<td data-title="'Age'" header-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", 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
|
}, {
|
total: data.length, // length of data
|
getData: function ($defer, params) {
|
// use built-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()));
|
}
|
});
|
})
|
</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>
|
