Overview

Render 10,000+ Records with high performance. The Grid component allows users to browse and edit tabular data.

  1. Render 10k + records with high performance
  2. Faster Rendering without browser hanging.
  3. Faster Sorting algorithm
  4. Faster filtering and search algorithm

Getting Started

To get started with using the data table component, follow the below steps. It’s easy to integrate and just a matter of minutes.

Installation

  • The data table package is published on npm
  • Install the package:
      npm install cuppa-ng2-grid 
    

Basic Usage

  • Import CuppaDataGridModule from the installed package into your module as follows:
import { CuppaDataGridModule } from 'cuppa-ng2-grid/cuppa-ng2-dataGrid';
  • Declare the data grid module in your ngModule as follows:
import { CuppaDataGridModule } from 'cuppa-ng2-grid/cuppa-ng2-dataGrid';
@NgModule({
  declarations: [AppComponent],
  imports: [
        BrowserModule,
        CuppaDataGridModule // Import DataGrid module variable here
  ],
  bootstrap: [ AppComponent ]
})
  • Place the component html tag in the template where the table needs to be rendered.
<cuppa-datagrid [datalist] = "arrayList" [config]="config"></cuppa-datagrid>
  • Component requires a config object to configure the grid and datalist to pass data to the component, as follows:

export class AppComponent implements OnInit {

      private config = {
        w: 300,
        h: 300,
        itemHeight: 31,
        totalRows: 10000,
        items: this.arrayList,
        sort:{'id':'desc'}
      }
      private arrayList:any[] =
            [
                {"id":1,"name":"Mayo","mobile":9240592804},
                {"id":2,"name":"Nelson","mobile":9008774782},
                {"id":3,"name":"Nichols","mobile":9965852134},
                {"id":4,"name":"Summers","mobile":9600712058},
                {"id":5,"name":"Novak","mobile":9045924098},
                {"id":6,"name":"Bell","mobile":9001240358},
                {"id":7,"name":"Marshall","mobile":9276107621},
                {"id":8,"name":"May","mobile":9966279627},
                {"id":9,"name":"Villanueva","mobile":9695365778},
                {"id":10,"name":"Gonzalez","mobile":9946879817},
                {"id":11,"name":"Dorsey","mobile":9243595415}
            ]
  }

Config Options

The following config options can be used

Setting Type Description
title String Set the title of the table
w Number Set the width of the table.
h Number Set the height of the table.
itemHeight Number Set the height of the row.
totalRows Number Total number of records.
items Array Array of table records.
sort Object Object to set the default column for sorting.

Column Template

Custom content or elements can be added to table columns.

  • <c-column> - Column component for the table.
  • Example:
    <cuppa-datagrid [datalist] = "arrayList" [config]="config">
          <c-column field="id"></c-column>
          <c-column field="name">
            <ng-template let-person="rowData">
                <span></span>
            </ng-template>
          </c-column>
          <c-column field="mobile"></c-column>
          <c-column>
            <ng-template let-person="rowData">
                <button class="btn btn-default btn-success" (click)="getRowData(person)">Get Row</button>
            </ng-template>
          </c-column>
      </cuppa-datagrid>

Heading Template

The table heading can be customised with the <c-heading> tag. The following example show how to use a font awesome icon with text in the title section. -Example:

        <cuppa-datagrid [datalist] = "arrayList" [config]="config">
          <c-heading>
            <ng-template> 
              <span class="fa fa-list"></span>
              <b>Heading Template</b>
            </ng-template>
          </c-heading>
      </cuppa-datagrid> 

Events

  • onRowSelect - Return the clicked row object.

    Example : (onRowSelect)=”onRowClick($event)”

Thats all Folks !! You are good to go.

Please raise any issues here

To run the code and build in your local, follw the below steps

  • git clone https://github.com/CuppaLabs/angular2-dataGrid.git
  • npm install
  • npm start
  • Go to http://localhost:3000 where your app will run.

Licence

This project is licensed under the MIT license. The MIT License (MIT) Copyright (c) 2016 Cuppa Labs

Pradeep Terli

Web UI Developer, Blogger, Thinker , Entrepreneur. Loves to explore technology with focus on web technologies.