Getting started

An overview of FooTable, how to download and use, and basic examples.

 Download

FooTable has a few easy and quick ways to get started. There is a Bootstrap version which adheres to your current Bootstrap theme. A standalone version for those of you who do not want to use Bootstrap, and finally there is a download which contains each individual component used to create both the Bootstrap and standalone versions.

Bootstrap Version

Compiled and minified CSS and JavaScript for use with Bootstrap.

Download

Standalone Version

Compiled and minified CSS and JavaScript for standalone use (no Bootstrap).

Download

Individual Components

Compiled and minified CSS and JavaScript for all components of FooTable.

Download

 What's included

FooTable is downloadable in three forms, within each you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

Required files

  • Please note that FooTable requires jQuery to be included.
  • For date support FooTable requires moment.js to be included.

Once downloaded, unzip the compressed folder to see the structure of the Bootstrap version. You'll see something like this:

footable/
├── css/
│   ├── footable.bootstrap.css
│   └── footable.bootstrap.min.css
└── js/
    ├── footable.js
    └── footable.min.js

This is the easiest way to use FooTable; precompiled files for quick drop-in usage with Bootstrap. We provide compiled CSS and JS (footable.*), as well as compiled and minified CSS and JS (footable.*.min.*). This version will adhere to the Bootstrap theme that is currently loaded into the page on the condition that the theme supports tables, dropdowns, pagination and forms.

Bootstrap required

Please note that when using this version FooTable requires Bootstrap to be included.

Once downloaded, unzip the compressed folder to see the structure of the standalone version. You'll see something like this:

footable/
├── css/
│   ├── footable.standalone.css
│   └── footable.standalone.min.css
└── js/
    ├── footable.js
    └── footable.min.js

This is the second easiest way to use FooTable; precompiled files for quick drop-in usage. We provide compiled CSS and JS (footable.*), as well as compiled and minified CSS and JS (footable.*.min.*). This version does not have theme support and will require custom CSS to override any styling.

FontAwesome required

Please note that when using this version FooTable requires FontAwesome to be included for icons. If you need a truly stand alone version with no dependencies then you should take a look at the FooTable.FontAwesome.css and FooTable.Glyphicons.css files in the GitHub repo and create your own custom icons.

Once downloaded, unzip the compressed folder to see the structure of the components version. You'll see something like this:

footable/
├── css/
│   ├── footable.core.bootstrap.css
│   ├── footable.core.bootstrap.min.css
│   ├── footable.core.standalone.css
│   ├── footable.core.standalone.min.css
│   ├── footable.filtering.css
│   ├── footable.filtering.min.css
│   ├── footable.paging.css
│   ├── footable.paging.min.css
│   ├── footable.sorting.css
│   └── footable.sorting.min.css
└── js/
    ├── footable.core.js
    ├── footable.core.min.js
    ├── footable.filtering.js
    ├── footable.filtering.min.js
    ├── footable.paging.js
    ├── footable.paging.min.js
    ├── footable.sorting.js
    └── footable.sorting.min.js

This is the most complicated method of using FooTable, however it provides the ability to tailor the plugin to your needs by leaving out components that you will not use. We provide compiled CSS and JS (footable.*), as well as compiled and minified CSS and JS (footable.*.min.*) of all components that make up FooTable.

Required files

When using the individual components FooTable requires footable.core.js and then either the footable.core.bootstrap.css OR footable.core.standalone.css files or there minified equivalents to be included.

Note

When including components such as sorting its JavaScript and CSS files should be included after the core files mentioned above.

 Options

FooTable is designed to work from an HTML first perspective meaning options parsed from the DOM take precedence over those supplied through JavaScript. Check the individual components documentation for more information on there specific options.

General options

 

breakpoints object

The object that defines what the breakpoints are that columns use to determine there visibility.

This is a simple object containing a key value structure of breakpoint names and there associated widths. Apart from the breakpoints supplied via this option there is also a built in one called all which will simply always hide a column and display it in the details row.

null

If no breakpoints are provided the plugin falls back to the below defaults.

{
	"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.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
all
xs Visible Visible Visible
sm Visible Visible Visible
md Visible Visible Visible
lg Visible Visible Visible

To supply custom breakpoints through data attributes you must follow valid JSON syntax including quoted property names.

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

The below shows how to supply custom breakpoints directly through the options.

$('.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.

Extra small devices Phones (<480px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Extra large devices Wide Screen (≥1400px)
all
x-small Visible Visible Visible Visible
small Visible Visible Visible Visible
medium Visible Visible Visible Visible
large Visible Visible Visible Visible
x-large Visible Visible Visible Visible

Notes

  • The built in all breakpoint can not be overridden, it will always hide the column regardless of what is supplied through the options.
  • The cascade option will also work with custom breakpoints.
 

cascade boolean

Changes how breakpoints affect column visibility.

false

When set to true this makes specifying a columns breakpoints a bit simpler if you do not need to reshow the column again on a smaller device.

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.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
all
xs Visible Visible Visible
sm Visible Visible
md Visible
lg

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

columns array | promise

An array of simple objects containing the various column options supported by the plugin.

[]

This is a required option, at the very least a single column must supply a breakpoints value otherwise the table will be ignored by the plugin.

When using static content column options must be supplied as data attributes on the cells of one of the following rows. The below is also the order in which the plugin checks the rows and if the first contains any options the second will be skipped.

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>

The columns must be supplied as an array of objects where the index matches that of where each should appear in the table. In the below the second and third columns have no options set so an empty object is supplied as a placeholder to maintain the correct index for all columns that follow.

$('.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")
	});
});
 

