#### Limitless - Tables

##### Data tables

Dynamic /tables/datatables/

###### Overview

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. DataTables library is compatible with IE6 and newer. The extensions require IE8 or newer. All other evergreen browsers (Chrome, Firefox, Safari, Opera) are fully supported.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/tables/datatables/datatables.min.js"></script>

Add table markup:

    <!-- Add table -->
    <table class="table datatable-basic">
    	<thead>
    		<tr>
    			<th>...</th>
    			...
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>...</td>
    		</tr>
    		...
    	</tbody>
    </table>

Call the plugin via JavaScript:

    // Basic initialization
    $('.datatable-basic').DataTable({
    	autoWidth: false,
    	dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
        language: {
            search: '<span>Filter:</span> _INPUT_',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
        }
    });

###### Datatables extensions

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options. Extensions added to the Limitless configuration:

- ###### AutoFill extension

  AutoFill adds an Excel like data fill option to DataTables, allowing click and drag over cells, filling in information and incrementing numbers as needed

- ###### Buttons

  The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control

- ###### ColReorder

  ColReorder adds the ability for the end user to be able to reorder columns in a DataTable through a click and drag operation. This can be useful when presenting data in a table, letting the user move columns that they wish to compare next to each other for easier comparison.

- ###### FixedColumns

  FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column)

- ###### FixedHeader

  The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible

- ###### KeyTable

  KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells

- ###### Responsive

  Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens

- ###### RowReorder

  RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with Editor's multi-row editing feature is also available to update rows immediately

- ###### Scroller

  A virtual renderer for DataTables, allowing the table to look like it scrolls for the full data set, but actually only drawing the rows required for the current display, for fast operation

- ###### Select

  Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Item selection can be particularly useful in interactive tables where users can perform some action on the table such as editing

###### Datatables documentation

Full Datatables documentation can be found online on Official library website. It's quite big, with a lot of options, events and powerful API. Also check out Full reference and a complete manual. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Datatables library.

###### Plugin info

Property | Description
--- | ---
File name | datatables.min.js
Location | global_assets/js/plugins/tables/datatables/
Links | Official plugin website Full documentation Github project page

##### Footable

Static footable.min.js

###### Overview

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. Have you ever wanted to show a lot of data in a table, but hate how badly it scales on smaller mobile devices? The FooTable jQuery plugin solves this problem by allowing you to hide certain columns on smaller devices, but still allowing the user to expand each row to see the columns that were hidden.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/tables/footable/footable.min.js"></script>

Add table markup:

    <!-- Add table -->
    <table class="footable">
    	<thead>
    		<tr>
    			<th>Name</th>
    			<th data-hide="phone,tablet">Phone</th>
    			<th data-hide="phone,tablet">Email</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Bob Builder</td>
    			<td>555-12345</td>
    			<td>bob@home.com</td>
    		</tr>
    	</tbody>
    </table>

Call the plugin via JavaScript:

    // Basic initialization
    $('.footable').footable({
    	// options
    });

###### Breakpoints

FooTable works off the concept of breakpoints. These can be customized, but the default breakpoints are:

    // Default breakpoints
    breakpoints: {
    	phone: 480,
    	tablet: 1024
    }

To change the breakpoints simply pass in a breakpoints option when initializing FooTable

    // Change breakpoints
    $('.footable').footable({
        breakpoints: {
            tiny: 100,
            medium: 555,
            big: 2048
        }
    });

###### Column Setup

You then need to tell FooTable which columns to hide on which breakpoints, by specifying `data-hide` attributes on the table head columns:

    // Default breakpoints
    breakpoints: {
    	phone: 480,
    	tablet: 1024
    }

To change the breakpoints simply pass in a breakpoints option when initializing FooTable

    // Table markup
    <table class="footable table">
    	<thead>
    		<tr>
    			<th>Name</th>
    			<th data-hide="phone">Job Title</th>
    			<th data-hide="phone,tablet">Status</th>
    			<th data-hide="all">Description</th>
    		</tr>
    	</thead>
    </table>

In the above example the following will be true:

Column | Data Attribute | Shown on Desktop | Shown on Tablet | Shown on Phone
--- | --- | --- | --- | ---
Name | [none] | yes | yes | yes
Job Title | `data-hide="phone"` | yes | yes | no
Status | `data-hide="phone,tablet"` | yes | no | no
Description | `data-hide="all"` | no | no | no

###### Data attributes

A list of all the options available on the `float` method:

Option | Description
--- | ---
Core Data Attributes
`data-class` | Use to specify a CSS class to apply to all cells in a column
`data-hide` | Use to specify at which breakpoints to hide the column. Separate multiple breakpoints using a comma
`data-ignore` | This will stop the column being included in the detail row creation
`data-name` | This will override the name of the column in the detail row
`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
`data-value` | This specifies a value to use other than the text of the cell
`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
`data-sort-ignore` | Used to disable sorting on a specific column
`data-sort-initial` | Sort a column when FooTable is loaded. Set it to "descending" to sort in descending order initially
Filter Data Attributes
`data-filter` | The selector for the input field that will be used to filter your table
`data-filter-minimum` | Define the minimum number of characters needed before the table data is filtered. Default is `2` characters
`data-filter-timeout` | Define the timeout for the delay before the table data is filtered. Default is `300` milliseconds
`data-filter-text-only` | Only filter by table cell text and ignore any `data-values` values
Pagination Data Attributes
`data-page-size` | Set the number of rows per page. Default is `10` rows per page
`data-page-first-text` | Set the text used to navigate to the first page
`data-page-previous-text` | Set the text used to navigate to the previous page
`data-page-next-text` | Set the text used to navigate to the next page
`data-page-last-text` | Set the text used to navigate to the last page

###### Plugin events

There are a number of events that you can hook into:

Event | Description
--- | ---
`footable_already_initialized` | Fires when the FooTable has already been initialized
`footable_initializing` | Fires before FooTable starts initializing
`footable_initialized` | Fires after FooTable has finished initializing
`footable_resizing` | Fires before FooTable resizes
`footable_resized` | Fires after FooTable has resized
`footable_redrawn` | Fires after FooTable has redrawn
`footable_breakpoint` | Fires inside the resize function, when a breakpoint is hit
`footable_column_data` | Fires when setting up column data. Plugins should use this event to capture their own info about a column
`footable_row_detail_updating` | Fires before a detail row is updated
`footable_row_detail_updated` | Fires after a detail row has been updated
`footable_row_collapsed` | Fires when a row is collapsed
`footable_row_expanded` | Fires when a row is expanded
`footable_row_removed` | Fires when a row is removed

###### Plugin info

Property | Description
--- | ---
File name | footable.min.js
Location | global_assets/js/plugins/tables/footable/
Links | Official plugin website Demonstration Github project page