Skip to content

ngFancy/ng-gridview

Repository files navigation

#ngGridView

An infinite grid view for angular 1.x

##Features:

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

##Usage

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++){
            this.dataList.push({
                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>
</div>

##Contributes

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.

About

An infinite grid view for angular 1.x

Resources

License

Stars

Watchers

Forks

Packages

No packages published