@mathieumaingret/responsive-table NPM

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.

jquery

@infinitebrahmanuniverse/nolb-_math @everything-registry/sub-chunk-585 @zalastax/nolb-_math

1.0.3

5 years ago