Size

The gui-grid is configurable in many ways. One of which is to modify its size with width and height attributes.

The autoResizeWidth input matches the grid in the available container space. The said input is enabled by default.

Size example
app.component.html
app.component.ts
source.ts
Width:
min width > 100
Max height:
min height > 500
Number
Name
Position
Team
8 Kobe BryantSG Los Angeles Lakers 1 Tracy McGradySG Houston Rockets 23 Lebron JamesPF Los Angeles Lakers 3 Dwayne WadeSG Miami Heat 15 Vince CarterSG Atlanta Hawks 34 Charles BarkleyPF N/A 15 Nikola JokićPF Denver Nuggets 0 Russell WestbrookPG Houston Rockets 7 Kevin DurantPF Brooklyn Nets 13 James HardenPG/SG Houston Rockets 13 Paul GeorgeSG Los Angeles Clippers 25 Ben SimmonsPG Philadelphia 76ers 2 Kawhi LeonardSG/SF Los Angeles Clippers 21 Joel EmbiidC Philadelphia 76ers 34 Giannis AntetokounmpoPF Milwaukee Bucks 30 Stephen CurryPG Golden State Warriors 11 Klay ThompsonSG Golden State Warriors 23 Anthony DavisPF Los Angeles Lakers
<form [formGroup]="sizeForm" (keyup)="submitSize(sizeForm.value)">

	<div>
		Width:
		<input gui-input formControlName="gridWidth">
	</div>

	<div>
		Height:
		<input gui-input formControlName="gridHeight">
	</div>

	<gui-button-toggle (changed)="autoResize($event)">
		Auto-Resize
	</gui-button-toggle>

</form>

<gui-grid [columns]="columns"
		  [source]="source"
		  [maxHeight]="height"
		  [width]="width"
		  [autoResizeWidth]="autoResizeWidth">
</gui-grid>
import { Component } from '@angular/core';

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

import { source } from '../../example-players-list/source';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
	selector: 'size-grid',
	templateUrl: 'app.component.html'
})
export class GridComponent {

	sizeForm: FormGroup;

	columns = [{
		header: 'Number',
		field: 'number',
		width: 60
	}, {
		header: 'Name',
		field: 'name',
		view: GuiCellView.ITALIC
	}, {
		header: 'Position',
		field: 'position',
		view: GuiCellView.BOLD
	}, {
		header: 'Team',
		field: 'team'
	}];

	source = source;

	height: number = 500;
	width: number = 1000;

	autoResizeWidth: boolean = false;


	constructor(private formBuilder: FormBuilder) {

		this.sizeForm = formBuilder.group({
			'gridHeight': [[this.height], [Validators.required, Validators.min(500)]],
			'gridWidth': [[this.width], [Validators.required, Validators.min(100)]]
		});

	}

	autoResize(checked): void {
		this.autoResizeWidth = checked;
	}

	submitSize(post): void {
		this.height = post.gridHeight;
		this.width = post.gridWidth;
	}

}
export const source = [{
	name: 'Kobe Bryant',
	number: 8,
	position: 'SG',
	team: 'Los Angeles Lakers'
}, {
	name: 'Tracy McGrady',
	number: 1,
	position: 'SG',
	team: 'Houston Rockets'
}, {
	name: 'Lebron James',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}, {
	name: 'Dwayne Wade',
	number: 3,
	position: 'SG',
	team: 'Miami Heat'
}, {
	name: 'Vince Carter',
	number: 15,
	position: 'SG',
	team: 'Atlanta Hawks'
}, {
	name: 'Charles Barkley',
	number: 34,
	position: 'PF',
	team: 'N/A'
}, {
	name: 'Nikola Jokic',
	number: 15,
	position: 'PF',
	team: 'Denver Nuggets'
}, {
	name: 'Russell Westbrook',
	number: 0,
	position: 'PG',
	team: 'Houston Rockets'
}, {
	name: 'Kevin Durant',
	number: 7,
	position: 'PF',
	team: 'Brooklyn Nets'
}, {
	name: 'James Harden',
	number: 13,
	position: 'PG/SG',
	team: 'Houston Rockets'
}, {
	name: 'Paul George',
	number: 13,
	position: 'SG',
	team: 'Los Angeles Clippers'
}, {
	name: 'Ben Simmons',
	number: 25,
	position: 'PG',
	team: 'Philadelphia 76ers'
}, {
	name: 'Kawhi Leonard',
	number: 2,
	position: 'SG/SF',
	team: 'Los Angeles Clippers'
}, {
	name: 'Joel Embiid',
	number: 21,
	position: 'C',
	team: 'Philadelphia 76ers'
}, {
	name: 'Janis Andetokunmbo',
	number: 34,
	position: 'PF',
	team: 'Milwaukee Bucks'
}, {
	name: 'Stephen Curry',
	number: 30,
	position: 'PG',
	team: 'Golden State Warriors'
}, {
	name: 'Klay Thompson',
	number: 11,
	position: 'SG',
	team: 'Golden State Warriors'
}, {
	name: 'Anthony Davis',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}];

Inputs

InputDescription
maxHeight: numberSets grid max height.
width: numberSets grid width.
autoResizeWidth: booleanWhen true, this will set columns width to fill available space e.g. cover entire web page

Related articles:

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