Quick start

The gird component is very easy to use. The most basic example requires you to only give data to the datatable component. Grid has built-in auto configuration feature which can guess your columns based on your data.

Try quick start example on the stackblitz

import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid
			[source]="source">
		</gui-grid>`
})
export class QuickStartComponent {

	source: Array<any> = [{
		index: '1',
		character: 'Batman',
		name: 'Bruce Wayne',
		abilities: 'money'
	}, {
		index: '2',
		character: 'Flash',
		name: 'Barry Allen',
		abilities: 'speed'
	}, {
		index: '3',
		character: 'Superman',
		name: 'Clark Kent',
		abilities: 'invincible'
	}, {
		index: '4',
		character: 'Wonder Woman',
		name: 'Diana Prince',
		abilities: 'superhuman strength'
	}];

}

import { NgModule } from '@angular/core';

import { GuiGridModule } from '@generic-ui/ngx-grid';


@NgModule({
	imports: [
		GuiGridModule,
	],
	declarations: [
		QuickStartComponent
	]
})
export class QuickStartModule {
}

This example show the minimal required configuration. All you need to do is provide the datatable component with data.