Specify Column Width

var columns = [
	{id: "id", name: "ID", field: "id", width : 50},
	{id: "email", name: "Email", field: "email", width : 300},
	{id: "state", name: "State", field: "state", width : 150, formatter : this.stateFormat},
	{id: "city", name: "City", field: "city", width : 150},
];

The width values are in px

Cell Formatting

Let's say you want to format the State column. The format option is used to specify the format function that will return the formatted value. Here is the example -

// Options --
var columns = [
	{id: "id", name: "ID", field: "id", width : 50},
	{id: "email", name: "Email", field: "email", width : 300},
	{id: "state", name: "State", field: "state", width : 150, formatter : this.stateFormat},
	{id: "city", name: "City", field: "city", width : 150},
];

// Format Function
function stateFormat(row, cell, value, columnDef, dataContext){
	if (value == 'Delhi') {
		return `<div style="background-color:red;">`+ value +`</div>`;
	}else{
		return value;
	}
}

Adding a class to a Column

If you want to apply a CSS rule to a column use cssClass option in column configuration.

	var columns = [
		{id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title"},
		{id: "priority", name: "Priority", field: "priority", width: 80}
	];

Handling Cell Clicking

grid.onClick.subscribe(function (e) {
	var cell = grid.getCellFromEvent(e);
	let rowNumber = cell.row;
	let columnNumber = cell.cell;
	if (columnNumber == 2) {
		// Updating the data Object --
		AllRows[rowNumber].state = "Sangram";

		// After you update the Object you should update the Grid as well. This is how it is done -
		grid.updateRow(rowNumber);
		e.stopPropagation();
	}
});