empty string

The text to display if the table contains no rows.

"No Results"

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

expandFirst boolean

Whether or not to expand the first rows details.

false

When set to true this will automatically expand the first row of the table when displayed on a device that hides any columns.

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

Note

If you want to have multiple rows expanded by default please take a look at the row expanded option.

 

expandAll boolean

Whether or not to all rows details.

false

When set to true this will automatically expand all rows of the table when displayed on a device that hides any columns.

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

Note

If you want to have multiple rows expanded by default please take a look at the row expanded option.

 

getWidth function

The function used to retrieve the width used during breakpoint calculations.

null

If no function is supplied the plugin falls back to using it's own internal functions to calculate the width depending on the value of the useParentWidth option. The below examples show what the internal function would look like implemented through this option.

To supply the function through data attributes it must be defined as a named JavaScript function with the name supplied as the attribute value.

function getWidth(ft){
	if (ft.o.useParentWidth == true) return ft.breakpoints.getParentWidth();
	return ft.breakpoints.getViewportWidth();
}
<table data-get-width="getWidth">
	...
</table>

The below shows how to supply this function directly through the options.

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

Note

The first argument (ft) passed to this function is the current instance of the plugin requesting the width.

 

on object

An object containing event names and handlers to bind to the table.

This simply binds events to the table ensuring that the various components start up events such as preinit.ft.table or init.ft.table are bound before they are raised. This option is an object in which the keys represent one or more space separated events and the values represent a handler function to be called for those events.

null

The below shows supplying the object directly through the options.

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();
});

Note

There is no static content equivalent to the this option, it must be supplied directly through the options.

 

rows array | promise

An array of simple objects containing the row data and/or options.

[]

If no rows are supplied the value of the empty option will be displayed.

When supplying rows through static content the tr elements of the table or tbody are parsed using the column options into an array of row objects.

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

When supplying rows directly through the options the property names on the row object must match up to the names of the columns.

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")
	});
});
 

showHeader boolean

Whether or not to display a header row in the table.

true

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

Note

For more information on using this option please see the Table with no header example.

 

showToggle boolean

Whether or not to display the row toggle when a column is hidden.

true

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

stopPropagation boolean

Stops all events raised by the plugin from bubbling up the DOM past the table.

false

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

toggleColumn string

A string specifying which column the toggle is appended to in a row.

"first"

This option only supports two values; "first" and "last".

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

toggleSelector string

A string specifying the CSS selector used to filter row click events.

"tr,td,.footable-toggle"

If the event.target property matches the selector the row will be toggled. With the default selector any clicks directly on the row, a cell in the row or the FooTable toggle element will trigger the toggling of the row.

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

useParentWidth boolean

Changes breakpoints to rather calculate width based on the parent element instead of the viewport.

false

To supply this option through data attributes you must specify the attribute on the table element.

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

The below shows how to supply the value directly through the options.

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

 Column options

 

breakpoints string

A space separated string of breakpoint names specifying when this columns cells should be hidden and displayed in a detail row.

null

By default the column is displayed on all devices.

To supply this option through data attributes you must specify the attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-breakpoints="xs">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"breakpoints": "xs"
		},{
			...
		}]
	});
});
 

classes string

A space separated string of CSS classes to apply to the row.

null

To supply this option through data attributes you must specify the attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-classes="class1 class2">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"classes": "class1 class2"
		},{
			...
		}]
	});
});
 

formatter function

The function used to turn this columns cell values into there contents.

null

By default the column will use its types formatter.

string, HTMLElement or jQuery object

To supply the function through data attributes it must be defined as a named JavaScript function with the name supplied as the attribute value.

function formatter(value){
	return "<span>" + value + "</span>";
}
<table>
	<thead>
		<tr>
			<th data-formatter="formatter">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this function directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"formatter": function(value){
				return "<span>" + value + "</span>";
			}
		},{
			...
		}]
	});
});

Note

The first argument (value) is the result returned from the parser function.

 

name string

The name of the property on a row object that contains this columns cell values.

null

This is only required if the rows are supplied directly through the options or ajax.

To supply this option through data attributes you must specify the attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-name="id">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"name": "id"
		},{
			...
		}]
	});
});
 

parser function

The function used to retrieve the cells value from the DOM or another value.

null

By default the column will use its types parser.

*

To supply the function through data attributes it must be defined as a named JavaScript function with the name supplied as the attribute value.

