Skip to content

Latest commit

 

History

History
105 lines (87 loc) · 3.79 KB

README.md

File metadata and controls

105 lines (87 loc) · 3.79 KB
Raw

Display JSON data in table with AngularJS

================= Build Status

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