@nilavpatel/np-data-grid v1.0.2

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