dc-heroes.component.ts

First of, you need to start with creating a component. You can do so by typing in your console:

ng g c dc-heroes

In the component create new variable called columns.

Here we will define how our columns should be structured. We start off by creating 'Index' column and add to it required configuration: header name, field and optionally width. Header can be any value you wish, it is the text that you can see in the column header. Since, we are creating index column we shall pass a string named as columns = [{ header: 'Index' }]. To the define the field attribute we have to look at our source data. In our case it looks roughly like this:

{
	index: '1',
	character: 'Batman',
	name: 'Bruce Wayne',
	abilities: 'money'
},

Because, we are making index column we have to pass index value to our columns configuration and make sure that the field value is the same as name of the source object attribute.

columns = [{
		header: 'Index',
		field: 'index'
	}]

Now all we have to do is to define rest of the columns: 'Character', 'Real name', 'Abilities'. Using the same logic as above, our columns variable should look like this:

columns = [{
	header: 'Index',
	field: 'index',
	width: 60
}, {
	header: 'Character',
	field: 'character',
	view: GuiCellView.CHIP
}, {
	header: 'Real name',
	field: 'name'
}, {
	header: 'Abilities',
	field: 'abilities'
}];

In the 'Character' column we can change its template to look like a chip by adding view: GuiCellView.CHIP to the said column options. More view options can be found in our guide.

Since we are done with the columns, now we have to define source variable. It will link our dc heroes data to the grid, making it prepare our columns exactly as we configured them in the columns.

Creating the source is pretty straightforward, all you need to do is to define it as our data file, which in our case is a list of DC heroes:

