Back

Dynamic columns example



In this example you can modify columns inside the GUI-grid by using forms positioned on the right side of the page.

The first form enables you a possibility to add column to the grid. For that purpose you have to define it by using two input values: column header and field and click the Add column button.

The second form gives an option to edit columns inside the grid or remove them. Select specifies existing column headers. Whereas, inside the input area you can change column attributes such as: header name, column field, column width. Please note, that not every column has predefined width. Moreover, available column fields are: index, character, name, abilities.

Source code of this example is at the bottom of the page.
  • Add column

  • index, character, name, abilities
  • Edit column

  • Select column header
    Index
    Character
    Real name
    Abilities
  • index, character, name, abilities

Source code

app.component.html
app.component.ts
dc-data.service.ts
dc-data.ts
<div class="dynamic-column-grid">

	<gui-grid [columns]="columns"
			  [source]="source"
			  [paging]="paging">
	</gui-grid>

</div>

<div class="dynamic-column-form">

	<form [formGroup]="addColumnForm" (ngSubmit)="addColumn(addColumnForm.value)">
		<div class="add-column-form">
			<ul>
				<li>
					<h3>Add column</h3>
				</li>
				<li>
					<label>
						<input gui-input
							   formControlName="columnHeader"
							   [placeholder]="'Enter column header'">
					</label>
				</li>
				<li class="column-field-input">
					<label>
						<input gui-input
							   formControlName="columnField"
							   [placeholder]="'Enter column field'">
					</label>
				</li>
				<li>
					<button gui-button type="submit" [disabled]="!addColumnForm.valid">Add column</button>
				</li>
			</ul>
		</div>
	</form>

	<form [formGroup]="editColumnForm" (ngSubmit)="editColumn(editColumnForm.value)">
		<div class="edit-column-form">
			<ul>
				<li>
					<h3>Edit column</h3>
				</li>
				<li class="form-gui-select">
					<gui-select
						(optionChanged)="optionChanged($event)"
						[selected]="option"
						[options]="headerList"
						[placeholder]="'Select column header'"
						[width]="206">
					</gui-select>
				</li>
				<li>
					<label>
						<input gui-input
							   formControlName="editedColumnHeader"
							   [placeholder]="'Edit column header'">
					</label>
				</li>
				<li class="column-field-input">
					<label>
						<input gui-input
							   formControlName="editedColumnField"
							   [placeholder]="'Edit column field'">
					</label>
				</li>
				<li>
					<label>
						<input gui-input
							   formControlName="editedColumnWidth"
							   [placeholder]="'Edit column width'">
					</label>
				</li>
				<li>
					<button gui-button
							[disabled]="!editColumnForm.valid || !option"
							type="submit">
							Edit
					</button>
					<button gui-button
							(click)="removeColumn()"
							[disabled]="!option">
						Remove
					</button>
				</li>
			</ul>
		</div>
	</form>
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { DcDataService } from '../../dc/data/dc-data.service';
import { GuiColumn, GuiPagingConfig } from '@generic-ui/ngx-grid';


@Component({
	selector: 'example-dynamic-column-grid',
	templateUrl: './example-dynamic-column-grid.component.html',
	styleUrls: ['./example-dynamic-column-grid.component.scss'],
	providers: [DcDataService]
})
export class ExampleDynamicColumnGridComponent {

	addColumnForm: FormGroup;
	editColumnForm: FormGroup;

	heroes: Array<object>;
	columnHeader: string;
	columnField: string;
	editedColumnHeader: string = '';
	editedColumnField: string = '';
	editedColumnWidth: number = null;
	option: string;

	headerList: Array<string> = [];

	columns: Array<GuiColumn> = [{
		header: 'Index',
		field: 'index',
		width: 60
	}, {
		header: 'Character',
		field: 'character'
	}, {
		header: 'Real name',
		field: 'name'
	}, {
		header: 'Abilities',
		field: 'abilities'
	}];

	source = this.heroes;

	paging: GuiPagingConfig = {
		enabled: true
	};

	constructor(private dcDataService: DcDataService,
				private formBuilder: FormBuilder) {

		this.addColumnForm = formBuilder.group({
			'columnHeader': ['', Validators.required],
			'columnField': ['', Validators.required]
		});

		this.editColumnForm = formBuilder.group({
			'editedColumnHeader': ['', Validators.required],
			'editedColumnField': ['', Validators.required],
			'editedColumnWidth': ''
		});
	}

	ngOnInit() {
		this.dcDataService.getHeroes()
			.subscribe(heroes => this.source = heroes);
		this.createColumnHeaderList();
	}

	addColumn(post): void {
		this.columnHeader = post.columnHeader;
		this.columnField = post.columnField;

		if (this.columnHeader) {

			const column = {
				header: this.columnHeader,
				field: this.columnField
			};
			this.columns = [
				...this.columns,
				column
			];
		}
		this.createColumnHeaderList();
		this.addColumnForm.reset();
	}

	removeColumn(): void {
		const columns = [...this.columns];

		for (let i = 0; i < this.columns.length; i++) {
			if (this.columns[i].header === this.option) {
				columns.splice(i, 1);
				this.columns = [...columns];
			}
		}
	}

	createColumnHeaderList(): Array<string> {
		this.headerList = [];

		for (let i = 0; i < this.columns.length; i++) {
			this.headerList.push(this.columns[i].header);
		}
		return this.headerList;
	}

	optionChanged(option: string): void {
		this.option = option;

		for (let i = 0; i < this.columns.length; i++) {
			if (this.columns[i].header === this.option) {
				this.editColumnForm.get('editedColumnHeader').setValue(this.columns[i].header);
				this.editColumnForm.get('editedColumnField').setValue(this.columns[i].field);
				this.editColumnForm.get('editedColumnWidth').setValue(this.columns[i].width);
			}
		}
	}

	editColumn(post): void {
		this.editedColumnHeader = post.editedColumnHeader;
		this.editedColumnField = post.editedColumnField;
		this.editedColumnWidth = post.editedColumnWidth;

		const columns = [...this.columns];

		for (let i = 0; i < this.columns.length; i++) {
			if (this.columns[i].header === this.option) {
				this.columns[i].header = this.editedColumnHeader;
				this.columns[i].field = this.editedColumnField;
				this.columns[i].width = this.editedColumnWidth;
				this.columns = [...columns];
			}
		}
		this.createColumnHeaderList();
		this.editColumnForm.reset();
	}
}
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { HEROES } from './dc-data';

@Injectable()
export class DcDataService {

	private heroes$ = new BehaviorSubject(HEROES);

	getHeroes(): Observable<Array<object>> {
		return this.heroes$.asObservable();
	}
}
export const HEROES = [
	{
		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'
	}];

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.