Grid rows

This guide covers grid rows functions. They allow you to define how rows should be structured, including horizontal grid, vertical grid and row coloring. The rows can be colored in three different schemes: even, odd or no coloring at all. It is simple and easy just use one of the inputs in the <gui-grid> selector. Row coloring can be specified as a string ('odd') or an enum (GuiRowColoring.ODD). See the 'Grid rows' tab below.


Grid rows
rowColoring: string
rowColoring: GuiRowColoring
horizontalGrid: boolean;

verticalGrid: boolean;

rowColoring: string | GuiRowColoring;
rowColoring = 'none'

rowColoring = 'odd'

rowColoring = 'even'
rowColoring: GuiRowColoring = GuiRowColoring.NONE

rowColoring: GuiRowColoring = GuiRowColoring.ODD

rowColoring: GuiRowColoring = GuiRowColoring.EVEN


On the example below you can check following functions:

  • Horizontal grid
  • Vertical grid
  • Row coloring:
    • None
    • Odd
    • Even

Rows example
app.component.html
app.component.ts
Number
Name
Position
Team
8 Kobe BryantSGLos Angeles Lakers 1 Tracy McGradySGHouston Rockets 23 Lebron JamesPFLos Angeles Lakers 3 Dwayne WadeSGMiami Heat 15 Vince CarterSGAtlanta Hawks 34 Charles BarkleyPFN/A 15 Nikola JokićPFDenver Nuggets 0 Russell WestbrookPGHouston Rockets 7 Kevin DurantPFBrooklyn Nets 13 James HardenPG/SGHouston Rockets 13 Paul GeorgeSGLos Angeles Clippers 25 Ben SimmonsPGPhiladelphia 76ers 2 Kawhi LeonardSG/SFLos Angeles Clippers 21 Joel EmbiidCPhiladelphia 76ers 34 Giannis AntetokounmpoPFMilwaukee Bucks 30 Stephen CurryPGGolden State Warriors 11 Klay ThompsonSGGolden State Warriors 23 Anthony DavisPFLos Angeles Lakers
<gui-grid [source]="source"
		  [columns]="columns"
		  [rowColoring]="rowColoring"
		  [horizontalGrid]="horizontalGrid"
		  [verticalGrid]="verticalGrid"
		  [theme]="'Generic'">
</gui-grid>
import { Component } from '@angular/core';
import { source } from './source';
import { GuiCellView, GuiRowColoring } from '@generic-ui/ngx-grid';

@Component({
	selector: 'docs-row-grid',
	templateUrl: './docs-row-grid.component.html'
})
export class DocsRowGridComponent {

	horizontalGrid: boolean = true;

	verticalGrid: boolean = true;

	rowColoring: GuiRowColoring = GuiRowColoring.NONE;

	columns = [{
		header: 'Number',
		field: 'number',
		type: 'number',
		width: 80
	}, {
		header: 'Name',
		field: 'name',
		view: 'italic'
	}, {
		header: 'Position',
		field: 'position',
		view: 'bold',
		width: 100
	}, {
		header: 'Team',
		field: 'team'
	}];

	source = source;
}


Inputs

InputTypeDefault valueDescription
horizontalGridbooleantrue Enables horizontal lines that separate rows within the grid.
verticalGridbooleantrue Enables vertical lines that separate columns within the grid.
rowColoringstring | GuiRowColoringGuiRowColoring.EVENApplies colored shading to the grid rows. Available shading options: even, odd, none.

Related articles:

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