Skip to main content

Angular

Install​

npm install gridjs gridjs-angular

Usage​

In your module

import { GridjsAngularModule } from 'gridjs-angular';

@NgModule({
  imports: [CommonModule,GridjsAngularModule],
  declarations: [...],
  exports: [...],
})
export class AppModule {}

In your component template

import { Component } from "@angular/core";
import { UserConfig } from "gridjs";

@Component({
  template: `
    <gridjs-angular
      [config]="gridConfig"
      (cellClick)="handleCellClick($event)"
      (rowClick)="handleRowClick($event)"
      (beforeLoad)="handleBeforeLoad($event)"
      (gridLoad)="handleGridLoad($event)"
    ></gridjs-angular>
  `,
})
class ExampleComponent {
  public gridConfig: UserConfig = {
    columns: ["Name", "Email", "Phone Number"],
    data: [
      ["John", "john@example.com", "(353) 01 222 3333"],
      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ],
  };

  handleCellClick(event: any) {
    console.log("cellClicked", event);
  }

  handleRowClick(event: any) {
    console.log("rowClicked", event);
  }

  handleBeforeLoad(event: any) {
    console.log("beforeLoad", event);
  }

  handleGridLoad(event: any) {
    console.log("load", event);
  }
}

Finally don't forget to add gridjs theme in your index.html

<link
  href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
  rel="stylesheet"
/>

Inputs​

  • You can pass all Grid.js configs to the <gridjs-angular> component as inputs. See Grid.js Config for more details.

  • config You can pass Grid.js config as one object and it will be merged with other Grid.js inputs.

  • plugins Grid.js plugins array. See Grid.js Plugins

Outputs​

  • You can pass all Grid.js events as outputs with a little difference load event renamed to beforeLoad. See Grid.js Events

Can I use Grid.js rendering helpers? Yes​

  • Using h function is working fine. See this example plugin.
 {
    id: 'myplugin',
    component: h(() => h('h1', {}, 'Hello world!'), {}),
    position: PluginPosition.Header,
  }
  • You can also use html in column formatter like this.
 {
    name: 'Email',
    formatter: (_, row) => html(
        `<a href='mailto:${row.cells[1].data}'>${row.cells[1].data}</a>`
      )
  }

Can I use Angular components in plugins, formatters, etc? Not yet​