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-toggle This specifies the column that will have the toggle button. Default will be the first column.
<thead>
    <tr>
        <th data-hide="phone">Column hidden on phones</th>
        <th data-toggle="true">Column always shown</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.
data-editable Used to mark columns as editable. Set it as true to make a column editable/modifiable. By default if a cell contains any html input elements it will behave as editable/modifiable. Set to false if you do not need it.
<th data-editable='true'>

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">
data-page Set to false to disable pagination for a table when the pagination plugin is loaded. Default is true.
<table data-page="false">