gridjs-angular

Angular wrapper for Grid.js

Install

npm install gridjs gridjs-angular

Usage

In your component template

import { Component } from '@angular/core';
import { GridjsAngularModule } from 'gridjs-angular';
import { Config } from 'gridjs';

@Component({
  standalone: true,
  imports: [GridJsAngularComponent],
  template: `
    <gridjs-angular
      [gridConfig]="gridConfig"
      (cellClick)="handleCellClick($event)"
      (rowClick)="handleRowClick($event)"
      (beforeLoad)="handleBeforeLoad($event)"
      (gridLoad)="handleGridLoad($event)"
    ></gridjs-angular>
  `
})
class ExampleComponent {
  public gridConfig: Config = {
    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 to your angular.json file, or import it some other way.

styles: ["node_modules/gridjs/dist/theme/mermaid.min.css"]

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 bind to all Grid.js events as outputs. Additionally, the load event can also be accessed via gridLoad (to avoid conflict with the native DOM load event). 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 template syntax in plugins, formatters, etc?

Not currently.

You can't use Angular template syntax in Grid.js plugins, formatters, etc. because they cannot be connected to Angular's change detection system. You can use h function or html function to create custom HTML for your grid.

Development

The gridjs-angular repository is a monorepo that uses Nx and pnpm.

Useful commands

• pnpm install - Install all dependencies
• nx serve demo - Run demo app
• nx migrate latest - Update Nx to the latest version, and upgrade all packages from package.json to their latest version