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 Bryant
SG
Los Angeles Lakers
1
Tracy McGrady
SG
Houston Rockets
23
Lebron James
PF
Los Angeles Lakers
3
Dwayne Wade
SG
Miami Heat
15
Vince Carter
SG
Atlanta Hawks
34
Charles Barkley
PF
N/A
15
Nikola Jokić
PF
Denver Nuggets
0
Russell Westbrook
PG
Houston Rockets
7
Kevin Durant
PF
Brooklyn Nets
13
James Harden
PG/SG
Houston Rockets
13
Paul George
SG
Los Angeles Clippers
25
Ben Simmons
PG
Philadelphia 76ers
2
Kawhi Leonard
SG/SF
Los Angeles Clippers
21
Joel Embiid
C
Philadelphia 76ers
34
Giannis Antetokounmpo
PF
Milwaukee Bucks
30
Stephen Curry
PG
Golden State Warriors
11
Klay Thompson
SG
Golden State Warriors
23
Anthony Davis
PF
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'
}];

API - Inputs

InputTypeDefaultDescription
maxHeightnumber''Sets grid max height.
widthnumber''Sets grid width.
autoResizeWidthbooleanfalseWhen 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.