JarCastingDisplay JSON data in table with AngularJS
=================
Desription
This Angular directive enable data representation via tables. It makes possible search, filtering, pagination, compound sorting, editable cells, row templates, etc... Exhibits high performance. Without any dependencies - just pure Angular.
Code licensed under BSD license.
Requirements
Angular v. 1.3.x Bootstrap 3 CSS
Feature List
- loading data from URL
- column-specific filtering
- column sorting
- compound sorting (sorting by few fields)
- live editing (editable cells)
- custom row templates
- custom header templates
- column highlighting
- column resizing
- draggable columns
- multiply selection
- external filtering
- pagination
- search (by all fields)
- column searching (by each column)
- display aggregate information in footer (like, total ,sum)
- support server pagination
- themes!
Installing:
bower install angular-object-table
npm i angular-object-table --save
yarn add angular-object-table
Run examples
Just run http server form root folder and open in browser example directory: http://localhost:8080/example/
Using
<link rel="stylesheet" type="text/css" href="{path to library}/build/object-table-style.css">
<script type="text/javascript" src="{path to library}/build/object-table.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
Add dependency:
angular.module('yourModule', ['objectTable'])
Example of HTML-markup :
<table object-table
from-url="http://some-url.com/getData"
data="exportDataVariable"
display="2"
headers="Name, Age"
fields="name, age"
sorting="false"
editable="true"
></table>
Examples
http://ekokotov.github.io/object-table/
Atributes
Here is a file list for possible attributes for stable version:
| Atribute | required | Description |
|---|---|---|
| data | yes | Data source (array of objects) in your Controller. Note: If 'fromUrl' is present, 'data' attribute contains controller link to empty array (will be fill up after receiving data). Example: data="exportDataVariable" |
| fromUrl | no | Load data from external URL. |
| display | no | default: 5. Displays count. Using with 'paging' displays items per page |
| search | no | default: true. Display search input. Value search="separate" is allows you search by columns. |
| paging | no | default: true. Use paging to present data. |
| headers | yes | Table header names array. Example: headers = "HeaderName1,HeaderName2". |
| fields | yes | Array of displayed properties of object. This option allows to display only certain fields of the object. Number of fields must be equal number of headers. Example: fields=propertyName1,propertyName1". |
| sorting | no | default: simple. Value "simple" is used to sort by single column, "compound" - to order by multiple fields. |
| editable | no | Allows to edit content inside cells. Editing updates your angular model. |
| select | no | select="multiply" allows to select more than one row. Selected rows are accessible. |
| selected-model | no | It exports selected model to controller variable. selected-model="yourModel" |
| resize | no | default: true. Use column resizing. |
| drag-columns | no | default: false. It allows to reorder your columns using drag-n-drop. |
Themes
Please check new 'Dark-sky' and 'Blue-dust' themes: http://ekokotov.github.io/object-table/samples.html#/themes
Tests (Karma + Jasmine)
karma start tests/karma.conf.js