Grid.jsAngular
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: [
],
};
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.gridConfigYou can pass Grid.js config as one object and it will be merged with other Grid.js inputs.pluginsGrid.js plugins array. See Grid.js Plugins
Outputs
- You can pass all Grid.js events as outputs with a little difference
loadevent renamed tobeforeLoad. See Grid.js Events
Can I use Grid.js rendering helpers? Yes
- Using
hfunction is working fine. See this example plugin.
{
id: 'myplugin',
component: h(() => h('h1', {}, 'Hello world!'), {}),
position: PluginPosition.Header,
}
- You can also use
htmlin column formatter like this.
{
name: 'Email',
formatter: (_, row) => html(
`<a href='mailto:${row.cells[1].data}'>${row.cells[1].data}</a>`
)
}