upgrade to gridjs v4

Author: salamaashoush

libs/gridjs-angular/README.md

@@ -27,7 +27,7 @@ In your component template
 
 ```ts
 import { Component } from '@angular/core';
-import { GridJsConfig } from 'gridjs-angular';
+import { UserConfig } from 'gridjs';
 
 @Component({
   template: `
@@ -41,7 +41,7 @@ import { GridJsConfig } from 'gridjs-angular';
   `
 })
 class ExampleComponent {
-  public gridConfig: GridJsConfig = {
+  public gridConfig: UserConfig = {
     columns: ['Name', 'Email', 'Phone Number'],
     data: [
       ['John', 'john@example.com', '(353) 01 222 3333'],

libs/gridjs-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-angular",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "keywords": [
     "gridjs",
     "table",
@@ -16,7 +16,7 @@
   "peerDependencies": {
     "@angular/common": ">=9.0.0",
     "@angular/core": ">=9.0.0",
-    "gridjs": "^3.4.0"
+    "gridjs": "^4.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

libs/gridjs-angular/src/lib/gridjs-angular.component.ts

@@ -12,24 +12,23 @@ import {
 import { Grid, UserConfig } from 'gridjs';
 import { GRIDJS_EVENTS, GRIDJS_PROPS } from './constants';
 
-
 @Component({
   selector: 'gridjs-angular',
   template: '',
   encapsulation: ViewEncapsulation.None,
 })
 export class GridJsAngularComponent
-  implements AfterViewInit, OnChanges, OnDestroy,UserConfig {
+  implements AfterViewInit, OnChanges, OnDestroy, UserConfig {
   private nativeElement: HTMLElement;
   private gridInstance: Grid;
   private initialized: boolean;
   private listeners: Map<string, (...args: any[]) => void> = new Map();
   @Input() config: UserConfig;
   // TODO: auto generate Inputs/Output to easily sync with grid-js main package
   // props
-  @Input() plugins: UserConfig['plugins']= [];
-  @Input() eventEmitter:  UserConfig['eventEmitter'];
-  @Input() dispatcher:UserConfig['dispatcher'];
+  @Input() plugins: UserConfig['plugins'] = [];
+  @Input() eventEmitter: UserConfig['eventEmitter'];
+  @Input() dispatcher: UserConfig['dispatcher'];
   @Input() plugin: UserConfig['plugin'];
   @Input() data: UserConfig['data'];
   @Input() server: UserConfig['server'];
@@ -46,9 +45,10 @@ export class GridJsAngularComponent
   @Input() fixedHeader: UserConfig['fixedHeader'];
   @Input() columns: UserConfig['columns'];
   @Input() search: UserConfig['search'];
-  @Input() pagination:UserConfig['pagination'];
-  @Input() sort:UserConfig['sort'];
+  @Input() pagination: UserConfig['pagination'];
+  @Input() sort: UserConfig['sort'];
   @Input() language: UserConfig['language'];
+  @Input() resizable: UserConfig['resizable'];
 
   // events
   @Output() beforeLoad: EventEmitter<void> = new EventEmitter(true);

package.json

@@ -38,7 +38,7 @@
     "@angular/platform-browser-dynamic": "^11.2.8",
     "@angular/router": "^11.2.8",
     "@nrwl/angular": "11.6.1",
-    "gridjs": "^3.4.0",
+    "gridjs": "^4.0.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.1.0",
     "zone.js": "^0.11.4"