VKGrid

Material grid with multiple column navigation and pagination support.

Installation

npm i @vivekchaudhari/vkgrid

Usage

Import

In your application module file:

import { VkgridModule } from  '@vivekchaudhari/vkgrid';

Data Structure

Get Data

const data: VRowElement[]  = [
{ rowId:  1, parentRowId:  0, rootCol:  'A1', childCol1:  '', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  2, parentRowId:  1, rootCol:  '', childCol1:  'B1', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  3, parentRowId:  2, rootCol:  '', childCol1:  '', childCol2:  'C1', childCol3:  '', childCol4:  '' },
{ rowId:  4, parentRowId:  2, rootCol:  '', childCol1:  '', childCol2:  'C2', childCol3:  '', childCol4:  '' },
{ rowId:  5, parentRowId:  4, rootCol:  '', childCol1:  '', childCol2:  '', childCol3:  'D1', childCol4:  '' },
{ rowId:  6, parentRowId:  1, rootCol:  '', childCol1:  'B2', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  7, parentRowId:  6, rootCol:  '', childCol1:  '', childCol2:  'C3', childCol3:  '', childCol4:  '' },
{ rowId:  8, parentRowId:  7, rootCol:  '', childCol1:  '', childCol2:  '', childCol3:  'D2', childCol4:  '' },
{ rowId:  9, parentRowId:  8, rootCol:  '', childCol1:  '', childCol2:  '', childCol3:  '', childCol4:  'E1' },
{ rowId:  10, parentRowId:  7, rootCol:  '', childCol1:  '', childCol2:  '', childCol3:  'D3', childCol4:  '' },
{ rowId:  11, parentRowId:  0, rootCol:  'A2', childCol1:  '', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  12, parentRowId:  11, rootCol:  '', childCol1:  'B2', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  13, parentRowId:  11, rootCol:  '', childCol1:  'B3', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  14, parentRowId:  13, rootCol:  '', childCol1:  '', childCol2:  'C4', childCol3:  '', childCol4:  '' },
{ rowId:  15, parentRowId:  11, rootCol:  '', childCol1:  'B4', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  16, parentRowId:  15, rootCol:  '', childCol1:  '', childCol2:  'C5', childCol3:  '', childCol4:  '' },
{ rowId:  17, parentRowId:  15, rootCol:  '', childCol1:  '', childCol2:  'C6', childCol3:  '', childCol4:  '' },
{ rowId:  18, parentRowId:  17, rootCol:  '', childCol1:  '', childCol2:  '', childCol3:  'D4', childCol4:  '' },
{ rowId:  19, parentRowId:  11, rootCol:  '', childCol1:  'B5', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  20, parentRowId:  19, rootCol:  '', childCol1:  '', childCol2:  'C7', childCol3:  '', childCol4:  '' },
{ rowId:  21, parentRowId:  20, rootCol:  '', childCol1:  '', childCol2:  '', childCol3:  'D5', childCol4:  '' },
{ rowId:  22, parentRowId:  0, rootCol:  'A3', childCol1:  '', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  23, parentRowId:  22, rootCol:  '', childCol1:  'B6', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  24, parentRowId:  0, rootCol:  'A4', childCol1:  '', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  25, parentRowId:  0, rootCol:  'A5', childCol1:  '', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  26, parentRowId:  25, rootCol:  '', childCol1:  'B7', childCol2:  '', childCol3:  '', childCol4:  '' },
{ rowId:  27, parentRowId:  26, rootCol:  '', childCol1:  '', childCol2:  'C8', childCol3:  '', childCol4:  '' },
];

rootCol, childCol1, childCol2, childCol3, and childCol4 would be any of your keys. e.g. Car name, Model, Make, Features, etc. This is for example purpose only. Required fields is shown under dataSource properties

Import Required Types

import {
    PageRequest,
    PageResponse,
    VRowElement,
} from  '@vivekchaudhari/vkgrid';

Set Component HTML

<vkgrid  #vkgrid
    [dataSource]="dataSource"
    [columnsToDisplay]="columnsToDisplay"
    [expand_icon_html]="expand_icon_html"
    [collapse_icon_html]="collapse_icon_html"
    [saveExpandState]="saveExpandState"
    [showExpanCollapseIcons]="true"
    [showPaginator]="true"
    [paginationBarOnLeft]="paginationBarOnLeft"
    [pageSizes]="pageSizes"
    [pageSize]="pageSize"
    [totalPageCount]="totalPageCount"
    (OnPageEvent)="onPageChangeEvent($event)">
</vkgrid>

Set Component Variables

Declare below variables under your component class

dataSource:  VRowElement[];
columnsToDisplay:  string[];
expand_icon_html:  string;
collapse_icon_html:  string;
saveExpandState:  boolean;
paginationBarOnLeft:  boolean;
pageSizes:  number[];
pageSize:  number  =  1;
pageIndex:  number  =  0;
totalPageCount:  number;
sorted_data:  any[];

Initialize variables under constructor or ngOnInit:

// From HTTP requests:
// let response:  PageResponse  =  this.yourService.getPageData({
// pageIndex:  this.pageIndex,
// pageSize:  this.pageSize,
// });
// this.dataSource  = response.data;
// this.totalPageCount  = response.totalSize;

// From Local data:
this.dataSource = data;
this.totalPageCount  = 5;
this.columnsToDisplay  = [ 'rootCol', 'childCol1', 'childCol2', 'childCol3', 'childCol4' ];
this.expand_icon_html  =  '<i class="fa-solid fa-caret-right"></i>';
this.collapse_icon_html  =  '<i class="fa-solid fa-caret-down"></i>';
this.saveExpandState  =  true;
this.paginationBarOnLeft  =  true;
this.pageSizes  = [1, 2, 3];

Subscribe to Page event

onPageChangeEvent(event:  PageRequest) {
    let response:  PageResponse  =  this.paginationService.getPageData(event);
    this.dataSource  = response.data;
}

Now Ready To Go

npm run

Grid Configuration

*required properties

?optional properties

#internal properties -> setting this property does not take any effect.

DataSource Properties

row type: VRowElement

| Field | Type | Default value | Description | | ------------ | ------- | ------------- | ---------------------- | | rowId* | number | undefined | unique row identifier | | prentRowId* | number | undefined | foreign key to row id | | hasChild? | boolean | false | if row has child rows? | | visible# | boolean | false | internal property | | isExpanded# | boolean | false | internal property | | level# | boolean | false | internal property |

Control Properties

| Field | Type | Default value | Description | | ---------------------- | ------------- | ------------- | ----------------------------------------------------------------------- | | dataSource | VRowElement[] | [] | input data to grid | | columnsToDisplay | string[] | [] | columns to display in grid | | expand_icon_html | string | '+' | expan icon for row, specify any html tag (e.g. font awesome) or text | | collapse_icon_html | string | '-' | collapse icon for row, specify any html tag (e.g. font awesome) or text | | paginationBarOnLeft | boolean | false | adjust position of paginator | | pageSizes | number[] | [1,2,3] | paginator page size options | | pageSize | number | 1 | paginator current page size | | pageIndex | number | 0 | current page index | | totalPageCount | number | 0 | total pages in paginator | | showExpanCollapseIcons | boolean | false | show/hide Expand All/Collapse All buttons | | showPaginator | boolean | false | show/hide paginator | | saveExpandState | boolean | false | save expanded state between pages. (Experimental feature) |

Events

| Event Name | Arguments | Description | | ----------- | ------------------- | ---------------------------------------------------- | | OnPageEvent | $event: PageRequest | to catch paginator's click events and load page data |

License

This project is under MIT license.