{"id":13777682,"url":"https://github.com/unosquare/tubular","last_synced_at":"2025-05-11T11:33:57.392Z","repository":{"id":29351865,"uuid":"32886100","full_name":"unosquare/tubular","owner":"unosquare","description":"A set of AngularJS directives designed to rapidly build modern web applications","archived":true,"fork":false,"pushed_at":"2019-09-11T15:13:03.000Z","size":7993,"stargazers_count":44,"open_issues_count":0,"forks_count":13,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-15T09:15:41.740Z","etag":null,"topics":["angularjs","forms","grid","javascript"],"latest_commit_sha":null,"homepage":"http://unosquare.github.io/tubular-angular/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unosquare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-25T19:26:28.000Z","updated_at":"2023-01-28T17:16:57.000Z","dependencies_parsed_at":"2022-08-30T20:01:00.179Z","dependency_job_id":null,"html_url":"https://github.com/unosquare/tubular","commit_stats":null,"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unosquare%2Ftubular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unosquare%2Ftubular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unosquare%2Ftubular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unosquare%2Ftubular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unosquare","download_url":"https://codeload.github.com/unosquare/tubular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253559194,"owners_count":21927545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","forms","grid","javascript"],"created_at":"2024-08-03T18:00:47.164Z","updated_at":"2025-05-11T11:33:56.894Z","avatar_url":"https://github.com/unosquare.png","language":"JavaScript","funding_links":[],"categories":["Directive"],"sub_categories":[],"readme":" [![Analytics](https://ga-beacon.appspot.com/UA-8535255-2/unosquare/tubular/)](https://github.com/igrigorik/ga-beacon)\n [![Build Status](https://travis-ci.org/unosquare/tubular.svg?branch=master)](https://travis-ci.org/unosquare/tubular)\n [![Build status](https://ci.appveyor.com/api/projects/status/scyh5u1fltu4d516?svg=true)](https://ci.appveyor.com/project/geoperez/tubular)\n[![Coverage Status](https://coveralls.io/repos/unosquare/tubular/badge.svg?branch=master)](https://coveralls.io/r/unosquare/tubular?branch=master)\n\n![Tubular](http://unosquare.github.io/tubular-angular/assets/tubular.png)\n\nImportant - This repository has been archived. We are not longer maintaining this project. Please check Tubular for [Angular.io](https://github.com/unosquare/tubular2) or [React](https://github.com/unosquare/tubular-react).\n\n:star: *Please star this project if you find it useful!*\n\nTubular for AngularJS (formerly Tubular) provides a set of directives and services using AngularJS as framework. The main component is a grid with multiple options:\n\n* **Full markup design**, you don't need to write even a Controller in AngularJS to start using our Grid or Form\n* Common functionality like **Sorting, Filtering (specific to the data type), Free-text search, Paging** and more.\n* Easy to implement inline editors, page or popup forms totally bound to your grid.\n* Basic services like **Print and Export to CSV** in client-side.\n* Independent backend platform (.NET and Node.js)\n* Compatible with modern browsers (Chrome, Firefox, and Edge). We are not supporting old browsers like Internet Explorer, you may need to include some polyfills.\n\nPlease visit the [Tubular GitHub Page](http://unosquare.github.io/tubular) to learn how quickly you can start coding. See [Related projects](#related-projects) below to discover more Tubular libraries and backend solutions.\n\n## Dependencies\n\nYou will need to reference the following JS libraries in order to use Tubular in your HTML:\n\n* [AngularJS (optionally Animate and Route)](https://angularjs.org/) - 1.6\n* [AngularJS UI Bootstrap](https://angular-ui.github.io/bootstrap/) - 2.5 with the Bootstrap CSS\n* [Moment.js](http://momentjs.com/) - 2.17\n* [Font Awesome](http://fortawesome.github.io/Font-Awesome/)\n\n## Using a CDN\n\nYou can get all the dependencies using the following links in your master HTML page. \u003ca href=\"http://www.jsdelivr.com/\"\u003ejsDelivr\u003c/a\u003e provides almost everything you need to import.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css\" /\u003e\n\n\u003cscript src=\"//cdn.jsdelivr.net/npm/angular@1.6.4/angular.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.jsdelivr.net/npm/angular-route@1.6.4/angular-route.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.jsdelivr.net/npm/angular-animate@1.6.4/angular-animate.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.jsdelivr.net/combine/npm/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap.min.js,npm/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap-tpls.min.js,npm/moment@2.18.1\"\u003e\u003c/script\u003e\n```          \nThen you will need to either grab your own copy of Tubular or you use jsDelivr to reference Tubular CSS and JS files.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/tubular@latest/dist/tubular-bundle.min.css\" /\u003e\n\u003cscript src=\"//cdn.jsdelivr.net/npm/tubular@1.8.1\"\u003e\u003c/script\u003e\n```\n\nFinally include Tubular to your module as follows:\n\n```javascript\nangular.module('app', ['tubular']);\n```\n## npm Installation [![npm version](https://badge.fury.io/js/tubular.svg)](http://badge.fury.io/js/tubular)\n\n\u003cpre\u003e\n# install Tubular package and add it to package.json\n$ npm install tubular --save\n\u003c/pre\u003e\n\n## Samples\n\nYou can check out the \u003ca href=\"http://unosquare.github.io/tubular\" target=\"_blank\"\u003eTubular GitHub Page\u003c/a\u003e to get a few examples. We still need to work on more samples and better documentation, but we feel what we have now will get you up to speed very quickly :).\n\nThe following HTML represents a basic grid. You don't need to add anything else to your controller! Everything you need is to create your markup.\n\n```html\n \u003cdiv class=\"container\"\u003e\n        \u003ctb-grid server-url=\"/data/customers.json\" page-size=\"20\" \n                 class=\"row\" grid-name=\"mygrid\"\u003e\n            \u003cdiv class=\"col-md-12\"\u003e\n                \u003cdiv class=\"panel panel-default panel-rounded\"\u003e\n                    \u003ctb-grid-table class=\"table-bordered\"\u003e\n                        \u003ctb-column-definitions\u003e\n                            \u003ctb-column name=\"CustomerName\"\u003e\n                                \u003ctb-column-header\u003e\n                                    \u003cspan\u003e{{label}}\u003c/span\u003e\n                                \u003c/tb-column-header\u003e\n                            \u003c/tb-column\u003e\n                            \u003ctb-column name=\"Invoices\"\u003e\n                                \u003ctb-column-header\u003e\n                                    \u003cspan\u003e{{label}}\u003c/span\u003e\n                                \u003c/tb-column-header\u003e\n                            \u003c/tb-column\u003e\n                        \u003c/tb-column-definitions\u003e\n                        \u003ctb-row-set\u003e\n                            \u003ctb-row-template ng-repeat=\"row in $component.rows\" \n                                             row-model=\"row\"\u003e\n                                \u003ctb-cell-template\u003e\n                                    {{row.CustomerName}}\n                                \u003c/tb-cell-template\u003e\n                                \u003ctb-cell-template\u003e\n                                    {{row.Invoices}}\n                                \u003c/tb-cell-template\u003e\n                            \u003c/tb-row-template\u003e\n                        \u003c/tb-row-set\u003e\n                    \u003c/tb-grid-table\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/tb-grid\u003e\n    \u003c/div\u003e\n```\n\n### Run Sample\n\nThere is a sample included in this project, you can run it just by doing the following.\n\n```\n// Install all the dependencies\nnpm install\n// Builds the project and generates the bundles\ngrunt build\n// Runs the sample project\nnpm run serve \n```\n\n## Related Projects\n\nName | Type | Language/tech | Description\n-----|------|---------------|--------------\n| [Tubular for AngularJS (formerly Tubular)](https://github.com/unosquare/tubular) | Library | AngularJs | Tubular provides a set of directives and services using AngularJS as framework. |\n| [Tubular for Angular6 (formerly Tubular2)](https://github.com/unosquare/tubular2) | Library | Angular6 | New Tubular2 with Angular6 (Angular2) and Angular Material 2.\n| [Tubular React](https://github.com/unosquare/tubular-react) | Library | React | Tubular-React is a DataGrid component using Material-UI |\n| [Tubular Common](https://github.com/unosquare/tubular-common) | Library | Javascript/Typescript | Tubular Common provides TypeScript and Javascript models and data transformer to use any Tubular DataGrid component with an array of Javascript objects. |\n| [Tubular Dotnet](https://github.com/unosquare/tubular-dotnet) | Backend library | C#/.NET Core | Tubular provides .NET Framework and .NET Core Library to create REST service to use with Tubular Angular Components easily with any WebApi library (ASP.NET Web API for example). |\n| [Tubular Nodejs](https://github.com/unosquare/tubular-nodejs) | Backend Library | Javascript | Tubular Node.js provides an easy way to integrate Tubular Angular Components easily with any Node.js WebApi library. |\n| [Tubular Boilerplate C#](https://github.com/unosquare/tubular-boilerplate-csharp) | Boilerplate | C# | Tubular Directives Boilerplate (includes AngularJS and Bootstrap) |\n| [Tubular Boilerplate](https://github.com/unosquare/tubular-boilerplate) | Boilerplate | Javascript/AngularJS | Tubular Directives Boilerplate (includes AngularJS and Bootstrap). |\n| [Tubular ASP.NET Core 2.0 Boilerplate](https://github.com/unosquare/tubular-aspnet-core-boilerplate) | Boilerplate | C#/.NET Core | Tubular Directives Boilerplate (includes AngularJS and Bootstrap). |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funosquare%2Ftubular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funosquare%2Ftubular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funosquare%2Ftubular/lists"}