{
	"xs": 480, // extra small
	"sm": 768, // small
	"md": 992, // medium
	"lg": 1200 // large
}

The following table shows the default breakpoints and how they apply to a columns visibility at various widths.

<table data-breakpoints='{ "x-small": 480, "small": 768, "medium": 992, "large": 1200, "x-large": 1400 }'>
	...
</table>

$('.table').footable({
	"breakpoints": {
		"x-small": 480,
		"small": 768,
		"medium": 992,
		"large": 1200,
		"x-large": 1400
	}
});

The following table shows the above custom breakpoints and how they would apply to a columns visibility at various widths.

How this option effects breakpoints can best be seen in the following table showing the default breakpoints. However to put it simply, when the current breakpoints columns are hidden, all larger breakpoints columns will be hidden as well. This means you would no longer need to specify xs, sm and md to hide a column at all three breakpoints but could instead just specify md.

<table data-cascade="true">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"cascade": true
	});
});

The last row of the thead element if one exists.

<table>
	<thead>
		...
		<tr>
			<th data-breakpoints="xs">ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th data-breakpoints="xs">Job Title</th>
			<th data-breakpoints="xs sm">Started</th>
			<th data-breakpoints="xs sm md">DOB</th>
		</tr>
	</thead>
	...
</table>

Or the first row of the tbody or table element.

<table>
	<tr>
		<td data-breakpoints="xs">1</td>
		<td>John</td>
		<td>Smith</td>
		<td data-breakpoints="xs">Salesman</td>
		<td data-breakpoints="xs sm">July 4th 2002</td>
		<td data-breakpoints="xs sm md">August 22nd 1982</td>
	</tr>
	...
</table>

$('.table').footable({
	'columns': [
		{ 'breakpoints': 'xs', ... },
		{ },
		{ },
		{ 'breakpoints': 'xs', ... },
		{ 'breakpoints': 'xs sm', ... },
		{ 'breakpoints': 'xs sm md', ... }
	]
});

The value for this option can also be a promise object that resolves supplying an array of the actual column options allowing you to easily load configuration from the server asynchronously.

jQuery(function($){
	$('.table').footable({
		"columns": jQuery.get("//example.com/columns.json")
	});
});

<table data-components='{ "components": { "filtering": "YourCustomFilteringComponent" } }'>
	...
</table>

jQuery(function($){
	$('.table').footable({
		"components": {
			"filtering": YourCustomFilteringComponent
		}
	});
});

<table data-empty="There are no rows">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"empty": "There are no rows"
	});
});

<table data-expand-first="true">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"expandFirst": true
	});
});

<table data-expand-all="true">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"expandAll": true
	});
});

function getWidth(ft){
	if (ft.o.useParentWidth == true) return ft.breakpoints.getParentWidth();
	return ft.breakpoints.getViewportWidth();
}

<table data-get-width="getWidth">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"getWidth": function(ft){
			if (ft.o.useParentWidth == true) return ft.breakpoints.getParentWidth();
			return ft.breakpoints.getViewportWidth();
		}
	});
});

jQuery(function($){
	$('.table').footable({
		"on": {
			"init.ft.table": function(e, ft){
				// bind to the plugin initialize event to do something
			}
		}
	});
});

Which is the equivalent to writing it like the below, the call to initialize footable occurs after binding the events or else you risk any start up event handlers not being called.

jQuery(function($){
	$('.table').on({
		"init.ft.table": function(e, ft){
			// bind to the plugin initialize event to do something
		}
	}).footable();
});

<table class="table">
	...
	<tr>
		<td>1</td>
		<td>Dennise</td>
		<td>Fuhrman</td>
		<td>High School History Teacher</td>
		<td>November 8th 2011</td>
		<td>July 25th 1960</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Elodia</td>
		<td>Weisz</td>
		<td>Wallpaperer Helper</td>
		<td>October 15th 2010</td>
		<td>March 30th 1982</td>
	</tr>
	...
</table>

To supply row options simply apply the CSS classes or attributes directly to the tr element.

<table class="table">
	...
	<tr class="your-css-class" data-expanded="true">
		<td>...</td>
		...
	</tr>
	...
</table>

To supply cell options simply apply the CSS classes or attributes directly to the td element.

<table>
	<tr>
		<td class="your-css-class">1</td>
		<td>John</td>
		<td>Smith</td>
		<td>Salesman</td>
		<td data-value="1320727711718">October 15th 2010</td>
		<td data-value="-297779282564">March 30th 1982</td>
	</tr>
	...
</table>

jQuery(function($){
	$('.table').footable({
		"columns": [
			{ "name": "id", ... },
			{ "name": "firstName", ... },
			{ "name": "lastName", ... },
			{ "name": "jobTitle", ... },
			{ "name": "started", ... },
			{ "name": "dob", ... }
		],
		"rows": [
			{ "id": ..., "firstName": ..., "lastName": ..., "jobTitle": ..., "started": ..., "dob": ... },
			{ "id": ..., ... },
			...
		]
	});
});

To supply row options through JavaScript you must define your row as a simple object containing two properties, options and value, where the value property contains the actual row data.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"options": {
				"expanded": true,
				"classes": "your-css-class"
			},
			"value": {
				"id": 1,
				"firstName": "Dennise",
				"lastName": "Fuhrman",
				"jobTitle": "High School History Teacher",
				"started": "November 8th 2011",
				"dob": "July 25th 1960"
			}
		},{
			...
		}]
	});
});

To supply cell options through JavaScript you must define your cell as a simple object containing two properties, options and value, where the value property contains the actual cell data.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"id": {
				"options": {
					"classes": "your-css-class"
				},
				"value": 1
			},
			"firstName": "Dennise",
			"lastName": "Fuhrman",
			"jobTitle": "High School History Teacher",
			"started": "November 8th 2011",
			"dob": "July 25th 1960"
		},{
			...
		}]
	});
});

Row and cell options may be used at the same time as seen below.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"options": {
				"expanded": true,
				"classes": "your-css-class"
			},
			"value": {
				"id": {
					"options": {
						"classes": "your-css-class"
					},
					"value": 1
				},
				"firstName": "Dennise",
				"lastName": "Fuhrman",
				"jobTitle": "High School History Teacher",
				"started": "November 8th 2011",
				"dob": "July 25th 1960"
			}
		},{
			...
		}]
	});
});

The value for this option can also be a promise object that resolves supplying an array of the actual row objects allowing you to easily load data from the server asynchronously.

jQuery(function($){
	$('.table').footable({
		"rows": jQuery.get("//example.com/rows.json")
	});
});

<table data-show-header="false">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"showHeader": false
	});
});

<table data-show-toggle="false">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"showToggle": false
	});
});

<table data-stop-propagation="true">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"stopPropagation": true
	});
});

<table data-toggle-column="last">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"toggleColumn": "last"
	});
});

<table data-toggle-selector=".footable-toggle">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"toggleSelector": ".footable-toggle"
	});
});

<table data-use-parent-width="true">
	...
</table>

jQuery(function($){
	$('.table').footable({
		"useParentWidth": true
	});
});