angular-object-table

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
nom 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