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