LB Grid

This library was generated with Angular CLI version 8.2.14. This is a ngx-datatabe wrapper, with some future, such as multi-column filter, export to excel and more.

Installation

Run npm i lb-grid@latest.

Note: Don't forget to add @import "~lb-grid/assets/lb-grid.css"; to your style.css file.

Usage

Declare Columns of table

resultColumns: any = [

{ prop: 'name', name: 'Name', sortable: false, filtration: false  },
{ prop: 'bpType', name: 'Business Process Type' },
{ prop: 'stability', name: 'Stability', pipe: new TrueFalsePipe(),  width: 175 },

];

Simple

<lb-multifilter-grid
   [rows]="resultRows"
   [columns]="resultColumns"
   [exportable]="true" //allow export
   [scrollbarH]="true" // allow scrol
   [exportableFileName]="'Users'" //exported file name
   [selectionType]="'single'" //selection type
   [useColumnFiltration]="true" //add filter in all column
   [headerCheckboxable]="false" // allow header checkboxes
   (select)="onSelect($event)">
</lb-multifilter-grid>

Server Side Pageing

   [serverSidePagination]="true"
   [serverSideService]="customService"
   [totalRows]="1000"
   [size]="customService.pageSize"
   [pageSizes]="[10,25,50,100,500]"
   (sizeChanged)="service.onSizeChanged($event)"
   (select)="onSelect($event)"    

[serverSideService]="customService"

customService must have this method

public loadData(page, size) : Observable<any>

with returns data from server

Selection Type

[selectionType]="'single'" // multi | checkbox

this grid has 3 types of seletion, first is "single" when you can select one row only

second type is multi which allow multi row selection with ctrl + mouse click

and last is checkbox, it allows you to have checkbox in all rows and select what u want

##Export to Excel

[exportable]="true"
[exportableFileName]="'Your file name hare'"// for ex: CustomerList

this property allow you to export data to excel and set it a name

##Column Filtration

[useColumnFiltration]="true"

at this time all columns have input on header and it can be filtereble as like