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
GuiColumnAggregation
ViewTemplateMethod
>
interface GuiColumn {

	field?: string | FieldAccessor;

	type?: string | GuiDataType;

	view?: string | GuiCellView | ViewTemplateMethod;

	header?: string;

	customTemplate?: string;

	width?: string | number;

	aggregation?: GuiColumnAggregation;
}
enum GuiDataType {
	UNKNOWN,
	NUMBER,
	STRING,
	BOOLEAN,
	DATE,
	CUSTOM
}
enum GuiCellView {
	TEXT,
	CHIP,
	LINK,
	IMAGE,
	BOLD,
	ITALIC,
	CHECKBOX,
	CUSTOM
}
interface GuiColumnAggregation {

	enabled?: boolean;

	aggregationTypes?: Array<any>;
}
type ViewTemplateMethod = (cellValue: 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
Avocado 160 Bananas 89 Pears 81 Celery 16 Radish 16 Strawberries 32
@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
Avocado AvocadoAvocado Avocado https://en.wikipedia.org/wiki/Avocado Bananas BananasBananas Bananas https://en.wikipedia.org/wiki/Banana Pears PearsPears Pears https://en.wikipedia.org/wiki/Pear Celery CeleryCelery Celery https://en.wikipedia.org/wiki/Celery Radish RadishRadish Radish https://en.wikipedia.org/wiki/Radish Strawberry StrawberryStrawberry Strawberry https://en.wikipedia.org/wiki/Strawberry
@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
160 160160 160 89 8989 89 81 8181 81 16 1616 16 16 1616 16 32 3232 32
@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
true truetrue true true truetrue true true truetrue true false falsefalse false false falsefalse false true truetrue true
@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
2019/01/31 2019/01/312019/01/31 2019/01/31 2019/01/29 2019/01/292019/01/29 2019/01/29 2019/11/14 2019/11/142019/11/14 2019/11/14 2019/12/09 2019/12/092019/12/09 2019/12/09 2019/02/24 2019/02/242019/02/24 2019/02/24 2019/05/06 2019/05/062019/05/06 2019/05/06
@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: '2019/01/31'
}, {
	name: 'Bananas',
	bestBy: '2019/01/29'
}, {
	name: 'Pears',
	bestBy: '2019/11/14'
}, {
	name: 'Celery',
	bestBy: '2019/12/09'
}, {
	name: 'Radish',
	bestBy: '2019/02/24'
}, {
	name: 'Strawberries',
	bestBy: '2019/05/06'
}];

Inputs

NameDescription
@Input()
columns: Array<Column>
interface Column { header?: string | HeaderTemplate; field?: string | ElementData; template?: string | ColumnType; width?: string | number; }
header?: string | HeaderTemplate; Sets value of column header.
field?: string | ElementData; Specifies how to get value from data.
template?: string | ColumnType; Which template will be used to display value.
width?: string | number; Column width. By default it is set to 'auto'. It can be specified in number which relates to pixels or in percentage scale.

Related articles:

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