# Sorting

## Sort rows by columns.

The sorting component allows you to quickly and easily sort all rows in a table using a specific column to determine the resulting order.

#### Notes

- This component relies on a columns `type` option being correctly set.
- See the Getting started - Examples section for examples of this component.

# Options

The below lists all the options for the sorting component, these are available in addition to the core options.

### General options

#### enabled boolean

Whether or not the component is enabled.

`false`

By default this component is disabled, no UI or features of this component will be available.

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

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

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

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

### Column options

#### sortable boolean

Whether or not the column can be sorted.

`true`

All columns can be sorted by default.

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

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

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

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

#### sorted boolean

Whether or not the column is currently sorted.

`false`

When set to `true` the component will sort by this column once initialized.

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

    <table>
    	<thead>
    		<tr>
    			<th data-sorted="true">...</th>
    			...
    		</tr>
    	</thead>
    	...
    </table>

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

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

#### direction string

A string specifying the direction if the column is sorted.

When using the `sorted` option this allows you to specify the direction the column is sorted. This only supports two values; `"ASC"` and `"DESC"`.

`"ASC"`

The only other supported value for this option is `"DESC"`.

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

    <table>
    	<thead>
    		<tr>
    			<th data-sorted="true" data-direction="DESC">...</th>
    			...
    		</tr>
    	</thead>
    	...
    </table>

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

    jQuery(function($){
    	$('.table').footable({
    		"columns": [{
    			"sorted": true,
    			"direction": "DESC"
    		},{
    			...
    		}]
    	});
    });

### Cell options

#### sortValue *

The value used by the component to perform sorting operations.

`""`

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

    <table>
    	<tr>
    		<td data-sort-value="My Sort Value">...</td>
    		...
    	</tr>
    	...
    </table>

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

    jQuery(function($){
    	$('.table').footable({
    		"rows": [{
    			"id": {
    				"options": {
    					"sortValue": "My Sort Value"
    				},
    				"value": ...
    			}
    		},{
    			...
    		}]
    	});
    });

#### Note

If no sort value is supplied for a cell the result of the cells default `parse` method will be used.