Table extras

Table cells can be declared via JSON using verbose syntax. But we can use a different JSON syntax to declare cells with special content. The Table will generate components based on the value of the item property and this can be one of the following.

Button

This function will return the JSON to generate a Button in the Table.

function getbutton(label, name, value) {
	return {
		item: 'Button',
		type: 'ts-secondary ts-micro',
		label: label,
		name: name,
		value: value
	};
}

To conserve browser memory in very large Tables, the onclick callback is not supported. But you can intercept the Button click via the name and value property, you just need to assign the onbutton method to the Table.

  • ts.ui.get('#table1', table => {
	table.rows([
		['Apple', getbutton('Buy this Apple', 'buy', '#123')],
		['Orange', getbutton('Buy that Orange', 'buy', '#456')],
		['Banana', getbutton('Buy the Banana', 'buy', '#789')]
	]);
	table.onbutton = function(name, value, rowindex, cellindex) {
		if(name === 'buy') {
			ts.ui.Notification.success('Product ' + value + ' ordered!');
			table.cell(rowindex, cellindex, getbutton('Cancel order'));
		}
	};
});

The Button value can be anything from strings and numbers and booleans to objects and arrays, if that helps. Just don't assign any functions, because those will be ignored. The value also doubles as a sorting criteria (of the column is sortable), so bear that in mind. Here are the configurable properties of the ButtonModel.

Icon

This function returns the JSON to generate an icon.

function geticon(type, color = 'black') {
	return {
		item: 'Icon',
		type: type,
		color: color
	}
}

The type configures the icon classname and the optional color property can be one of black, medium, red, green, blue and purple.

  • ts.ui.get('#table3', table => {
	table.rows([
		[
			geticon('ts-icon-sales'),
			geticon('ts-icon-cancel', 'medium'),
			geticon('ts-icon-error', 'red'),
			geticon('ts-icon-accept', 'green'),
			geticon('ts-icon-info', 'blue'),
			geticon('ts-icon-favorites', 'purple')
		]
	]);
});

Here are the configurable properties of the IconModel.

This interface may change as we upgrade to SVG icons.

Image

This function returns the JSON to generate an Image.

function getimage(src, width, height) {
	return {
		item: 'Image',
		src: src,
		width: width || 100,
		height: height || 100
	};
}

Note that the width and height properties are mandatory for us to fix the dimensions of the image even before it is loaded. This will prevent the page from jumping around.

  • ts.ui.get('#table4', table => {
	table.rows([
		[
			getimage('assets/image-1.jpg'),
			getimage('assets/image-2.jpg'),
			getimage('assets/image-3.jpg'),
			getimage('assets/image-4.jpg')
		]
	]);
});

We can also declare a boolean property background in the JSON. If set to true, the image will be rendered as a background-image to unlock further processing via CSS (for example via the background-size property). Here are the configurable properties.

Switch

This function returns the JSON to generate a Switch.

function getswitch(name, value, checked) {
	return {
		item: 'Switch',
		name: name,
		value: value,
		checked: checked
	}
}

The Switch is the checkbox that looks like some kind of switch.

  • ts.ui.get('#table2', table => {
	table.rows([
		['Spam mails', getswitch('toggle', '#123', true)],
		['Prank calls', getswitch('toggle', '#456', true)],
		['House visits', getswitch('toggle', '#789', false)]
	]);
	table.onswitch = function(name, value, checked, rowindex, cellindex) {
		if(name === 'toggle') {
			var status = checked ? 'enabled' : 'disabled';
			ts.ui.Notification.success('Service ' + value + ' ' + status);
		}
	};
});

TODO: We could need a layout feature to fix the width of the switch column.

Here are the configurable properties of the SwitchModel.

UserImage

This function returns the JSON to generate a UserImage.

function getuserimage(name, src) {
	return {
		item: 'UserImage',
		name: name,
		src: src
	};
}

If you like, you can also specify a size to adjust the width and height of the image.

  • ts.ui.get('#table5', table => {
	table.rows([
		[
			getuserimage('Jim Bob Johnson', 'assets/jim.png'),
			getuserimage('Karl Benson'),
			getuserimage('Marshall Garrett'),
			getuserimage('Kelvin Castro')
		]
	]);
});

Here are the properties of the UserImage.