Angular directive to easy create dynamic tables from source or URL with sorting, filtering and pagination. Smart templates and good perfomance

Angular Core Dependency: ~1.3.15

Module License: MIT

Added by: Sam Deering





Stars: 167

Watchers: 167

Forks: 58

Module Description

Display JSON in Table with AngularJS


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
  • multiply selection
  • external filtering
  • pagination
  • search (by all fields)
  • column searching (by each column)
  • display aggregate information in footer
  • 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/


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

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"

##Themes Please check new 'Dark-sky' and 'Blue-dust' themes: http://ekokotov.github.io/object-table/samples.html#/themes

Module stats last updated: 2018-01-02 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!