grid-js / gridjs-angular Goto Github PK

Hi,

I create a from scratch project with angular, and i would like to have resizable column , i read the documentation and i see that resizable=true should work as expected but it doesn't work. May i miss something?

My template:

<gridjs-angular
    [data]="data"
    [columns]="columns"
    [sort]="true"
    [search]="true"
    [pagination]="true"
    [resizable]="true"
    (gridLoad)="onLoad($event)"
    (beforeLoad)="onBeforeLoad($event)"
    (ready)="onReady($event)"
    (cellClick)="onCellClick($event)"
    (rowClick)="onRowClick($event)"
  ></gridjs-angular>

My ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { GridJsAngularComponent } from 'gridjs-angular';
import { faker } from '@faker-js/faker/locale/en';
import { TData } from 'gridjs/dist/src/types';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, GridJsAngularComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'test_gridjs';

  columns = ['Name', 'Email', 'Phone Number'];
  data: TData = Array.from({ length: 100 }).map(() => [
    faker.person.fullName(),
    faker.internet.email(),
    faker.phone.number(),
  ]);

  onLoad = (event: any) => console.log('Grid loaded', event);
  onBeforeLoad = (event: any) => console.log('Before grid loaded', event);
  onReady = (event: any) => console.log('Grid ready', event);
  onCellClick = (event: any) => console.log('Grid cell clicked', event);
  onRowClick = (event: any) => console.log('Grid row clicked', event);

}

And the result :

thanks for your help.

;)

gridjs-angular currently only supports gridjs v4. Is this going to be updated to v6 anytime soon?

===========================
If I still use it, then the error will also appear.

I am getting the following error when having pagination and sort enabled: "An error happened while fetching the data"

If I disable sort

or I disable pagination

• none of the following events is being triggered: gridLoad, beforeLoad, ready

I am trying to use the plugin with latest version of angular with Typescript and getting following issue. I have gone through the documentation and everything, but not able to figure out any solution. It seems, there is some issue with type declaration in the probably core plugin.

Error: node_modules/gridjs/dist/src/view/base.d.ts:5:67 - error TS2344: Type 'unknown' does not satisfy the constraint 'BaseProps'.

5 export declare abstract class BaseComponent<P extends BaseProps = unknown, S = unknown> extends Component<P, S> {

Feel free to close this, if it's not an real issue.

Environments:

• Angular: 12.0.1
• TypeScript: 4.2.3
• GridJS: 5.0.2
• gridjs-angular: 1.2.0