diff --git a/README.md b/README.md
index b688bb2..83ec556 100644
--- 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
+
+
+```
-## 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
\ No newline at end of file
diff --git a/projects/ag-grid-plus/README.md b/projects/ag-grid-plus/README.md
index b7432a2..83ec556 100644
--- 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)
\ No newline at end of file
+(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
+
+
+```
+
+### 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
\ No newline at end of file
diff --git a/projects/ag-grid-plus/package.json b/projects/ag-grid-plus/package.json
index 00bce96..812f7c2 100644
--- 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
index 78a2bcc..83a8b13 100644
--- 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
index 9cf0991..b22bce8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
{
this.deltaRowData = res;
})