Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

lb-grid

gabina710.0.5TypeScript support: included

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.

readme

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