source = [
	{
		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'
	}, {
		index: '5',
		character: 'Nightwing',
		name: 'Dick Grayson',
		abilities: 'martial arts'
	}, {
		index: '6',
		character: 'Green Lantern',
		name: 'Hal Jordan',
		abilities: 'Power ring'
	}, {
		index: '7',
		character: 'Green Arrow',
		name: 'Oliver Queen',
		abilities: 'money'
	}, {
		index: '8',
		character: 'Aquaman',
		name: 'Arthur Curry',
		abilities: 'can talk with fishes'
	}, {
		index: '9',
		character: 'Martian Manhunter',
		name: 'John Jones',
		abilities: 'telepathy'
	}, {
		index: '10',
		character: 'Captain Marvel',
		name: 'Billy Batson',
		abilities: 'superhuman abilities'
	}, {
		index: '11',
		character: 'Black Canary',
		name: 'Laurel Lance',
		abilities: 'sonic scream'
	}, {
		index: '12',
		character: 'Zatanna',
		name: 'Zatanna',
		abilities: 'magic'
	}, {
		index: '13',
		character: 'Robin',
		name: 'Damian Wayne',
		abilities: 'martial arts, gadgets'
	}, {
		index: '14',
		character: 'Supergirl',
		name: 'Kara Zor-El',
		abilities: 'superhuman powers'
	}, {
		index: '15',
		character: 'Batgirl',
		name: 'Barbara Gordon',
		abilities: 'speed, flexibility and strength'
	}, {
		index: '16',
		character: 'Cyborg',
		name: 'Vic Stone',
		abilities: 'high-tech gadgets'
	}, {
		index: '17',
		character: 'Kid Flash',
		name: 'Wally West',
		abilities: 'speed'
	}, {
		index: '18',
		character: 'Catwoman',
		name: 'Selina Kyle',
		abilities: 'stealthy and agile'
	}, {
		index: '19',
		character: 'Red Robin',
		name: 'Tim Drake',
		abilities: 'martial arts'
	}, {
		index: '20',
		character: 'John Constantine',
		name: 'John Constantine',
		abilities: 'sorcery'
	}, {
		index: '21',
		character: 'Raven',
		name: 'Rachel Roth',
		abilities: 'dark magic'
	}, {
		index: '22',
		character: 'Starfire',
		name: 'Koriand\'r',
		abilities: 'flight and energy projection'
	}, {
		index: '23',
		character: 'Beast Boy',
		name: 'Garfield Logan',
		abilities: 'shape-shifting'
	}, {
		index: '24',
		character: 'Hawkgirl',
		name: 'Kendra Saunders',
		abilities: 'flight'
	}, {
		index: '25',
		character: 'Doctor Fate',
		name: 'Kent Nelson',
		abilities: 'magic'
	}, {
		index: '26',
		character: 'Red Hood',
		name: 'Jason Todd',
		abilities: 'martial arts'
	}, {
		index: '27',
		character: 'Firestorm',
		name: 'Ronnie Raymond / Martin Stein',
		abilities: 'nuclear power'
	}, {
		index: '28',
		character: 'The Atom',
		name: 'Ray Palmer',
		abilities: 'size-changing'
	}, {
		index: '29',
		character: 'Jonah Hex',
		name: 'Jonah Hex',
		abilities: 'excellent gunslinger'
	}, {
		index: '30',
		character: 'Joker',
		name: 'Clown Prince of Crime',
		abilities: 'deadly and unpredictable'
	}, {
		index: '31',
		character: 'Lex Luthor',
		name: 'Alexander Luthor',
		abilities: 'money'
	}, {
		index: '32',
		character: 'Darkseid',
		name: 'Darkseid',
		abilities: 'unparalleled strength'
	}, {
		index: '33',
		character: 'Sinestro',
		name: 'Thaal Sinestro',
		abilities: 'power ring'
	}, {
		index: '34',
		character: 'Brainiac',
		name: 'Vril Dox',
		abilities: 'Extremely advanced mental abilities'
	}, {
		index: '35',
		character: 'Black Adam',
		name: 'Teth-Adam',
		abilities: 'superhuman abilities'
	}, {
		index: '36',
		character: 'Ra\'s al Ghul',
		name: 'Head of the Demon',
		abilities: 'immortality'
	}, {
		index: '37',
		character: 'Deathstrok',
		name: 'Slade Wilson',
		abilities: 'enhanced strength, agility and intelligence'
	}, {
		index: '38',
		character: 'Two-Face',
		name: 'Harvey Dent',
		abilities: 'can flip coins'
	}, {
		index: '39',
		character: 'Vandal Savage',
		name: 'Vandal Savage',
		abilities: 'immortality'
	}, {
		index: '40',
		character: 'Reverse Flash',
		name: 'Eobard Thawne',
		abilities: 'speed'
	}, {
		index: '41',
		character: 'Doomsday',
		name: 'Doomsday',
		abilities: 'regenerative abilities'
	}, {
		index: '42',
		character: 'Mongul',
		name: 'Mongul I',
		abilities: 'superhuman abilities'
	}, {
		index: '43',
		character: 'Bizarro',
		name: 'Bizarro',
		abilities: 'has many duplicates'
	}, {
		index: '44',
		character: 'Riddler',
		name: 'Edward Nygma',
		abilities: 'excellent at creating riddles'
	}, {
		index: '45',
		character: 'Maxwell Lord',
		name: 'Maxwell Lord IV',
		abilities: 'mind control'
	}, {
		index: '46',
		character: 'Captain Cold',
		name: 'Leonard Snart',
		abilities: 'cold gun'
	}, {
		index: '47',
		character: 'Bane',
		name: 'Bane',
		abilities: 'good at taking steroid'
	}, {
		index: '48',
		character: 'Harley Quinn',
		name: 'Harleen Quinzel',
		abilities: 'spending money'
	}, {
		index: '49',
		character: 'Gorilla Grodd',
		name: 'Gorilla Grodd',
		abilities: 'super-intelligence'
	}, {
		index: '50',
		character: 'Lobo',
		name: 'Lobo',
		abilities: 'incredible strength and regeneration'
	}];

That is all we had to do in the dc-heroes.component.ts. We can move on to the next section which is creating template.

dc-heroes.component.html

Creating template for the grid is as simple as adding gui-grid selector to the HTML file and passing our columns and source variables:

<gui-grid [columns]="columns"
		  [source]="source"
		  [paging]="true"
		  [theme]="'material'">
</gui-grid>

Notice that we have added paging and theme inputs. Paging set to true, adds pagination interface to the grid, whereas theme adds new set of styles to the grid. Selecting theme is quiet easy, we only have to add the theme input to the grid selector and pass a string with the name of the specific theme. In this example we are using 'material' theme. You can check more about themes and paging in our guide.

Our project is ready to go all that is left is to add GridModule to the our dc-heroes.module.ts imports.

import { GuiGridModule } from '@generic-ui/ngx-grid';
import { DcHeroesComponent } from './dc-heroes.component';

@NgModule({
	imports: [
		GridModule
	],
	declarations: [
		DcHeroesComponent,
	]
})
export class DCHeroesModule {
}