{"id":32239031,"url":"https://github.com/angular-libs/ui-grid","last_synced_at":"2026-02-26T15:39:40.449Z","repository":{"id":35240921,"uuid":"39500461","full_name":"angular-libs/ui-grid","owner":"angular-libs","description":"simple ui grid in AngularJS","archived":false,"fork":false,"pushed_at":"2020-05-28T22:44:05.000Z","size":630,"stargazers_count":1,"open_issues_count":19,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-01-23T09:57:36.044Z","etag":null,"topics":["bower","ui-grid"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-libs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-22T10:38:04.000Z","updated_at":"2020-06-03T17:35:25.000Z","dependencies_parsed_at":"2022-08-31T00:01:04.435Z","dependency_job_id":null,"html_url":"https://github.com/angular-libs/ui-grid","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/angular-libs/ui-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-libs%2Fui-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-libs%2Fui-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-libs%2Fui-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-libs%2Fui-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-libs","download_url":"https://codeload.github.com/angular-libs/ui-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-libs%2Fui-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29863621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T08:51:08.701Z","status":"ssl_error","status_checked_at":"2026-02-26T08:50:19.607Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bower","ui-grid"],"created_at":"2025-10-22T14:34:02.490Z","updated_at":"2026-02-26T15:39:40.444Z","avatar_url":"https://github.com/angular-libs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui-grid\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/angular-libs/ui-grid.svg)](https://greenkeeper.io/)\n[![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)\n[![Build Status](https://travis-ci.org/angular-libs/ui-grid.svg?branch=master)](https://travis-ci.org/angular-libs/ui-grid)\n[![Dependency Status](https://gemnasium.com/angular-libs/ui-grid.svg)](https://gemnasium.com/angular-libs/ui-grid)\n[![codecov.io](https://codecov.io/github/angular-libs/ui-grid/coverage.svg?branch=master)](https://codecov.io/github/angular-libs/ui-grid?branch=master)\n\u003ca href=\"https://codeclimate.com/github/angular-libs/ui-grid\"\u003e\u003cimg src=\"https://codeclimate.com/github/angular-libs/ui-grid/badges/gpa.svg\" /\u003e\u003c/a\u003e\n[![Coverage Status](https://coveralls.io/repos/angular-libs/ui-grid/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/angular-libs/ui-grid?branch=master)\n[![Bower version](https://badge.fury.io/bo/ng-ui-grid.svg)](https://badge.fury.io/bo/ng-ui-grid)\n[![Build status](https://ci.appveyor.com/api/projects/status/vr1h5g5r5wmccrf9/branch/master?svg=true)](https://ci.appveyor.com/project/angular-libs/ui-grid/branch/master)\n[![Issue Stats](http://issuestats.com/github/angular-libs/ui-grid/badge/pr)](http://issuestats.com/github/angular-libs/ui-grid)\n[![Issue Stats](http://issuestats.com/github/angular-libs/ui-grid/badge/issue)](http://issuestats.com/github/angular-libs/ui-grid)\n[![Codacy Badge](https://api.codacy.com/project/badge/grade/c81ed311241d4e8894996858451ef0a4)](https://www.codacy.com/app/kuldeepkeshwar/ui-grid)\n[![ReviewNinja](https://app.review.ninja/39500461/badge)](https://app.review.ninja/angular-libs/ui-grid)\n![codecov.io](https://codecov.io/github/angular-libs/ui-grid/branch.svg?branch=master)\n[![SensioLabsInsight](https://insight.sensiolabs.com/projects/33b672a9-d02a-469d-9242-e083482de9db/big.png)](https://insight.sensiolabs.com/projects/33b672a9-d02a-469d-9242-e083482de9db)\n## ui-grid can be used to create grid with basic functionality like (sort,filter,pagination)\n\n#Installing\n#### Bower\n```javascript\n    bower install ng-ui-grid\n    \u003cscript src=\"bower_components/ng-ui-grid/dist/scripts/ui-grid.js\"\u003e\u003c/script\u003e\n```\n#### CDN\n\n##### You can use rawgit.com's cdn url to access the files in the Bower repository. These files are hosted by MaxCDN. Just alter the version as you need.\n\n* https://rawgit.com/angular-libs/ui-grid/master/dist/scripts/ui-grid.js\n* https://rawgit.com/angular-libs/ui-grid/master/dist/scripts/ui-grid.min.js\n\n## Directives :\n* **ui-grid** : the core directive for the ui-grid which accept an configuration object.\n\n| Property     | type    | Description |\n| :--------|:---------|:-------|\n| src  | `string`/`object`   | collection of items, can be array or Url or promise  |\n| remote | `boolean`(default: false) |  mark true to enable remote paging |\n| manualFilter | `boolean`(default: false) |  mark true to enable to trigger filtering of the records manually |\n| listeners | `object` | callback functions\n    1). beforeLoadingData : called before loading the records.\n    2). afterLoadingData : called after loading the records\n|           |         |            |\n|:--------|:---------|:-------|\n| pager | `object` | paging configuation object e.g  \n```javascript\nvar pager={\n        count:20 \n    }\n```\n\n|           |         |            |\n|:--------|:---------|:-------|\n| filters | `array` | array of filter object e.g  \n```javascript\nvar filters=[{   \n        key:'last_name',\n        value:'smith',\n        filterfn:function(){...}\n    },{   \n        key:'city',\n        value:'la',\n        filterfn:function(){...}\n    }]\n```\n* **ui-grid-filter** : used to apply filters\n\n|  Type    | Description |\n| :---------:|:-------:|\n| `string`/`object`| can be name of the proptery or filter object with filter function e.g | \n\n```javascript\n    var filter={   \n        key:'last_name',\n        filterfn:function(){...}\n    }\n```\n* **ui-grid-sort** : used to apply sort\n\n|  Type    | Description |\n| :---------:|:-------:|\n| `string`/`object`| can be name of the proptery or sorter object with sort function e.g\n```javascript\n    var sorter={   \n        key:'last_name',\n        sortfn:function(){...}\n    }\n```\n\n\n* **ui-grid-repeat** : responsible for rendering the grid row \n## Usage :\n  \n### **ui-grid** :\n#### HTML\n```html\n\u003ctable ui-grid=\"gridOptions\"\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003eFirst Name\u003c/th\u003e\n\t\t\t\t\u003cth\u003eLast Name\u003c/th\u003e\n\t\t\t\t\u003cth\u003eAge\u003c/th\u003e\n\t\t\t\t\u003cth\u003eCity\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\t\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr ui-grid-repeat var=\"item\"\u003e\n\t\t\t\t\u003ctd\u003e{{item.first_name}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.last_name}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.age}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.city}}\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\n\t\t\u003c/tbody\u003e\n\u003c/table\u003e\n```\n##### CODE\n```javascript\nangular.module('myApp',['ui.grid']);\nangular.module('myApp').controller(\"myCtrl\",function($scope){\n    var master_list=[];\n\tfor(var k=1;k\u003c=5000;k++){\n\t\tmaster_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})\n\t}\n\t$scope.gridOptions={\n\t\tsrc:master_list\t\t\t\n\t}\n});\n```\n\n  \n### **ui-grid-sort** : accepts property name e.g 'last_name' or Object which has property name and sort function.\n#### HTML\n```html\n\u003ctable ui-grid=\"gridOptions\"\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\tth ui-grid-sort='sort1'\u003eFirst Name\u003c/th\u003e\n\t\t\t\t\u003cth ui-grid-sort='last_name'\u003eLast Name\u003c/th\u003e\n\t\t\t\t\u003cth ui-grid-sort='age'\u003eAge\u003c/th\u003e\n\t\t\t\t\u003cth ui-grid-sort='city'\u003eCity\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\t\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr ui-grid-repeat var=\"item\"\u003e\n\t\t\t\t\u003ctd\u003e{{item.first_name}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.last_name}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.age}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.city}}\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\n\t\t\u003c/tbody\u003e\n\u003c/table\u003e\n```\n#### CODE\n```javascript\nangular.module('myApp',['ui.grid']);\nangular.module('myApp').controller(\"myCtrl\",function($scope){\n    var master_list=[];\n\tfor(var k=1;k\u003c=5000;k++){\n\t\tmaster_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})\n\t}\n\t$scope.gridOptions={\n\t\tsrc:master_list\t\t\t\n\t}\n\t$scope.sort1={\n\t\tkey:'first_name',\n\t\tsortFn:function(array,sorter,order){\n\t\t\tarray.sort();\n\t\t}\n\t}\n});\n```\n### **ui-grid-filter** : accepts property name e.g 'first_name' or Object which has property name and filter function.\n#### HTML\n```html\n\u003ctable ui-grid=\"gridOptions\"\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\tth ui-grid-sort='sort1'\u003eFirst Name\u003c/th\u003e\n\t\t\t\t\u003cth ui-grid-sort='last_name'\u003eLast Name\u003c/th\u003e\n\t\t\t\t\u003cth ui-grid-sort='age'\u003eAge\u003c/th\u003e\n\t\t\t\t\u003cth ui-grid-sort='city'\u003eCity\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\t\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd \u003e\u003cinput type=\"text\"  ng-model=\"filter.first_name\" ui-grid-filter='first_name'\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd \u003e\u003cinput type=\"text\"  ng-model=\"filter.last_name\" ui-grid-filter='filter1'\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd \u003e\u003cinput type=\"text\"  ng-model=\"filter.age\" ui-grid-filter='age'\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd \u003e\u003cinput type=\"text\"  ng-model=\"filter.city\" ui-grid-filter='city'\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr ui-grid-repeat var=\"item\"\u003e\n\t\t\t\t\u003ctd\u003e{{item.first_name}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.last_name}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.age}}\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e{{item.city}}\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\t\t\t\n\t\t\u003c/tbody\u003e\n\u003c/table\u003e\n```\n#### CODE\n```javascript\nangular.module('myApp',['ui.grid']);\nangular.module('myApp').controller(\"myCtrl\",function($scope){\n    var master_list=[];\n\tfor(var k=1;k\u003c=5000;k++){\n\t\tmaster_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})\n\t}\n\t$scope.gridOptions={\n\t\tsrc:master_list\t\t\t\n\t}\n\t$scope.sort1={\n\t\tkey:'first_name',\n\t\tsortFn:function(array,sorter,order){\n\t\t\tarray.sort();\n\t\t}\n\t}\n\t$scope.filter1={\n\t\tkey:'last_name',\n\t\tfilterFn:function(array,filter,value){\n\t\t\tfor(var i = array.length - 1; i \u003e= 0; i--) {\n\t\t\t    if(value \u0026\u0026 array[i][filter.key]!=value){\n\t\t       \t\tarray.splice(i, 1);\n\t\t \t\t}\n\t\t\t}\n\t\t}\n\t}\n});\n```\n\n[![Analytics](https://ga-beacon.appspot.com/UA-71806888-2/ui-grid/)](https://github.com/angular-libs/ui-grid)\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/angular-libs/ui-grid/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/angular-libs/ui-grid/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-libs%2Fui-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-libs%2Fui-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-libs%2Fui-grid/lists"}