Tubular provides a set of directives and services using AngularJS as framework. The main component is a grid with multiple options:

  • Full markup design, you don't need to write even a Controller in AngularJS to start using our Grid or Form.
  • Common functionality like Sorting, Filtering (specific to the data type), Free-text search, Paging and more.
  • Easy to implement inline editors, page or popup forms totally bound to your grid.
  • Basic services like Print and Export to CSV in client-side.
  • Independent backend platform (.NET and Node.js)

Developing with .NET as backend? check Tubular DotNet project.

Developing with Node.js as backend? check Tubular Node.js project.

If you are looking for Angular2 support, check Tubular2 project.


You will need to reference the following JS libraries in order to use Tubularin your project:

Using a CDN

You can get all the dependencies using the following links in your master HTML page. jsDelivr provides almost everything you need to import.

Then you will need to either grab your own copy of Tubular or you use jsDelivr to reference Tubular CSS and JS files.

Finally include Tubular to your module as follows:

angular.module('app', [tubular']);

Bower Installation

$ bower install tubular --save

npm Installation

$ npm install tubular --save

NuGet Installation

PM Install-Package Tubular


Browse to the Samples and discover all the features in Tubular.

In the next snippet you can see how easy is to understand Tubular grid markup. You don't need to add anything else to your controller!

{{label}} {{label}} {{row.CustomerName}} {{row.Invoices}}


We have 3 boilerplates ready to seed your project: