Grid Overview
Quick start
Basics
Installation
Angular CLI
Nx Angular CLI
Columns
Column template
Column menu
Column width
Column header
Column align
Column formatter
Column highlight
New
Data source
Remote Data
Loading
Rows
Row height
Row select
Row styling
Row detail
Size
Pagination
Sorting
Searching
Filtering
Summaries
Cell editing
Virtual scroll
Themes
Theme manager
Title & footer panel
Info panel
Localization
API
Options
Browser support
Contact

Columns

Generic UI grid is one of the best data table libraries thanks to the top features like data presentation in the columns.

It supports features like:

  • templating (custom templates the table cells),
  • sorting,
  • calculating summaries,
  • specifying sizes,
  • built-in cell editing.

Columns Configuration

In order for the grid to be able to display columns, you need to configure them. The grid component has an input called columns which takes an array of the configuration objects, each representing a different column. These configuration objects have to implement interface GuiColumn. It provides to the grid very important information. Below is the list of these objects:

  • type - data type of the grid cell value,
  • field - links the column with the specific data source value,
  • view - used for different templates of the column cells,
  • header - refers to the column header name.
GuiColumn
GuidDataType
GuiCellView
GuiColumnSummaries
ViewTemplateMethod
export interface GuiColumn {

	name?: string;

	field?: string | FieldAccessor;

	type?: string | GuiDataType;

	view?: string | GuiCellView | ViewTemplateFunction;

	header?: string | ViewTemplateFunction;

	width?: string | number;

	enabled?: boolean;

	align?: string | GuiColumnAlign;

	summaries?: GuiColumnSummaries;

	sorting?: boolean | GuiColumnSorting;

	cellEditing?: boolean | GuiColumnCellEditing;

	formatter?: (item: any, index: number) => any;

	matcher?: (item: any) => any;

	cssClasses?: string;

	styles?: string;

}
enum GuiDataType {
	UNKNOWN,
	NUMBER,
	STRING,
	BOOLEAN,
	DATE,
	CUSTOM
}
enum GuiCellView {
	TEXT,
	CHIP,
	LINK,
	IMAGE,
	BOLD,
	ITALIC,
	CHECKBOX,
	CUSTOM
}
interface GuiColumnSummaries {

	enabled?: boolean;

	summariesTypes?: Array<any>;
}
type ViewTemplateMethod = (cellValue: any, item: any) => string

Field

The most important property is field, which tells the grid component how to get value from the provided data.

Let's try to display different types of food with the data grid component. In the food.ts, we have objects of different types of fruits and vegetables. These objects have two properties: name and calories . In one column we would like to show name and in the next one number of calories. Therefore, in the columns input we shall specify two columns, that refers to the name and calories. In the first column we should add field: 'name' and in the next one field: 'calories'. Take a look at the example below:

Food Example
food.component.ts
food.ts
Name
Calories
@Component({
	selector: 'columns-field',
	template: `
		<gui-grid [source]="source"
				  [columns]="columns">
		</gui-grid>
	`
})
export class DocsColumnsFieldComponent {

	source = food;

	columns = [{
		field: 'name',
		header: 'Name'
	}, {
		field: 'calories',
		header: 'Calories'
	}];

}
const food = [{
	name: 'Avocado',
	calories: 160
}, {
	name: 'Bananas',
	calories: 89
}, {
	name: 'Pears',
	calories: 81
}, {
	name: 'Celery',
	calories: 16
}, {
	name: 'Radish',
	calories: 16
}, {
	name: 'Strawberries',
	calories: 32
}];

DataTypes

The next important information to provide is the type of column. It allows the grid to better recognize the value and enables features editing, sorting, summaries, templating, filtering, searching, and others. In our food example, the property name is of type string so in the column configuration we should pass value 'string' | GuiDataType.STRING. You can provide either string values or use enum GuiDataType. So for the next column configuration for calories provide type: 'number' or GuiDataType.NUMBER.

The column configuration type is deeply related to the cell editing of the presented data. We recommend seeing the guide on enabling data editing in Generic UI grid.

View

The grid allows using different templates to display values inside row cells. Property view is related to type because the different types can be displayed by different templates e.g. when you want to display the value of type: 'boolean', you can do it by using view: 'checkbox', but you cannot use same view checkbox for displaying the value of type number. Below you can check all the relations, between the column type and available view option.
view \ typeGuiDataType.STRINGGuiDataType.NUMBERGuiDataType.BOOLEANGuiDataType.DATE
GuiCellView.TEXT
GuiCellView.BOLD
GuiCellView.ITALIC
GuiCellView.BADGE
GuiCellView.CHECKBOX
GuiCellView.LINK
GuiCellView.IMAGE

