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.
Number
Name
Position
Team
<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
Input | Type | Default | Description |
---|---|---|---|
maxHeight | number | '' | Sets grid max height. |
width | number | '' | Sets grid width. |
autoResizeWidth | boolean | false | When true, this will set columns width to fill available space e.g. cover entire web page |