FooTable - jQuery plugin for responsive HTML tables

A list of all available data attributes that can be used within FooTable

Name | Description | Example
--- | --- | ---

#### Core Data Attributes

`data-class`

Use to specify a CSS class to apply to all cells in a column.

    <thead>
        <tr>
            <th data-class="highlight">Column</th>
        </tr>
    </thead>

`data-hide`

Use to specify at which breakpoints to hide the column. Separate multiple breakpoints using a comma.

    <thead>
        <tr>
            <th>Column always shown</th>
            <th data-hide="phone,tablet">Column hidden on phone and tablet</th>
            <th data-hide="all">Column always hidden</th>
        </tr>
    </thead>

`data-ignore`

This will stop the column being included in the detail row creation.

    <thead>
        <tr>
            <th data-ignore="highlight">Column will not show in detail row</th>
        </tr>
    </thead>

`data-name`

This will override the name of the column in the detail row.

    <thead>
        <tr>
            <th data-name="Date Of Birth">DOB</th>
        </tr>
    </thead>

`data-type`

This specifies the parser to use to retrieve a cell's value. Default will be 'alpha'. This is useful when trying to sort by numbers/dates.

    <thead>
        <tr>
            <th data-type="alpha">Name</th>
            <th data-type="numeric">DOB</th>
        </tr>
    </thead>

`data-value`

This specifies a value to use other than the text of the cell.

    <tbody>
        <tr>
            <td data-value="370961043292">3 Oct 1981</td>
            <td data-value="2">Active</td>
        </tr>
    </tbody>

`data-group` | Used to group column headers together. This will also group the row details together.

#### Sorting Data Attributes

`data-sort`

Used to disable sorting on the entire table

    <table data-sort="false">

`data-sort-ignore`

Used to disable sorting on a specific column

    <tbody>
        <tr>
            <td>Sortable</td>
            <td data-sort-ignore="true">Not Sortable</td>
        </tr>
    </tbody>

`data-sort-initial`

Sort a column when FooTable is loaded. Set it to "descending" to sort in descending order initially.

    <tbody>
        <tr>
            <td data-sort-initial="true">Name</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td data-sort-initial="descending">Name</td>
        </tr>
    </tbody>

#### Filter Data Attributes

`data-filter`

The selector for the input field that will be used to filter your table.

    <input id="filter" type="text">
    <table data-filter="#filter">

`data-filter-minimum`

Define the minimum number of characters needed before the table data is filtered. Default is 2 characters.

    <table data-filter-minimum="3">

`data-filter-timeout`

Define the timeout for the delay before the table data is filtered. Default is 300 milliseconds.

    <table data-filter-timeout="1000">

`data-filter-text-only`

Only filter by table cell text and ignore any data-values values.

    <table data-filter-text-only="true">

#### Pagination Data Attributes

`data-page-size`

Set the number of rows per page. Default is 10 rows per page.

    <table data-page-size="5">

`data-page-first-text`

Set the text used to navigate to the first page. Default is «.

    <table data-page-first-text="first">

`data-page-previous-text`

Set the text used to navigate to the previous page. Default is ‹.

    <table data-page-previous-text="prev">

`data-page-next-text`

Set the text used to navigate to the next page. Default is ›.

    <table data-page-next-text="next">

`data-page-last-text`

Set the text used to navigate to the last page. Default is ».

    <table data-page-last-text="last">