Awesome

Display 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