Generic UI grid is one of the best data table libraries thanks to its top mechanism for displaying data in tabular format.

It supports features like:

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

In order to display columns, Generic UI grid needs to have columns configured. To achieve that, a columns option has to be specified inside guiGrid jQuery function. The columns takes an array of the configuration objects, each representing a different column. These configuration objects are listed as fallows:

• type - the type of data value,
• field - used to mark data for binding with the data source,
• view - used to change template view of the data cell,
• header - reflects the column header name.

Below you can find basic examples of the configuration options used in guiGrid function.

columns: [{

	header: 'Name',

	field: 'name',

	type: 'string',  		//check tab: GuiDataType

	width: 20,

	view: 'text',  			//check tabs: GuiCellView | ViewTemplateMethod

	summaries: {  		//check tab: GuiColumnSummaries 
		enabled: false
	}

}]

Columns type configuration options:

columns: [
	{
		field: 'number',
		type: 'number'
	}, {
		field: 'Name',
		type: 'string'
	}, {
		field: 'boolean',
		type: 'boolean'
	}, {
		field: 'date',
		type: 'date'
	}
]

Available view options:

columns: [
	{
		field: 'col1',
		view: 'text'
	}, {
		field: 'col2',
		view: 'chip'
	}, {
		field: 'col3',
		view: 'link'
	}, {
		field: 'col4',
		view: 'image'
	}, {
		field: 'col5',
		view: 'bold'
	}, {
		field: 'col6',
		view: 'italic'
	}, {
		field: 'col7',
		view: 'checkbox'
	}, {
		field: 'col8',
		view: 'custom'
	}
]

Summaries configuration example:

columns: [
	{
		header: 'Earnings',
		field: 'earnings',
		summaries: {
			enabled: true,
			summariesTypes: [
				'min',
				'max',
				'sum',
				'average'
			]
		}
	}
]

Custom template example:

columns: [
	{
		header: 'Custom Template',
		field: 'value',
		view: function(cellValue, item) {
			return '<div>' + cellValue + '</div>';
		}
	}
]

The most important property is field, which tells the jQuery function guiGrid how to get value from the provided data.

In this section we will display different types of food using Generic UI grid for jQuery. Our source contains various types of fruits and vegetables, these objects have two properties name and calories. In this example we have constructed our grid, in a way where one column displays fruit/vegetable name and other their calories. The first column is specified as fallows field: 'name' and the other field: 'calories'. The field value must be the same as the value in the source e.g. field:'name' | name: 'Avocado'. This binds both values together, generating the column.

Take a look at the presentation below.

The next equally important configuration is the type. It allows the grid to more effectively recognize the values and enables much more features, including: 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'. So for the next column configuration for calories provide type: '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.

Column of type string, can show values using these display options:

• 'text'
• 'bold'
• 'italic'
• 'chip'
• 'link'
• 'image'

Column of type 'number', can show values using these display options:

• 'text'
• 'bold'
• 'italic'
• 'chip'

Column of type 'boolean', can show values using these display options:

• 'checkbox'
• 'text'
• 'bold'
• 'italic'
• 'chip'

Column of type 'date', can show values using these display options:

• 'text'
• 'bold'
• 'italic'
• 'chip'