@mathieumaingret/responsive-table

Responsive Table

Enable responsive layout on html tables elements

Requirements

This script requires

• [jQuery] >= 1.7.0
• https://github.com/kevinbaubet/devicedetect deviceDetect library to check current device and formats

Installation

<link rel="stylesheet" href="../dist/responsive-table.min.css?v=0.1" media="all" />
<script src="../dist/responsive-table.min.js?v=0.1"></script>

Use

// DeviceDetect library instance
var deviceDetect = new $.DeviceDetect();
var deviceDetectDevices = deviceDetect.getDevices();

// Mandatory options
var options = {
    deviceDetect: deviceDetect,
    devices: deviceDetectDevices
};

// Init
$('#content table').responsiveTable(options);

Options

Key (* is mandatory)	Description	Default value	Examples
deviceDetect *	Library instance, using the onResize() method for instance	undefined
devices *	(object) Indicate for each available device the current one	{}	{desktop: true, mobile: false, tablet: false}
breakpoint	(string) On which deviceDetect device the responsive layout can be applied	mobile
reloadOnResize	(bool) On window resize, check current device again	true
allowFallbackOnFirstRow	(bool) If no <thead> or <th> tags are founded for each tables, the first <tr> row will be used to get the table labels	true
labelsDisplay	(string) Layout to be applied. By default, 'inline' or 'block' are available	inline	inline / block
classes	(object) HTML classes applied on the <table> element	See below

HTML Classes option

classes: {
    prefix: 'responsive-table',
    initialized: 'is-initialized',
    hasLabels: 'is-label',
    cellWrapper: 'cell-wrapper'
}

Custom Layout

The labelsDisplay simply adds an HTML class, so you can apply whatever you want, as long as you manage this layout in your css declarations.