Getting started - FooTable

# 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` | Hidden | Hidden | Hidden | Hidden
`xs` | Hidden | Visible | Visible | Visible
`sm` | Visible | Hidden | Visible | Visible
`md` | Visible | Visible | Hidden | Visible
`lg` | Visible | Visible | Visible | Hidden

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` | Hidden | Hidden | Hidden | Hidden | Hidden
`x-small` | Hidden | Visible | Visible | Visible | Visible
`small` | Visible | Hidden | Visible | Visible | Visible
`medium` | Visible | Visible | Hidden | Visible | Visible
`large` | Visible | Visible | Visible | Hidden | Visible
`x-large` | Visible | Visible | Visible | Visible | Hidden

#### 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` | Hidden | Hidden | Hidden | Hidden
`xs` | Hidden | Visible | Visible | Visible
`sm` | Hidden | Hidden | Visible | Visible
`md` | Hidden | Hidden | Hidden | Visible
`lg` | Hidden | Hidden | Hidden | Hidden

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 `type`s 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 `type`s 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"
    		},{
    			...
    		}]
    	});
    });

The below lists all the column types supported by the plugin.

#### text

The default column type, used for all columns unless another type is specified overriding it.

#### number

Used for columns that contain numeric data.

#### html

Used for columns that contain HTML data.

#### date

Used for columns that contain date data.

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

### Basic Examples

#### Table with no header

Shows how to create a simple table with no header.

#### Table with a single header

Shows how to create a simple table with a single header.

#### Row toggle options

Shows how to disable the row toggle or change the position from the first to the last visible column.

#### Hiding columns

Shows how to completely hide a column from both the normal and details rows.

### Component Examples

#### Paging rows

Shows how to create a table that makes use of the paging component.

#### Sorting columns

Shows how to create a table that makes use of the sorting component.

#### Filtering rows

Shows how to create a table that makes use of the filtering component.

#### Editing rows

Shows how to create a table that makes use of the editing component.

#### Showcase

Shows how to create a table that makes use of all the components.

### Advanced Examples

#### Ajax loading data

Shows how to create a table providing the columns and/or rows through ajax.

#### Custom filter UI

Shows how to create a completely custom filter UI.

#### Custom dropdown filter

Shows how to create a custom dropdown filter.

#### Change page size

Shows how to dynamically change the page size.

### Bootstrap Examples

#### Accordion component

Shows using FooTable with Bootstraps' accordion component.

#### Collapse component

Shows using FooTable with Bootstraps' collapse component.

#### Modal component

Shows using FooTable with Bootstraps' modal component.