Row Height

It's possible to set height of each row in the grid.



Example
row-height.component.html
row-height.component.ts
42
42px
Number
Name
Position
Team
8Kobe BryantSGLos Angeles Lakers1Tracy McGradySGHouston Rockets23Lebron JamesPFLos Angeles Lakers3Dwayne WadeSGMiami Heat15Vince CarterSGAtlanta Hawks34Charles BarkleyPFN/A15Nikola JokićPFDenver Nuggets0Russell WestbrookPGHouston Rockets7Kevin DurantPFBrooklyn Nets13James HardenPG/SGHouston Rockets13Paul GeorgeSGLos Angeles Clippers25Ben SimmonsPGPhiladelphia 76ers2Kawhi LeonardSG/SFLos Angeles Clippers21Joel EmbiidCPhiladelphia 76ers34Giannis AntetokounmpoPFMilwaukee Bucks30Stephen CurryPGGolden State Warriors11Klay ThompsonSGGolden State Warriors23Anthony DavisPFLos Angeles Lakers
<gui-grid [columns]="columns"
		  [source]="source"
		  [rowHeight]="42">
</gui-grid>
import { Component } from '@angular/core';

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

@Component({
	templateUrl: './row-height-grid.component.html'
})
export class RowHeightGridComponent {

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

	source = source;

}


Grid Row Height - Inputs

InputTypeDefault valueDescription
rowHeightnumber- Specifies height of each row in the grid. Default value depends on selected theme.

Related articles:

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