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; })