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 type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="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': '←' }
    },
    drawCallback: function () {
        $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
    },
    preDrawCallback: function() {
        $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
    }
});
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 assets/js/plugins/tables/datatables/
Updates 1
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 type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="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 assets/js/plugins/tables/footable/
Updates 0
Links

Official plugin website

Demonstration

Github project page
Handsontable
Dynamic handsontable/
Overview

Handsontable is a JavaScript component for creating Excel-like spreadsheets in modern web apps. Its virtual rendering engine allows you to play with large amounts of data without worrying about performance issues. You will also find it easy to learn and use, however if you get stuck with something, don't hesitate to ask on Google Group or open a relevant issue.

Features

Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source with peak efficiency. It comes with powerful features like data validation, sorting, grouping, data binding, formula support or column ordering. Core features:

  • Clean code with focus on performance allows you to interact with data sets ranging from 1 to 1 mln rows.
  • Appearance similar to Excel allows you to present data in the desired way right on the spot. Edit the CSS file if you need a customized display.
  • Maximize the value of your data by playing with it in real time. Integrate into any data source using flexible API.
  • Divide large amounts of data into pieces and display small chunks of it in a user-friendly way.
  • Lack of dependencies means the code works at its finest and is easy to implement in various enviroments.
  • Integrates with our plugin, RuleJS , which supports most of the Excel functions and calculation capabilities.
  • Helps user to shape data in accordance with different criteria. Operations are done on the fly.
  • Tablet-friendly view with dedicated UI that simplifies editing and saving data. Easy navigation with on-screen arrow buttons.

Handsontable comprises of the core engine and functional plugins. You can find a complete list of them below:

Category Name Description Demo
Cell feature Drag-down Select and drag the fill handle (small square in the bottom right corner of the cell) across or down to fill more cells with data series Demo
Cell feature Merge cells Display cells across multiple rows or columns Demo
Cell feature Alignment Decide where the content is placed within the cell or a range of cells Demo
Cell feature Read-only Lock the cell or a range of cells to disallow altering them Demo
Cell feature Disable cell editing Make cell non-editable without changing its appearance and behaviour Demo
Cell type Custom HTML Display HTML content in a cell or header Demo
Cell type Numeric Type a custom number format in a cell Demo
Cell type Date Use a date picker to select a date Demo
Cell type Checkbox Add a checkbox to a cell to indicate binary choices Demo
Cell type Select Create a simple dropdown list of choices in a cell Demo
Cell type Dropdown Create an advanced dropdown list of choices in a cell Demo
Cell type Autocomplete Choose one of the suggested options while typing or entering a custom value Demo
Cell type Password Use asterisks to mask the value in a cell Demo
Cell type Handsontable Use Handsontable itself as a custom cell editor Demo
Rows and columns Fixed rows and columns Define which rows or columns are visible while scrolling down or across the table Demo
Rows and columns Scrollbars Use native scrollbars to navigate within the table Demo
Rows and columns Highlighting rows or columns Indicate the entire active column or row Demo
Rows and columns Stretching Allow columns to the parent container width Demo
Rows and columns Resizing Drag the sizing handle to change the size of column or row Demo
Rows and columns Freezing Create freeze columns to keep them visible while scrolling Demo
Rows and columns Moving Drag rows or columns to swap them within the table Demo
Rows and columns Pre-populating new rows Create empty cells with predefined types or values Demo
Validation Data validation Control what values can be entered into a cell Demo
Navigation Pagination Limited number of records displayed in a single view Demo
Navigation Search for values Search through the content with the search field Demo
Sorting Sorting data Sort data in ascending or descending order throughout the column Demo
Appearance Conditional formatting Define how specific cells are formatted depending on their values Demo
Appearance Custom borders Apply custom border style around cells or range of cells Demo
Calculation Formula support Use functions to calculate numerical information within a cell or range of cells Demo
Mobile Mobiles and tablets Display and edit data on mobile phones and tablets Demo
Utility Context menu Invoke a shortcut menu to choose an action related to the selected object Demo
Utility Custom buttons Insert and remove column or row using custom action buttons Demo
Utility Comments Provide an additional note about the cell to help better understand its content Demo
Integration jQuery Full compatibility with jQuery Demo
Integration gRaphaël charts Create data visualization using gRaphaël charts Demo
Integration Chroma.js Create a heatmap for the values in the table Demo
Integration Bootstrap Apply Bootstrap's styles into Handsontable Demo
Integration Backbone.js See how Backbone's models and collections can work with Handsontable Demo
Usage

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

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/tables/handsontable/handsontable.min.js"></script>

Start by creating a container holding the grid:

<!-- Create container -->
<div id="example"></div>

Then pass a reference to that div and load some data if you wish:

// Add data
var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

// Define element
var container = document.getElementById('example');

// Initialize with options
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});
Handsontable documentation
Full Handsontable select documentation can be found online on Official library website. It's quite big, with a lot of options, examples, events and methods. 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 Handsontable library.
Plugin info
Property Description
File name handsontable.min.js
Location assets/js/plugins/tables/handsontable/
Updates 0
Links

Official plugin website

Full documentation

Github project page