Skip to content
Go to file

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.

You can’t perform that action at this time.