np-grid
Angular Version ~8.0.0 lodash Version 4.17.11 or newer
npm i @nilavpatel/np-data-grid
features
1. max row handling limit upto 10,00,000
2. client side paging
3. client side filtering
4. client side sorting
5. row selection
6. master-child row details section
How to add grid component in to page
<np-data-grid
[columns]="gridColumns"
[dataSource]="gridDataSource"
[pageSize]="10"
[sortingEnable]=true
[multiColumnSortEnable]= true
[filterEnable]=true
[height]="700"
[width]="1000"
[key]="'Id'"
[tableId] = "'emplyees-table'">
</np-data-grid>
Properties
1. [columns]
[
{ name: "Id", dataField: "Id", visible: true, width: 50, title: "Id" , type:"number", sortEnable: true, filterEnable: true},
{ name: "FirstName", dataField: "FirstName", visible: true, width: 150, title: "First Name" , type:"string", sortEnable: true , filterEnable: true},
...
]
1.1 type posible values string, number, boolean, date
1.2 dataField is name of the property from datasource array.
1.3 set sortEnable and filterEnable to on/off sorting and filtering on column basis (default off)
1.4 cellTemplate : type of TemplateRef<any>, pass template to grid column, row data will be bind as let-row="row".
1.5 cellClick Event : arguments click event, column which is clicked, row.
2. [dataSource]
datasource is an array of data.
3. [pageSize]
if not mentioned, grid will be rendered without paging,
client side paging only
4. [sortingEnable]
if set to true, then sorting will be available on all columns,
Only client side sorting available.
5. [multiColumnSortEnable]
if set to true then multiple columns can be sorted
Only client side sorting available.
6. [filterEnable]
if set true then filters available in header
filter types are also available:
6.1 for string dataField start with, end with and contains,
6.2 for number dataField greater then, less than and equals,
Only client side filtering available.
7. [height]
add number to set height of data grid in px (default height is auto)
8. [width]
add number to set width of data grid in px (default width is auto)
9. [key]
give primary column name to data grid
10. [tableId]
set html attribute id to component
11. [multiSelectEnable]=true OR [singleSelectEnable]=true
Will show checkboxes in first column to select single/multiple rows.
Api is also available to get selected rows.
12. [masterChildTemplate]="masterChildTemplate"
Pass TemplateRef<any> type object to above attribute to dispay master child grid.
if masterChildTemplate is passed then +, - icons will be displayed to open/close child view.
13. [isStickyHeader]=true
If true then header will stick on top when scroll grid vertically.
Methods
1. onRowClick
bind on row click event
Apis
1. getRowData(id : any)
returns row data for given key column
2. setPage(pageNumber: number)
set page given in argument as current page
3. getSelectedRows()
get selected rows
4. reset()
reset data grid (remove sorting, filtering, selection)
5. selectRowByKey(id: any)
select row by key value
6. deSelectRowByKey(id: any)
deselect row by key value
7. sortByColumnName(name: string, direction: string)
sort by column and direction
8. filterByColumnName(name: string, keyword: string)
filter by column name and keyword
9. removeAllSorting(id: any)
remove all sorting
10. removeAllFilters(id: any)
remove all filters
11. closeAllChilds()
close all child details sections
12. selectAllRows()
select all rows
13. deSelectAllRows()
deselect all rows
14. showLoader()
show loader icon into grid UI
15. hideLoader()
hide loader icon from grid UI
16. showColumn(idx: number)
show column by imdex value
17. hideColumn(idx: number)
hide column by index value
How to configure?
1. import NpDataGridModule in app.module.ts