Column type String

For column of type GuiDataType.STRING, according to the relation table above we can use views:

  • GuiCellView.TEXT or 'text'
  • GuiCellView.BOLD or 'bold'
  • GuiCellView.ITALIC or 'italic'
  • GuiCellView.CHIP or 'chip'
  • GuiCellView.LINK or 'link'
  • GuiCellView.IMAGE or 'image'
String Example
string-food.component.ts
food.ts
GuiCellView.TEXT
GuiCellView.ITALIC
GuiCellView.BOLD
GuiCellView.CHIP
GuiCellView.LINK
GuiCellView.IMAGE
@Component({
	selector: 'columns-cell-view-string',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source" >
		</gui-grid>
	`
})
export class DocsColumnsStringComponent {

	columns = [{
		header: 'GuiCellView.TEXT',
		field: 'name',
		type: GuiDataType.STRING,
		view: GuiCellView.TEXT
	}, {
		header: 'GuiCellView.ITALIC',
		field: 'name',
		type: GuiDataType.STRING,
		view: GuiCellView.ITALIC
	}, {
		header: 'GuiCellView.BOLD',
		field: 'name',
		type: GuiDataType.STRING,
		view: GuiCellView.BOLD
	}, {
		header: 'GuiCellView.CHIP',
		field: 'name',
		type: GuiDataType.STRING,
		view: GuiCellView.CHIP
	}, {
		header: 'GuiCellView.LINK',
		field: 'wiki',
		type: GuiDataType.STRING,
		view: GuiCellView.LINK
	}, {
		header: 'GuiCellView.IMAGE',
		field: 'image',
		type: GuiDataType.STRING,
		view: GuiCellView.IMAGE
	}];

	source = food;
}
const food = [{
	name: 'Avocado',
	wiki: 'https://en.wikipedia.org/wiki/Avocado',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}, {
	name: 'Bananas',
	wiki: 'https://en.wikipedia.org/wiki/Banana',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/d/de/Bananavarieties.jpg/220px-Bananavarieties.jpg'
}, {
	name: 'Pears',
	wiki: 'https://en.wikipedia.org/wiki/Pear',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Pears.jpg/220px-Pears.jpg'
}, {
	name: 'Celery',
	wiki: 'https://en.wikipedia.org/wiki/Celery',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Illustration_Apium_graveolens0.jpg/220px-Illustration_Apium_graveolens0.jpg'
}, {
	name: 'Radish',
	wiki: 'https://en.wikipedia.org/wiki/Radish',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Radish_3371103037_4ab07db0bf_o.jpg/220px-Radish_3371103037_4ab07db0bf_o.jpg'
}, {
	name: 'Strawberry',
	wiki: 'https://en.wikipedia.org/wiki/Strawberry',
	image: '//upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Strawberry_BNC.jpg/220px-Strawberry_BNC.jpg'
}];

Column type Number

For column of type GuiDataType.NUMBER, according to the relation table above we can use views:

  • GuiCellView.TEXT or 'text'
  • GuiCellView.BOLD or 'bold'
  • GuiCellView.ITALIC or 'italic'
  • GuiCellView.CHIP or 'chip'
Number Example
number-food.component.ts
food.ts
GuiCellView.TEXT
GuiCellView.ITALIC
GuiCellView.BOLD
GuiCellView.CHIP
@Component({
	selector: 'columns-number',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source" >
		</gui-grid>
	`
})
export class DocsColumnsNumberComponent {

	columns = [{
		header: 'GuiCellView.TEXT',
		field: 'calories',
		type: GuiDataType.NUMBER,
		view: GuiCellView.TEXT
	}, {
		header: 'GuiCellView.ITALIC',
		field: 'calories',
		type: GuiDataType.NUMBER,
		view: GuiCellView.ITALIC,
	}, {
		header: 'GuiCellView.BOLD',
		field: 'calories',
		type: GuiDataType.NUMBER,
		view: GuiCellView.BOLD,
	}, {
		header: 'GuiCellView.CHIP',
		field: 'calories',
		type: GuiDataType.NUMBER,
		view: GuiCellView.CHIP,
	}];

	source = food;

}
const food = [{
	name: 'Avocado',
	calories: 160
}, {
	name: 'Bananas',
	calories: 89
}, {
	name: 'Pears',
	calories: 81
}, {
	name: 'Celery',
	calories: 16
}, {
	name: 'Radish',
	calories: 16
}, {
	name: 'Strawberries',
	calories: 32
}];

