object-table | Angular directive to create dynamic tables

object-table angularjs


Stars : 10

Forks : 10

Created by Yauheni Kokatau

bower install angular-object-table

Demo Download GitHub

Display JSON data in table with AngularJS

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


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.


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!


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/


<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 
       headers="Name, Age" 
       fields="name, age"




Here is a file list for possible attributes for stable version:

datayesData 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"
fromUrlnoLoad data from external URL.
displaynodefault: 5. Displays count. Using with 'paging' displays items per page
searchnodefault: true. Display search input. Value search="separate" is allows you search by columns.
pagingnodefault: true. Use paging to present data.
headersyesTable header names array. Example: headers = "HeaderName1,HeaderName2".
fieldsyesArray 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".
sortingnodefault: simple. Value "simple" is used to sort by single column, "compound" - to order by multiple fields.
editablenoAllows to edit content inside cells. Editing updates your angular model.
selectnoselect="multiply" allows to select more than one row. Selected rows are accessible.
selected-modelnoIt exports selected model to controller variable. selected-model="yourModel"
resizenodefault: true. Use column resizing.
drag-columnsnodefault: false. It allows to reorder your columns using drag-n-drop.


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


Javascript plugin