Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


An infinite grid view for angular 1.x


  • support super large data set with smooth scrolling performance
  • custom grid cell template
  • predictable cell dimension to speed up initial render time


Install from npm

npm install @ngfancy/ng-gridview --save

Add as an angular dependency.

import {ngGridView} from '@ngFancy/ng-gridview';
// angular should be available in GLOBAL
angular.module('myApp', [ngGridView])
    .controller('MainCtrl', () => {
        var $ctrl = this;
        var dataList = [];
        for(var i = 0; i < 200; i++){
                name: `dataIndex${i}`
        this.dataList = dataList;

If you are using webpack, require the ng-gridview.scss. or reference the css in your html

<link rel="stylesheet" href="node_modules/dist/ng-gridview.css">

define your template.

<div ng-controller="MainCtrl">
    <ng-gridview list="dataList" row-height="100" column-count="2"></ng-gridview>


It is welcomed to contributes to this project, before contributing, you should read the Design Spec to learn the goal and the theory of this project.

###Setup development environment

clone the repository, cd into the cloned directory and run npm install to install the dependencies. The building environment require a node version > 4 and npm version > 3. then run npm start to start the webpack-dev-server at localhost:3000

To build a distribution files, run npm run build. the build files will located in dist directory.