Columns

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.

Columns Configuration

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.

GuiColumn
GuidDataType
GuiCellView
GuiColumnSummaries
ViewTemplateMethod
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) {
			return '<div>' + cellValue + '</div>';
		}
	}
]

Field

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.

Food Example
field-food.js
food.html
$('#jquery-food-field-grid').guiGrid({
	columns: [{
		field: 'name',
		header: 'Name'
	}, {
		field: 'calories',
		header: 'Calories'
	}],
	source: [{
		name: 'Avocado',
		calories: 160
	}, {
		name: 'Bananas',
		calories: 89
	}, {
		name: 'Pears',
		calories: 81
	}, {
		name: 'Celery',
		calories: 16
	}, {
		name: 'Radish',
		calories: 16
	}, {
		name: 'Strawberries',
		calories: 32
	}]
)};
<div id="jquery-food-field-grid"></div>

DataTypes

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.

View

Generic UI offers various templates for the data values inside grid cells. Property view is related to column type, because the different types have different display options e.g. if you want to display the value of type: 'boolean' as a 'checkbox', you can achieve that by adding view: 'checkbox' to the column property. Whereas, you cannot use checkbox to display column of type number. Below you can see a table with all the relations, between types and views.
view \ typeSTRINGNUMBERBOOLEANDATE
TEXT
BOLD
ITALIC
BADGE
CHECKBOX
LINK
IMAGE

Column type String

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

  • 'text'
  • 'bold'
  • 'italic'
  • 'chip'
  • 'link'
  • 'image'
String Example
string-food.js
food.js
$('#jquery-food-string-grid').guiGrid({
	columns: [{
		header: 'Text',
		field: 'name',
		type: 'string',
		view: 'text'
	}, {
		header: 'Italic',
		field: 'name',
		type: 'string',
		view: 'italic'
	}, {
		header: 'Bold',
		field: 'name',
		type: 'string',
		view: 'bold'
	}, {
		header: 'Chip',
		field: 'name',
		type: 'string',
		view: 'chip'
	}, {
		header: 'Link',
		field: 'wiki',
		type: 'string',
		view: 'link'
	}, {
		header: 'Image',
		field: 'image',
		type: 'string',
		view: '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

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

  • 'text'
  • 'bold'
  • 'italic'
  • 'chip'
Number Example
number-food.js
food.js
$('#jquery-food-number-grid').guiGrid({
	columns: [{
		header: 'Text',
		field: 'calories',
		type: 'number',
		view: 'text'
	}, {
		header: 'Italic',
		field: 'calories',
		type: 'number',
		view: 'italic'
	}, {
		header: 'Bold',
		field: 'calories',
		type: 'number',
		view: 'bold'
	}, {
		header: 'Chip',
		field: 'calories',
		type: 'number',
		view: '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

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

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

Column type Date

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

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

Columns - options

OptionsTypeDefaultDescription
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:

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