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 { 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", "[email protected]", "(353) 01 222 3333"],
["Mark", "[email protected]", "(01) 22 888 4444"],
["Eoin", "[email protected]", "0097 22 654 00033"],
["Sarah", "[email protected]", "+322 876 1233"],
["Afshin", "[email protected]", "(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 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

Last updated on by Salama Ashoush