Column type Boolean

For column of type GuiDataType.BOOLEAN, according to the relation table above we can use views:

  • GuiCellView.CHECKBOX or 'checkbox'
  • GuiCellView.TEXT or 'text'
  • GuiCellView.BOLD or 'bold'
  • GuiCellView.ITALIC or 'italic'
  • GuiCellView.CHIP or 'chip'
Boolean Example
boolean-food.component.ts
food.ts
GuiCellView.TEXT
GuiCellView.ITALIC
GuiCellView.BOLD
GuiCellView.CHIP
GuiCellView.CHECKBOX
@Component({
	selector: 'columns-number',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source" >
		</gui-grid>
	`
})
export class DocsColumnsNumberComponent {

	columns = [{
		header: 'GuiCellView.TEXT',
		field: 'isFruit',
		type: GuiDataType.BOOLEAN,
		view: GuiCellView.TEXT
	}, {
		header: 'GuiCellView.ITALIC',
		field: 'isFruit',
		type: GuiDataType.BOOLEAN,
		view: GuiCellView.ITALIC,
	}, {
		header: 'GuiCellView.BOLD',
		field: 'isFruit',
		type: GuiDataType.BOOLEAN,
		view: GuiCellView.BOLD,
	}, {
		header: 'GuiCellView.CHIP',
		field: 'isFruit',
		type: GuiDataType.BOOLEAN,
		view: GuiCellView.CHIP,
	}, {
		header: 'GuiCellView.CHECKBOX',
		field: 'isFruit',
		type: GuiDataType.BOOLEAN,
		view: GuiCellView.CHECKBOX,
	}];

	source = food;

}
const food = [{
	name: 'Avocado',
	isFruit: true
}, {
	name: 'Bananas',
	isFruit: true
}, {
	name: 'Pears',
	isFruit: true
}, {
	name: 'Celery',
	isFruit: false
}, {
	name: 'Radish',
	isFruit: false
}, {
	name: 'Strawberries',
	isFruit: true
}];

Column type Date

For column of type GuiDataType.DATE, according to the relation table above we can use views:

  • GuiCellView.TEXT or 'text'
  • GuiCellView.BOLD or 'bold'
  • GuiCellView.ITALIC or 'italic'
  • GuiCellView.CHIP or 'chip'
Date Example
date-food.component.ts
food.ts
GuiCellView.TEXT
GuiCellView.ITALIC
GuiCellView.BOLD
GuiCellView.CHIP
@Component({
	selector: 'columns-cell-view-date',
	template: `
		<gui-grid [columns]="columns"
				  [source]="source" >
		</gui-grid>
	`
})
export class DocsColumnsStringComponent {

	columns = [{
		header: 'GuiCellView.TEXT',
		field: 'bestBy',
		type: GuiDataType.DATE,
		view: GuiCellView.TEXT
	}, {
		header: 'GuiCellView.ITALIC',
		field: 'bestBy',
		type: GuiDataType.DATE,
		view: GuiCellView.ITALIC,
	}, {
		header: 'GuiCellView.BOLD',
		field: 'bestBy',
		type: GuiDataType.DATE,
		view: GuiCellView.BOLD,
	}, {
		header: 'GuiCellView.CHIP',
		field: 'bestBy',
		type: GuiDataType.DATE,
		view: GuiCellView.CHIP,
	}];

	source = food;
}
const food = [{
	name: 'Avocado',
	bestBy: new Date('2019/01/31')
}, {
	name: 'Bananas',
	bestBy: new Date('2019/01/29')
}, {
	name: 'Pears',
	bestBy: new Date('2019/11/14')
}, {
	name: 'Celery',
	bestBy: new Date('2019/12/09')
}, {
	name: 'Radish',
	bestBy: new Date('2019/02/24')
}, {
	name: 'Strawberries',
	bestBy: new Date('2019/05/06')
}];

Columns - Inputs

InputTypeDefaultDescription
columns Array<{}>[] The columns options dictate what data is displayed inside columns cells, also provides other configuration choices like: width, view, header, summaries etc.
field string- Binds specific data value with the source.
typestring'string'Prepares the column cells for particular data type values: 'number', 'string', 'boolean' 'date'.
header string- Specifies column header name.
view string- Changes display option of a grid cell to e.g. 'Checkbox', 'Bold', 'Italic' or custom template.
customTemplate string or function() {}- Custom template used to render cell in the column.
width string | number- The column width by default it is set to 'auto'. It can be specified in number which relates to pixels or in percentage scale.
summaries {}- Summaries calculated for the column.

Related articles: