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.

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.

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

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:

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.

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.

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'

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'

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'

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'