Object columns

When specifying an object column the default formatter simply outputs the JSON.stringify() result of the supplied object. This column is meant to be used in conjunction with a custom formatter/parser to achieve your desired results.

The below shows a basic object column where the cell value is a valid JSON string, including quotes around property names, that describes parameters for satyr.io's image API. The custom formatter transforms the parsed object into an <img/> to be used as the cell contents.

Image
{"theme":1,"width":200,"height":200}
{"theme":2,"width":200,"height":300}
{"theme":3,"width":200,"height":100}

function satyrFormatter(value){
	if (value){
		return '<img src="http://satyr.io/'+value.width+'x'+value.height+'/'+value.theme+'"/>';
	}
	return "";
}

<table id="object-column-example-1" class="table">
	<thead>
		<tr>
			<th data-type="object" data-formatter="satyrFormatter">satyr.io Image</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{"theme":1,"width":200,"height":200}</td>
		</tr>
		<tr>
			<td>{"theme":2,"width":200,"height":300}</td>
		</tr>
		<tr>
			<td>{"theme":3,"width":200,"height":100}</td>
		</tr>
	</tbody>
</table>

The object can also be supplied using the data-value attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-type="object" data-formatter="satyrFormatter">...</th>
			...
		</tr>
	</thead>
	<tr>
		<td data-value='{"theme":1,"width":200,"height":200}'></td>
	</tr>
	...
</table>

Implementing an object column through the options requires the column's type option be set to "object" and that the name of the column matches an object property in the row data. The formatter option should also be supplied to create your cell contents.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"type": "object",
			"name": "satyr",
			"formatter": function(value){
				if (value){
					return '<img src="http://satyr.io/'+value.width+'x'+value.height+'/'+value.theme+'"/>';
				}
				return "";
			}
			...
		},{
			...
		}],
		"rows": [{
			"satyr": {
				"theme": 1,
				"width": 200,
				"height": 200
			},
			...
		},{
			...
		}]
	});
});

Options, how to use, and basic examples for object columns.

Options

Examples