@vivekchaudhari/vkgrid NPM

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)