Display JSON 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 via Bower

bower install 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