gridjs-angular

gridjs-angular

Angular wrapper for Grid.js

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 { GridJsConfig } from 'gridjs-angular';

@Component({
  template: `
    <gridjs-angular
      [gridConfig]="gridConfig"
      (cellClick)="handleCellClick($event)"
      (rowClick)="handleRowClick($event)"
      (beforeLoad)="handleBeforeLoad($event)"
      (gridLoad)="handleGridLoad($event)"
    ></gridjs-angular>
  `
})
class ExampleComponent {
  public gridConfig: GridJsConfig = {
    columns: ['Name', 'Email', 'Phone Number'],
    data: [
      ['John', '[e-mail]', '(353) 01 222 3333'],
      ['Mark', '[e-mail]', '(01) 22 888 4444'],
      ['Eoin', '[e-mail]', '0097 22 654 00033'],
      ['Sarah', '[e-mail]', '[phone]'],
      ['Afshin', '[e-mail]', '(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.

• gridConfig 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 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