https://github.com/jasonboy/ly-table
Simple Angular Table Directive
https://github.com/jasonboy/ly-table
angular data-table directive table ui
Last synced: 11 months ago
JSON representation
Simple Angular Table Directive
- Host: GitHub
- URL: https://github.com/jasonboy/ly-table
- Owner: JasonBoy
- License: mit
- Created: 2016-01-02T10:17:16.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-04-12T06:15:39.000Z (almost 9 years ago)
- Last Synced: 2025-03-03T12:17:53.409Z (12 months ago)
- Topics: angular, data-table, directive, table, ui
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ly-table
Simple Angular Table Directive
This angular directive will create a html table based on the `data` and `columns` and other options.
We can pass html for every column, and with other angular directive, like `ng-click`,
you can pass any function to the table to add more logic with $scope attached.
> WARN: This directive only displays table data without any pagination function, do it with other plugins or by yourself
### Usage
`npm install ly-table`
Just import 'angular.js' , 'angular-sanitize.js' and the `ly-table.js`,
or
for commonjs env, just `require('ly-table')`,
`var app = angular.module('app', ['lyTable']);`
Simple usage
```
```
#### Directive options
**data**: [Array] Array from $scope, just an array contains all the data,
```javascript
$scope.data = [
{
name: 'jason',
age: 10,
address: 'shanghai'
}
]
```
**columns**: [Array],Array from $scope, define all the columns how to display and other logic need.
```javascript
$scope.columns = [
{
field: 'name', //which is key in 'data' of every row data object,
name: 'Age',
sortable:true, //if this column is sortable
sortBy:'' //sort by name..., if not provided, will sort by field
cssClass:'', //css in tbody td
headCssClass:'', // css in thead th
autoEscape: false, //auto escape the html in this td or not,
//if you need add other directive like ng-click in formatter,
//set it to false, default value is false
formatter:'', //string or function to call to gen the html in the td,
//which can compile the html with scope with the help of
//[bindHtmlCompile](https://github.com/incuna/angular-bind-html-compile) directive, see demo
}
];
```
**tableClass**: [String], add additional table css class
**autoEscape**: [String] true/false. default false, escape/unescape globally
###Events
**postLinked**: callback after link function
**sorting**: listen on the event to be notified when user click the thead td,
sort class `active`, `sortable` will be added to the `thead > tr > th > span` element based on the sort status
```
$scope.$on('sorting', function(e, column) {
var by = column.sortBy;
var dir = column.sortDir; //1: desc, else asc
}
```
### Demo
See the demo in demo folder