From 95159f00e6ab3d2a83e190603a5f7153a8159fc8 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 13:40:51 +0530
Subject: [PATCH 01/13] chore: Add favicon

---
 favicon.ico | Bin 0 -> 101207 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 favicon.ico

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..cf71ad09d54be4ad77c83a972e051fad93fbd077
GIT binary patch
literal 101207
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

literal 0
HcmV?d00001


From b7f3939fd0d2e055aaa46e95742415c2e47af173 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 13:41:51 +0530
Subject: [PATCH 02/13] feat(example): Add 10x data rows.

---
 example/src/components/demo-home/demo-home.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/example/src/components/demo-home/demo-home.ts b/example/src/components/demo-home/demo-home.ts
index 278c98b..e8d2b1d 100644
--- a/example/src/components/demo-home/demo-home.ts
+++ b/example/src/components/demo-home/demo-home.ts
@@ -3,7 +3,7 @@ import { IGridColumn } from '../../../../src/interface';
 import { GridConfig, GridEvents } from '../../../../src/model';
 
 class DemoHome {
-    usersList: any;
+    usersList: any[] = [];
 
     constructor() {
         const gsGridRef = gsGrid;
@@ -54,8 +54,14 @@ class DemoHome {
     async setupGridAndApplyData() {
         const gridConfig = new GridConfig();
         gridConfig.columnDefs = this.buildGridColumns();
+        gridConfig.rowHeight = 31;
+
+        const usersList = await this.getUsers();
+
+        for (let i = 0; i<=10; i ++) {
+            this.usersList = this.usersList.concat([... usersList]);
+        }
 
-        this.usersList = await this.getUsers();
         gridConfig.data = this.usersList;
         const gridEl = document.querySelector('gs-grid');
         if (gridEl) {

From 2f2db7bdf56ffc90a1c65cd098239ee8d1de0a26 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 13:42:33 +0530
Subject: [PATCH 03/13] feat(grid): Add row height option in configuration.

---
 src/interface/grid-config.ts |  7 ++++++-
 src/model/grid-config.ts     | 10 ++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/interface/grid-config.ts b/src/interface/grid-config.ts
index 4daacfe..cd6dcae 100644
--- a/src/interface/grid-config.ts
+++ b/src/interface/grid-config.ts
@@ -11,10 +11,15 @@ export interface IGridConfig {
     columnDefs: IGridColumn[];
 
     /**
-     * Instance  of grid config
+     * Instance of grid config
      */
     instance: IGridInstance;
 
+    /**
+     * Row height of grid config.
+     */
+    rowHeight: number;
+
     /**
      * Determines whether instance ready is
      * @returns true if instance ready 
diff --git a/src/model/grid-config.ts b/src/model/grid-config.ts
index 0586f2d..39cc287 100644
--- a/src/model/grid-config.ts
+++ b/src/model/grid-config.ts
@@ -4,7 +4,7 @@ import {Observable, Subject, BehaviorSubject} from 'rxjs';
 /**
  * Grid configuration class.
  */
-export class GridConfig implements IGridConfig {
+export class GridConfig<T> implements IGridConfig {
     /**
      * Is grid instance ready.
      */
@@ -20,6 +20,11 @@ export class GridConfig implements IGridConfig {
      */
     columnDefs: IGridColumn[];
 
+    /**
+     * Row height of grid config.
+     */
+    rowHeight: number;
+
     /**
      * Instance  of grid config
      */
@@ -28,13 +33,14 @@ export class GridConfig implements IGridConfig {
     /**
      * Data of grid config
      */
-    data?: any[];
+    data?: T[];
 
     /**
      * Creates an instance of grid config.
      */
     constructor(){
         this.renderCompleteSubscription = new BehaviorSubject(false);
+        this.rowHeight = 40;
     }
 
     /**

From b54e6bf4c6cae3f5b9bb8c167525206316d1827a Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 13:43:08 +0530
Subject: [PATCH 04/13] feat(grid): Add grid config into renderers.

---
 src/gs-grid.ts                     |  4 ++--
 src/renderers/data-row.renderer.ts |  8 +++++---
 src/renderers/header.renderer.ts   | 10 +++++-----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/gs-grid.ts b/src/gs-grid.ts
index 6929e47..ed406ab 100644
--- a/src/gs-grid.ts
+++ b/src/gs-grid.ts
@@ -145,10 +145,10 @@ export class GsGrid extends HTMLElement {
         });
 
         // Register header renderer.
-        this.headerRenderer = new FlexHeaderRenderer(rendererDataSet, this.cellUtils);
+        this.headerRenderer = new FlexHeaderRenderer(rendererDataSet, this.cellUtils, this.gridConfig);
 
         // Register data row renderer.
-        this.dataRowRenderer = new FlexDataRowRenderer(rendererDataSet, this.cellUtils);
+        this.dataRowRenderer = new FlexDataRowRenderer(rendererDataSet, this.cellUtils, this.gridConfig);
 
         // Register viewport scroll renderer.
         this.scrollRenderer = new ScrollRenderer();
diff --git a/src/renderers/data-row.renderer.ts b/src/renderers/data-row.renderer.ts
index 4c2ce3e..874cfba 100644
--- a/src/renderers/data-row.renderer.ts
+++ b/src/renderers/data-row.renderer.ts
@@ -1,5 +1,5 @@
 import { CellUtilities } from "../core";
-import { IGridRenderColumn, IGridRenderer } from "../interface";
+import { IGridConfig, IGridRenderColumn, IGridRenderer } from "../interface";
 
 /**
  * Flex data row renderer.
@@ -18,8 +18,10 @@ export class FlexDataRowRenderer implements IGridRenderer {
     /**
      * Creates an instance of flex column renderer.
      * @param columns grid columns.
+     * @param cellUtils cell utilities.
+     * @param gridConfig grid config.
      */
-    constructor(columns: IGridRenderColumn[], cellUtils: CellUtilities) {
+    constructor(columns: IGridRenderColumn[], cellUtils: CellUtilities, private gridConfig: IGridConfig) {
         this._renderCols = columns;
         this._cellUtils = cellUtils;
     }
@@ -61,7 +63,7 @@ export class FlexDataRowRenderer implements IGridRenderer {
     private cellTemplateFragmentFn(field: string, data: any): string {
         const cellUtils = this._cellUtils.getCellUtilsByFieldName(field);
         const cellValue = this.getCellValue(field, data);
-        return `<div title="${cellValue}" class="cell-column" style="width: ${cellUtils.renderWidth}"><div class="cell-content">${cellValue}</div></div>`;
+        return `<div title="${cellValue}" class="cell-column" style="width: ${cellUtils.renderWidth}; height: ${this.gridConfig.rowHeight}px"><div class="cell-content">${cellValue}</div></div>`;
     }
 
     /**
diff --git a/src/renderers/header.renderer.ts b/src/renderers/header.renderer.ts
index fb6f000..5a18760 100644
--- a/src/renderers/header.renderer.ts
+++ b/src/renderers/header.renderer.ts
@@ -1,5 +1,5 @@
 import { CellUtilities } from "../core";
-import { ICellConfig, IGridRenderColumn, IGridRenderer } from "../interface";
+import { ICellConfig, IGridConfig, IGridRenderColumn, IGridRenderer } from "../interface";
 
 /**
  * Flex header renderer.
@@ -17,10 +17,10 @@ export class FlexHeaderRenderer implements IGridRenderer {
 
     /**
      * Creates an instance of flex header renderer.
-     * @param columns 
-     * @param cellUtils 
+     * @param columns grid columns.
+     * @param cellUtils cell utilities.
      */
-    constructor(columns: IGridRenderColumn[], cellUtils: CellUtilities) {
+    constructor(columns: IGridRenderColumn[], cellUtils: CellUtilities, private gridConfig: IGridConfig) {
         this._renderCols = columns;
         this._cellUtils = cellUtils;
     }
@@ -55,7 +55,7 @@ export class FlexHeaderRenderer implements IGridRenderer {
      */
     private cellTemplateFragmentFn(cellValue: string, field: string): string {
         const cellUtil = this._cellUtils.getCellUtilsByFieldName(field);
-        return `<div title="${cellValue}" style="width: ${cellUtil.renderWidth}" class="header-column" data-field="${field}"><div class="cell-content">${cellValue}</div></div>`;
+        return `<div title="${cellValue}" style="width: ${cellUtil.renderWidth}; height: ${this.gridConfig.rowHeight}px" class="header-column" data-field="${field}"><div class="cell-content">${cellValue}</div></div>`;
     }
 
     /**

From b50311a1ca2fd2e7ebd7324a6774efcdfc26d68d Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 13:43:44 +0530
Subject: [PATCH 05/13] feat(grid-style): Update grid styles.

---
 src/styles/gs-grid.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/gs-grid.scss b/src/styles/gs-grid.scss
index feabe23..49518e7 100644
--- a/src/styles/gs-grid.scss
+++ b/src/styles/gs-grid.scss
@@ -12,6 +12,7 @@
         display: flex;
         flex-direction: column;
         font-size: 14px;
+        justify-content: center;
 
         .cell-content {
             overflow: hidden;
@@ -47,6 +48,7 @@
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            justify-content: center;
 
             .cell-content {
                 overflow: hidden;

From 117f53c6386b878e8b9337d6ce72930cb31774c5 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 22:44:44 +0530
Subject: [PATCH 06/13] feat(grid-style): Update last data row style.

---
 src/styles/gs-grid.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/gs-grid.scss b/src/styles/gs-grid.scss
index 49518e7..91b6761 100644
--- a/src/styles/gs-grid.scss
+++ b/src/styles/gs-grid.scss
@@ -34,6 +34,8 @@
     display: inline-flex;
     flex-direction: column;
     position: relative;
+    border-bottom: 1px solid #d3d3d3;
+    overflow: hidden;
 
     .data-row {
         display: inline-flex;
@@ -42,6 +44,10 @@
         border-right: 1px solid #d3d3d3;
         border-left: 1px solid #d3d3d3;
 
+        &:last-child {
+            border-bottom: none;
+        }
+
         .cell-column {
             padding: 5px 10px;
             border-right: 1px solid #d3d3d3;

From 471e5e5789eae4559a6573d0b44012ded4bee954 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 22:45:38 +0530
Subject: [PATCH 07/13] feat(grid): Add scroll position model.

---
 src/interface/igrid-scroll-position.ts | 25 ++++++++++++++++
 src/interface/index.ts                 |  1 +
 src/model/grid-scroll-position.ts      | 40 ++++++++++++++++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 src/interface/igrid-scroll-position.ts
 create mode 100644 src/model/grid-scroll-position.ts

diff --git a/src/interface/igrid-scroll-position.ts b/src/interface/igrid-scroll-position.ts
new file mode 100644
index 0000000..f0453a8
--- /dev/null
+++ b/src/interface/igrid-scroll-position.ts
@@ -0,0 +1,25 @@
+/**
+ * grid scroll position interface.
+ */
+export interface IGridScrollPosition {
+    /**
+     * y minimum.
+     */
+    yMin: number;
+
+    /**
+     * y maximum.
+     */
+    yMax: number;
+
+    /**
+     * y position.
+     */
+    y: number;
+
+    /**
+     * get percentage of y position.
+     * @returns y percent.
+     */
+    getYPercent(): number;
+}
\ No newline at end of file
diff --git a/src/interface/index.ts b/src/interface/index.ts
index afe45e3..c6af51c 100644
--- a/src/interface/index.ts
+++ b/src/interface/index.ts
@@ -5,3 +5,4 @@ export { IGridRenderer } from './igrid-renderer'
 export { IGridRenderColumn } from './igrid-renderer-column';
 export { ICellConfig } from './icell-config';
 export { IGridEvents } from './grid-events';
+export { IGridScrollPosition } from './igrid-scroll-position';
diff --git a/src/model/grid-scroll-position.ts b/src/model/grid-scroll-position.ts
new file mode 100644
index 0000000..b92cd2e
--- /dev/null
+++ b/src/model/grid-scroll-position.ts
@@ -0,0 +1,40 @@
+import { IGridScrollPosition } from "../interface";
+
+/**
+ * Grid scroll position.
+ */
+export class GridScrollPosition implements IGridScrollPosition {
+
+    /**
+     * Creates an instance of grid scroll position.
+     * @param args init args.
+     */
+    constructor(yMin: number, y:number, yMax: number) {
+        this.yMin = yMin;
+        this.y = y;
+        this.yMax = yMax;
+    }
+
+    /**
+     * Y min of grid scroll position.
+     */
+    yMin: number;
+    /**
+     * Y max of grid scroll position.
+     */
+    yMax: number;
+
+    /**
+     * Y of grid scroll position.
+     */
+    y: number;
+
+    /**
+     * Gets y percent.
+     * @returns y percent.
+     */
+    getYPercent(): number {
+        return ((this.y - this.yMin) / (this.yMax - this.y)) * 100;
+    }
+
+}
\ No newline at end of file

From 455af4ff669b2aa382e895c6192abb42bb24843b Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 22:46:22 +0530
Subject: [PATCH 08/13] feat(grid): Add scroll move complete event.

---
 src/core/scroll.utilities.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/core/scroll.utilities.ts b/src/core/scroll.utilities.ts
index 252654d..4d2f4f4 100644
--- a/src/core/scroll.utilities.ts
+++ b/src/core/scroll.utilities.ts
@@ -1,3 +1,7 @@
+import { BehaviorSubject } from "rxjs";
+import { IGridScrollPosition } from "../interface";
+import { GridScrollPosition } from "../model/grid-scroll-position";
+
 /**
  * Scroll utilities.
  */
@@ -42,12 +46,18 @@ export class ScrollUtilities {
      */
     private dragCallback = (event: MouseEvent) => {this.drag(event)};
 
+    /**
+     * Scroll move complete publisher.
+     */
+    public scrollMoveComplete$: BehaviorSubject<IGridScrollPosition>;
+
     /**
      * Creates an instance of scroll utilities.
      */
     constructor(shadowRoot: ShadowRoot) {
         this.shadowRoot = shadowRoot;
         this.setScrollBounds();
+        this.scrollMoveComplete$ = new BehaviorSubject<IGridScrollPosition>(new GridScrollPosition(0, 0, 100));
     }
 
     /**
@@ -121,6 +131,8 @@ export class ScrollUtilities {
     dragEnd(event: MouseEvent): void {
         this.isScrollBarActivated = false;
         this.resetScrollVisibility();
+        const scrollBar = this.getGridScrollBar();
+        this.scrollMoveComplete$.next(new GridScrollPosition(this.yMin, scrollBar.getBoundingClientRect().y, this.yMax));
     }
 
     /**
@@ -165,6 +177,7 @@ export class ScrollUtilities {
 
         if (this.isPositionInBounds(nextPosition)) {
             scrollBar.style.top = nextPosition - this.yMin + 'px';
+            this.scrollMoveComplete$.next(new GridScrollPosition(this.yMin, nextPosition, this.yMax));
         }
     }
 

From 277216657200fd84e9ad70436793a1f4435f6ec9 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 22:47:00 +0530
Subject: [PATCH 09/13] feat(virtualize): Add virtualization core.

---
 src/core/virtualize.ts | 62 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/core/virtualize.ts b/src/core/virtualize.ts
index 74be8a3..7611adc 100644
--- a/src/core/virtualize.ts
+++ b/src/core/virtualize.ts
@@ -1,6 +1,66 @@
+import { IGridConfig, IGridScrollPosition } from "../interface";
+
 /**
  * Virtualize core.
  */
 export class Virtualize {
-    
+
+    /**
+     * Available grid height of virtualize.
+     */
+    private availableGridHeight: number;
+
+    /**
+     * Data set of virtualize.
+     */
+    private dataSet: any[];
+
+    /**
+     * Gets rows per index.
+     */
+    private get rowsPerIndex(): number {
+        return this.availableGridHeight / this.gridConfig.rowHeight;
+    }
+
+    /**
+     * Creates an instance of virtualize.
+     * @param gridConfig grid configuration.
+     * @param shadowRoot shadow root.
+     */
+    constructor(private gridConfig: IGridConfig, private shadowRoot: ShadowRoot) {
+        this.availableGridHeight = 200;
+        this.dataSet = [...this.gridConfig.data];
+        this.setGridHeight();
+    }
+
+    /**
+     * Callback on grid scroll position change.
+     * @param scrollYPos scroll position.
+     */
+    public OnGridScrollPositionChange(scrollYPos: IGridScrollPosition) {
+    }
+
+    /**
+     * Gets data set for index.
+     */
+    private getDataSetForIndex(scrollIndex: number) {
+        const index = scrollIndex * this.rowsPerIndex;
+        return this.dataSet.slice(index, index + this.rowsPerIndex);
+    }
+
+    /**
+     * Sets grid height using shadow root.
+     */
+    private setGridHeight() {
+        const viewport = this.getViewport();
+        viewport.style.height = `${this.availableGridHeight}px`;
+    }
+
+    /**
+     * Gets viewport element.
+     * @returns viewport element.
+     */
+    private getViewport(): HTMLElement {
+        return this.shadowRoot.querySelector('.data-viewport');
+    }
 }
\ No newline at end of file

From 684d2a5f0c9ce5555cd301a2ab52b18f2c1282f6 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sun, 1 Nov 2020 22:47:18 +0530
Subject: [PATCH 10/13] feat(grid): Add virtualization core in gs-grid.

---
 src/gs-grid.ts | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/gs-grid.ts b/src/gs-grid.ts
index ed406ab..e678812 100644
--- a/src/gs-grid.ts
+++ b/src/gs-grid.ts
@@ -1,5 +1,5 @@
-import { CellUtilities } from "./core";
-import { IGridConfig, IGridRenderer } from "./interface";
+import { CellUtilities, Virtualize } from "./core";
+import { IGridConfig, IGridRenderer, IGridScrollPosition } from "./interface";
 import { GridColumn } from "./model";
 import { FlexHeaderRenderer, FlexDataRowRenderer, ScrollRenderer } from "./renderers";
 import { ScrollUtilities } from './core';
@@ -48,6 +48,11 @@ export class GsGrid extends HTMLElement {
      */
     private cellUtils: CellUtilities;
 
+    /**
+     * Virtualization core of gs grid.
+     */
+    private virtualizationCore: Virtualize;
+
     /**
      * Creates an instance of gs-grid.
      */
@@ -55,6 +60,7 @@ export class GsGrid extends HTMLElement {
         super();
         this.instanceId = this.generateInstanceId();
         this.registerGridEventCallback();
+        this._currentScrollIndex = 0;
     }
 
     /**
@@ -129,15 +135,26 @@ export class GsGrid extends HTMLElement {
         this.initializeScrollBar();
 
         // Init smart scroll.
+        // TODO: move smart scroll reg to new method.
+        // TODO: Use Rxjs & remove timeout.
         var smartScroll = new ScrollUtilities(this.shadowRoot);
         setTimeout(() => {
             smartScroll.registerSmartScrollEvents();
         }, 2000);
+
+        // Init virtualization core.
+        // TODO: Use Rxjs & remove timeout.
+        setTimeout(() => {
+            this.initializeVirtualization();
+            smartScroll.scrollMoveComplete$.subscribe((scrollPosition: IGridScrollPosition) => {
+                this.virtualizationCore.OnGridScrollPositionChange(scrollPosition);
+            });
+        }, 500);
     }
 
     /**
      * Registers renderers of header & column of grid.
-     * @param gridConfig 
+     * @param gridConfig grid configuration.
      */
     registerRenderers(gridConfig: IGridConfig) {
         const rendererDataSet = gridConfig.columnDefs.map(x => {
@@ -174,7 +191,7 @@ export class GsGrid extends HTMLElement {
     private initializeScrollBar() {
         const viewport = this.shadowRoot.querySelector('.data-viewport');
         if (viewport) {
-            viewport.append(this.scrollRenderer.render());
+            viewport.prepend(this.scrollRenderer.render());
         }
     }
 
@@ -188,6 +205,13 @@ export class GsGrid extends HTMLElement {
         this.shadowRoot.appendChild(styleRoot);
     }
 
+    /**
+     * Initializes virtualization.
+     */
+    private initializeVirtualization() {
+        this.virtualizationCore = new Virtualize(this.gridConfig, this.shadowRoot);
+    }
+
     /**
      * Gets available width for grid.
      * @returns available width for grid, either itself or parent.

From 2e101eded1c898d15a7ce07a080c69febf2fdd05 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sat, 14 Nov 2020 21:59:42 +0530
Subject: [PATCH 11/13] feat(virtualize): Update grid renderers.

---
 src/gs-grid.ts                     |  4 +--
 src/interface/igrid-renderer.ts    |  5 +++
 src/model/grid-scroll-position.ts  |  3 +-
 src/renderers/data-row.renderer.ts | 54 +++++++++++++++++++++++-------
 src/renderers/header.renderer.ts   |  8 +++++
 src/renderers/scroll.renderer.ts   |  8 +++++
 6 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/gs-grid.ts b/src/gs-grid.ts
index e678812..af6a622 100644
--- a/src/gs-grid.ts
+++ b/src/gs-grid.ts
@@ -165,7 +165,7 @@ export class GsGrid extends HTMLElement {
         this.headerRenderer = new FlexHeaderRenderer(rendererDataSet, this.cellUtils, this.gridConfig);
 
         // Register data row renderer.
-        this.dataRowRenderer = new FlexDataRowRenderer(rendererDataSet, this.cellUtils, this.gridConfig);
+        this.dataRowRenderer = new FlexDataRowRenderer(rendererDataSet, this.cellUtils, this.gridConfig, this.shadowRoot);
 
         // Register viewport scroll renderer.
         this.scrollRenderer = new ScrollRenderer();
@@ -182,7 +182,7 @@ export class GsGrid extends HTMLElement {
      * Initializes viewport.
      */
     private initializeViewport() {
-        this.shadowRoot.append(this.dataRowRenderer.render({ data: this.gridConfig.data }));
+        this.dataRowRenderer.renderIntoViewport({data: this.gridConfig.data});
     }
 
     /**
diff --git a/src/interface/igrid-renderer.ts b/src/interface/igrid-renderer.ts
index af1a76a..208b57b 100644
--- a/src/interface/igrid-renderer.ts
+++ b/src/interface/igrid-renderer.ts
@@ -12,4 +12,9 @@ export interface IGridRenderer {
      * @returns boolean promise, true once complete.
      */
     queueRender(): Promise<HTMLElement>;
+
+    /**
+     * Render and insert into viewport.
+     */
+    renderIntoViewport(data?: any): void;
 }
\ No newline at end of file
diff --git a/src/model/grid-scroll-position.ts b/src/model/grid-scroll-position.ts
index b92cd2e..ab2fe59 100644
--- a/src/model/grid-scroll-position.ts
+++ b/src/model/grid-scroll-position.ts
@@ -34,7 +34,6 @@ export class GridScrollPosition implements IGridScrollPosition {
      * @returns y percent.
      */
     getYPercent(): number {
-        return ((this.y - this.yMin) / (this.yMax - this.y)) * 100;
+        return ((this.y - this.yMin) / (this.yMax - this.yMin)) * 100;
     }
-
 }
\ No newline at end of file
diff --git a/src/renderers/data-row.renderer.ts b/src/renderers/data-row.renderer.ts
index 874cfba..b5d67ca 100644
--- a/src/renderers/data-row.renderer.ts
+++ b/src/renderers/data-row.renderer.ts
@@ -5,25 +5,17 @@ import { IGridConfig, IGridRenderColumn, IGridRenderer } from "../interface";
  * Flex data row renderer.
  */
 export class FlexDataRowRenderer implements IGridRenderer {
-    /**
-     * Render cols of flex column renderer.
-     */
-    private _renderCols: IGridRenderColumn[];
-
-    /**
-     * Cell utils of flex header renderer.
-     */
-    private _cellUtils: CellUtilities;
-    
     /**
      * Creates an instance of flex column renderer.
      * @param columns grid columns.
      * @param cellUtils cell utilities.
      * @param gridConfig grid config.
      */
-    constructor(columns: IGridRenderColumn[], cellUtils: CellUtilities, private gridConfig: IGridConfig) {
-        this._renderCols = columns;
-        this._cellUtils = cellUtils;
+    constructor(private _renderCols: IGridRenderColumn[], 
+                private _cellUtils: CellUtilities, 
+                private gridConfig: IGridConfig,
+                private shadowRoot: ShadowRoot) 
+    {
     }
 
     /**
@@ -46,6 +38,42 @@ export class FlexDataRowRenderer implements IGridRenderer {
         return dataViewport;
     }
 
+    /**
+     * Renders into viewport.
+     * @param [renderOptions] render options.
+     */
+    renderIntoViewport(renderOptions?: any): void {
+        if (this.shadowRoot) {
+            this.shadowRoot.append(this.render({ data: this.gridConfig.data }));
+        }
+    }
+
+    updateViewportRowsUp(renderOptions?: any): void {
+        const viewport = this.shadowRoot.querySelector('.data-viewport');
+
+        if (viewport.innerHTML.length > 0) {
+            viewport.classList.add('scrolling-viewport');
+            viewport.innerHTML = this.renderNewRows(renderOptions.data);
+            viewport.classList.remove('scrolling-viewport');
+        }
+    }
+
+    updateViewportRowsDown(renderOptions: any): void {
+    }
+
+    renderNewRows(data: any[]) {
+        let colTemplate = '';
+        if(data && data.length > 0) {
+            data.forEach(dataRow => {
+                this._renderCols.forEach(col => {
+                    colTemplate += this.cellTemplateFragmentFn(col.field, dataRow);
+                });
+            });
+        }
+
+        return colTemplate;
+    }
+
     /**
      * Queues render async.
      * @returns render.
diff --git a/src/renderers/header.renderer.ts b/src/renderers/header.renderer.ts
index 5a18760..fe20307 100644
--- a/src/renderers/header.renderer.ts
+++ b/src/renderers/header.renderer.ts
@@ -25,6 +25,14 @@ export class FlexHeaderRenderer implements IGridRenderer {
         this._cellUtils = cellUtils;
     }
 
+    /**
+     * Renders into viewport.
+     * @param [data] options & data.
+     */
+    renderIntoViewport(data?: any): void {
+        throw new Error("Method not implemented.");
+    }
+
     /**
      * Renders flex header renderer.
      */
diff --git a/src/renderers/scroll.renderer.ts b/src/renderers/scroll.renderer.ts
index 56e0224..080185f 100644
--- a/src/renderers/scroll.renderer.ts
+++ b/src/renderers/scroll.renderer.ts
@@ -11,6 +11,14 @@ export class ScrollRenderer implements IGridRenderer {
     constructor() {
     }
 
+    /**
+     * Renders into viewport.
+     * @param [data] render rows.
+     */
+    renderIntoViewport(data?: any): void {
+        throw new Error("Method not implemented.");
+    }
+
     /**
      * Renders scroll renderer.
      * @param [data] render data.

From 464fb08920aba29c59e09ea54a8dcd0f8867b8e3 Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sat, 12 Jun 2021 20:56:54 +0530
Subject: [PATCH 12/13] chore(grid): Update details in package.json for new
 repo migration.

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a427ff8..54da3e9 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
-    "name": "@gs-grid/gs-grid",
-    "version": "0.0.1-alpha.2",
+    "name": "@flatui/grid",
+    "version": "0.0.1-alpha.3",
     "description": "A new grid for evolving web",
     "main": "index.ts",
-    "repository": "https://github.com/ganesh-vellanki/gs-grid",
+    "repository": "https://github.com/flatui/grid",
     "author": "velankiganesh@gmail.com",
     "license": "MIT",
     "private": false,

From cf4d177e7ba6c14a7385f9bfe1ef95888b9cf93b Mon Sep 17 00:00:00 2001
From: ganesh-vellanki <velankiganesh@gmail.com>
Date: Sat, 12 Jun 2021 20:59:14 +0530
Subject: [PATCH 13/13] Feat: Update .gitignore to ignore webstorm editor
 config.

---
 .gitignore | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 98de30f..4b6c3dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -105,4 +105,6 @@ dist
 
 dist/
 demo/
-example/main.bundle.js
\ No newline at end of file
+example/main.bundle.js
+
+.idea/