function parser(valueOrElement){
	if (F.is.jq(valueOrElement)) return valueOrElement.data('value') || valueOrElement.text();
	if (F.is.defined(valueOrElement) && valueOrElement != null) return valueOrElement+'';
	return null;
}
<table>
	<thead>
		<tr>
			<th data-parser="parser">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this function directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"parser": function(valueOrElement){
				if (F.is.jq(valueOrElement)) return valueOrElement.data('value') || valueOrElement.text();
				if (F.is.defined(valueOrElement) && valueOrElement != null) return valueOrElement+'';
				return null;
			}
		},{
			...
		}]
	});
});

Note

The first argument (valueOrElement) is either the jQuery wrapper around the td element to parse or a value that needs to be parsed into the correct type for the column.

 

style object

The object used to define any inline styles for all cells in this column.

{}

To supply this option you would use the standard style attribute on each cell.

<table id="example">
	...
		<tr>
			<td style="color: blue;">...</td>
			...
		</tr>
	...
</table>

However to make your code more maintainable as well as more efficient you should rather create a CSS class that specifies the column styles.

#example > tbody > tr > td:nth-child(1) {
	color: blue;
}

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"style": {
				"color": "blue"
			}
		},{
			...
		}]
	});
});
 

title string

The title of a column is a friendly name associated with the values of its cells.

null

If no title is provided then one is auto generated and will appear as "Column 1", "Column 2", etc. depending on the columns index in the table

To supply this through static content a header row is required and the text value of the cell associated to this column is used.

<table>
	<thead>
		<tr>
			<th>ID</th>
			...
		</tr>
	</thead>
	...
</table>

Or to supply this through data attributes you must specify the attribute on the cell element.

<table>
	...
		<tr>
			<td data-title="ID">...</td>
			...
		</tr>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"title": "ID"
		},{
			...
		}]
	});
});
 

type string

The type of data expected from this columns cell values.

"text"

The plugin treats all columns as text columns by default as this is the most widely used column type.

To supply this option through data attributes you must specify the attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-type="text">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"type": "text"
		},{
			...
		}]
	});
});
 

visible boolean

Whether or not this column and all cells are permanently hidden from view.

true

Setting this option to false means the column will not appear in the row or details row in the table.

To supply this option through data attributes you must specify the attribute on the cell element.

<table>
	<thead>
		<tr>
			<th data-visible="false">...</th>
			...
		</tr>
	</thead>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"columns": [{
			"visible": false
		},{
			...
		}]
	});
});

 Row options

 

classes string

A space separated string of CSS classes to apply to the row.

null

To supply this option simply use the standard class attribute.

<table>
	..
		<tr class="class1 class2">
			...
		</tr>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"options": {
				"classes": "class1 class2"
			},
			"value": ...
		},{
			...
		}]
	});
});
 

expanded boolean

Whether the row is expanded or collapsed when first viewed on a device where columns have been hidden by breakpoints.

false

To supply this option through data attributes you must specify the attribute on the row element.

<table>
	..
		<tr data-expanded="true">
			...
		</tr>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"options": {
				"expanded": true
			},
			"value": ...
		},{
			...
		}]
	});
});
 

style object

The object used to define any inline styles for the row.

{}

To supply this option simply use the standard style attribute.

<table>
	..
		<tr style="background-color: blue;">
			...
		</tr>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"options": {
				"style": {
					"backgroundColor": "blue"
				}
			},
			"value": ...
		}]
	});
});

 Cell options

 

classes string

A space separated string of CSS classes to apply to the cell.

null

To supply this option simply use the standard class attribute.

<table>
	..
		<tr>
			<td class="class1 class2">...</td>
			...
		</tr>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"id": {
				"options": {
					"classes": "class1 class2"
				},
				"value": ...
			}
		},{
			...
		}]
	});
});
 

style object

The object used to define any inline styles for the row.

{}

To supply this option simply use the standard style attribute.

<table>
	..
		<tr>
			<td style="background-color: blue;">...</td>
			...
		</tr>
	...
</table>

The below shows how to supply this value directly through the options.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"id": {
				"options": {
					"style": {
						"backgroundColor": "blue"
					}
				},
				"value": ...
			},
			"firstName": ...
		}]
	});
});
 

value *

The cells underlying data value.

null

To supply basic values you simply provide the value as the contents of the cell and let the column parser retrieve it.

<table>
	..
		<tr>
			<td>1</td>
			...
		</tr>
	...
</table>

To be able to provide a different value to what is supplied in the cells contents you apply the data-value attribute directly on the cell and let the column formatter turn the value into the cell contents.

<table>
	..
		<tr>
			<td data-value="1"><!-- the formatter result --></td>
			...
		</tr>
	...
</table>

This is supplied as a property value on a row object.

jQuery(function($){
	$('.table').footable({
		"rows": [{
			"id": 1
		},{
			...
		}]
	});
});

To supply 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": {
					"style": ...
				},
				"value": 1
			}
		},{
			...
		}]
	});
});

 Examples

The below lists various examples to help you get started using FooTable in your projects. Keep in mind FooTable is designed to be extended and modified to suit your projects needs.