improved readme file

LakhveerChahal · Dec 31, 2023 · 16fd0a8 · 16fd0a8
1 parent 17ae4aa
commit 16fd0a8
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,67 @@
-# AgGridPlusWorkspace
+# AgGridPlus
+An ag-grid based package providing extra features built on top of ag-grid community edition to unlock some paid enterprise features
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7.
+# Unlocked features
+1. Dynamic row height with lazy loading data from backend
+(More features upcoming)
 
-## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+## Getting started
+### Installation
+```sh
+$ npm install --save ag-grid-plus ag-grid-community ag-grid-angular
+```
 
-## Code scaffolding
+### Add a placeholder to HTML
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+```html
+  <ag-grid-plus
+    [deltaRows]="deltaRowData"
+    [columnDefs]="columnDefs"
+    [class]="'ag-theme-quartz'"
+    (getRows)="getRowsAsync($event)"
+    (sortChanged)="onSortChanged($event)"
+    (onGridReady)="onGridReady($event)"
+  >
+  </ag-grid-plus>
+```
 
-## Build
+### Import the grid component and styles in global styles file
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+```js
+import { AgGridPlusComponent } from 'ag-grid-plus';
 
-## Running unit tests
+import 'ag-grid-community/styles//ag-grid.css';
+import 'ag-grid-community/styles//ag-theme-quartz.css';
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+### Input parameters of AGGridPlusComponent
 
-## Running end-to-end tests
+| Input parameter     | Info                |
+| ------------------- | ----------------    |
+|  colDef             | https://www.ag-grid.com/angular-data-grid/column-definitions/   |
+|  rowHeight          | Default row height in pixels. |
+|  deltaRows          | Paginated data to append in the ag-grid  |
+|  rowBuffer          | The number of rows rendered outside the viewable area the grid renders. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically. (Default: 10)  |
+|  limit              | Pagination size (Default: 100 ) |
+|  hasReachedEndOfData| Boolean input to inform the component to not request for further data as we have reached the end  |
+|  clazz              | Ag grid theme to be used  |
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
-## Further help
+### Output parameters of AGGridPlusComponent
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+| @Output parameter           | Info |
+| --------------------|------------------|
+|  getRows            | Emits when user scrolls to the bottom and hence grid requests for more data  |
+|  sortChanged        | Emits when user clicks on any sortable header. Returns SortModelItem object  |
+|  onGridReady        | Emits when grid becomes ready. Returns GridApi object  |
+
+
+## Asking Questions
+
+Feel free to ask any questions using Github [Issues] (https://github.com/LakhveerChahal/ag-grid-plus-workspace/issues)
+
+## Github Repository
+
+https://github.com/LakhveerChahal/ag-grid-plus-workspace/issues
diff --git a/projects/ag-grid-plus/README.md b/projects/ag-grid-plus/README.md
@@ -3,4 +3,65 @@ An ag-grid based package providing extra features built on top of ag-grid commun
 
 # Unlocked features
 1. Dynamic row height with lazy loading data from backend
-(More features upcoming)
+(More features upcoming)
+
+
+## Getting started
+### Installation
+```sh
+$ npm install --save ag-grid-plus ag-grid-community ag-grid-angular
+```
+
+### Add a placeholder to HTML
+
+```html
+  <ag-grid-plus
+    [deltaRows]="deltaRowData"
+    [columnDefs]="columnDefs"
+    [class]="'ag-theme-quartz'"
+    (getRows)="getRowsAsync($event)"
+    (sortChanged)="onSortChanged($event)"
+    (onGridReady)="onGridReady($event)"
+  >
+  </ag-grid-plus>
+```
+
+### Import the grid component and styles in global styles file
+
+```js
+import { AgGridPlusComponent } from 'ag-grid-plus';
+
+import 'ag-grid-community/styles//ag-grid.css';
+import 'ag-grid-community/styles//ag-theme-quartz.css';
+```
+
+### Input parameters of AGGridPlusComponent
+
+| Input parameter     | Info                |
+| ------------------- | ----------------    |
+|  colDef             | https://www.ag-grid.com/angular-data-grid/column-definitions/   |
+|  rowHeight          | Default row height in pixels. |
+|  deltaRows          | Paginated data to append in the ag-grid  |
+|  rowBuffer          | The number of rows rendered outside the viewable area the grid renders. Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically. (Default: 10)  |
+|  limit              | Pagination size (Default: 100 ) |
+|  hasReachedEndOfData| Boolean input to inform the component to not request for further data as we have reached the end  |
+|  clazz              | Ag grid theme to be used  |
+
+
+### Output parameters of AGGridPlusComponent
+
+
+| @Output parameter           | Info |
+| --------------------|------------------|
+|  getRows            | Emits when user scrolls to the bottom and hence grid requests for more data  |
+|  sortChanged        | Emits when user clicks on any sortable header. Returns SortModelItem object  |
+|  onGridReady        | Emits when grid becomes ready. Returns GridApi object  |
+
+
+## Asking Questions
+
+Feel free to ask any questions using Github [Issues] (https://github.com/LakhveerChahal/ag-grid-plus-workspace/issues)
+
+## Github Repository
+
+https://github.com/LakhveerChahal/ag-grid-plus-workspace/issues
diff --git a/projects/ag-grid-plus/package.json b/projects/ag-grid-plus/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-plus",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "An ag-grid based package providing extra features built on top of ag-grid community edition to unlock some paid enterprise features",
   "peerDependencies": {
     "@angular/common": "^17.0.0",
@@ -9,5 +9,18 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "keywords": [
+    "ag",
+    "ag-grid",
+    "datagrid",
+    "data-grid",
+    "datatable",
+    "data-table",
+    "grid",
+    "table",
+    "table",
+    "angular",
+    "angular-component" 
+  ]
 }
diff --git a/projects/ag-grid-plus/src/lib/ag-grid-plus.component.ts b/projects/ag-grid-plus/src/lib/ag-grid-plus.component.ts
@@ -22,7 +22,7 @@ import { AGGridPlusHeaderComponent } from './renderers/header-component/ag-grid-
 export class AgGridPlusComponent {
   /****** INPUT *********/
   @Input('rowHeight') rowHeight: number = 48;
-  @Input('colDef') colDef: ColDef[] = [];
+  @Input('columnDefs') columnDefs: ColDef[] = [];
   @Input('deltaRows') deltaRows: any[] = [];
   @Input('rowBuffer') rowBuffer: number = 10;
   @Input('limit') limit: number = 100;
@@ -59,7 +59,7 @@ export class AgGridPlusComponent {
       }
     }
 
-    if(changes['colDef']) {
+    if(changes['columnDefs']) {
       this.setColumnDefs();
     }
 
@@ -83,7 +83,7 @@ export class AgGridPlusComponent {
         componentParent: this
       },
       rowHeight: this.rowHeight,
-      columnDefs: this.colDef,
+      columnDefs: this.columnDefs,
       rowBuffer: this.rowBuffer,
       onBodyScrollEnd: this.onBodyScrollEnd.bind(this),
       components: {
@@ -103,7 +103,7 @@ export class AgGridPlusComponent {
   }
 
   setColumnDefs(): void {
-    this.colDef.forEach((colDef: ColDef) => {
+    this.columnDefs.forEach((colDef: ColDef) => {
       // attach sortChanged Subject to sortable columns for custom sorting
       if(colDef.sortable) {
         colDef.headerComponent = AGGridPlusHeaderComponent;
@@ -117,7 +117,7 @@ export class AgGridPlusComponent {
 
     this.gridOptions = {
       ...this.gridOptions,
-      columnDefs: this.colDef
+      columnDefs: this.columnDefs
     }
   }
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <ag-grid-plus
     [deltaRows]="deltaRowData"
-    [colDef]="colDef"
+    [columnDefs]="columnDefs"
     [class]="'ag-theme-quartz'"
     (getRows)="getRowsAsync($event)"
     (sortChanged)="onSortChanged($event)"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -14,7 +14,7 @@ import { AgGridPlusComponent } from 'ag-grid-plus';
 })
 export class AppComponent {
   deltaRowData: any[] = [];
-  colDef: ColDef[] = [];
+  columnDefs: ColDef[] = [];
   limit: number = 50;
   gridApi!: GridApi;
 
@@ -26,7 +26,7 @@ export class AppComponent {
   }
 
   initializeColDefs(): void {
-    this.colDef = [
+    this.columnDefs = [
       {
         headerName: "Car brand",
         field: "carBrand",
@@ -61,7 +61,7 @@ export class AppComponent {
 
   getRowsAsync(offset: number): void {
     of(this.getRows(offset))
-      .pipe(delay(3000))
+      .pipe(delay(500))
       .subscribe((res) => {
         this.deltaRowData = res;
       })