gridjs-angular
v2.0.0
Published
Angular wrapper for [Grid.js](https://github.com/grid-js/gridjs)
Downloads
884
Readme
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', '[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 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 viagridLoad
(to avoid conflict with the native DOMload
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 dependenciesnx serve demo
- Run demo appnx migrate latest
- Update Nx to the latest version, and upgrade all packages from package.json to their latest version