jQuery plugin for stacking tables on small screens

Overview

stacktable.js

The Responsive Tables jQuery plugin for stacking tables on small screens. The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format. For more info, go to the project page.

Follow me on Twitter

Options

myClass: Space separated classes to add to the table.

headIndex: Use this to specify the row index of the header, in case it isn’t the first.

Legal

Author & copyright (c) 2012: John Polacek

MIT License

Comments
  • License version confirmation

    License version confirmation

    Hi @johnpolacek :raising_hand: The issue is from cdnjs, would you please provide the license version of GPL? Cause we desired to include stacktable.js and follow https://spdx.org/licenses/ for license confirmation.

    :point_right: The related lib request from user to cdnjs is here. :point_right: And related lib addition pull request is here.

    Thanks for your great work!!!! :raised_hands:

    Piicksarn

    opened by Piicksarn 5
  • Doesnt support <thead> attribute

    Doesnt support attribute

    I had to move the of the to the first element Before

    <table border="1" cellpadding="1" cellspacing="1" class="saison" style="width:100%">
    	<thead>
    		<tr>
    			<th scope="col">Dates des saisons &agrave; Verbier</th>
    			<th scope="col">De</th>
    			<th scope="col">A</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Printemps, &eacute;t&eacute;, automne 2017</td>
    			<td>
    			15.04.2017
    			</td>
    			<td>
    			02.12.2017
    			</td>
    		</tr>
    </tbody>
    </table>
    
    

    after workaround

    <table border="1" cellpadding="1" cellspacing="1" class="saison" style="width:100%">
    	<tbody>
    		<tr>
    			<th scope="col">Dates des saisons &agrave; Verbier</th>
    			<th scope="col">De</th>
    			<th scope="col">A</th>
    		</tr>
    		<tr>
    			<td>Printemps, &eacute;t&eacute;, automne 2017</td>
    			<td>
    			15.04.2017
    			</td>
    			<td>
    			02.12.2017
    			</td>
    		</tr>
    </tbody>
    </table>
    
    opened by corentinchap 4
  • declare variables and remove unused

    declare variables and remove unused

    Hi there,

    A few variables were not declared, so they were attached to the global scope (i.e. window). You can try it with any of them in the project website, for example you can see from a browser's console window.headIndex or window.$table have a value. Also removed some variables that were not used, to spare a few bits. Hope it helps.

    Cheers

    opened by igncp 4
  • Nested Table Fails

    Nested Table Fails

    When a table contains nested tables the stacktable.js fails. The data from nested tables is parsed into the stacked table.

    A possible solution: When parsing tables, check if the table row and table data are children of the looped parent table and ignore when they are not.

    JSFiddle: http://jsfiddle.net/ndrRH/

    opened by PieterEringa 4
  • Converted to Coffeescript and updated to jquery 1.9.1

    Converted to Coffeescript and updated to jquery 1.9.1

    Hey, I'm going to be including this in GroundworkCSS and most likely adding some features and functionality so I've converted the source to Coffeescript (via automated conversion with js2coffee.org

    Also updated it to use jQuery 1.9.1.

    • Gary
    opened by ghepting 4
  • License version confirmation

    License version confirmation

    Hi @johnpolacek We are cdnjs team, we're going to host this library.

    Which license is this repository under? GPL-3.0 or LGPL-3.0. I saw the content of License.txt is the same as LGPL-3.0. But I saw #48 this repo is under GPL-3.0.

    If you have any suggestions, please let me know. Thank you.

    cdnjs/cdnjs#11472

    opened by sufuf3 3
  • CDN for stacktable is not reachable.

    CDN for stacktable is not reachable.

    The https://files-stackablejs.netdna-ssl.com/stacktable.min.js CDN is not accesible., any thgts if you have plans to move to a different CDN or if it is already moved is it possible to update the new CDN location?? Cheers.

    opened by sathishjayapal 3
  • Does not work on dynamiclly created fields.

    Does not work on dynamiclly created fields.

    Hello,

    I have been using stacktable in my project and it's awesome but today I came across an issue with dynamically created fields in jquery. When you scale the screen down to a smaller size the extra fields created do not show anymore, but when you resize the website to full they appear just fine. Below I've attached the js I'm using to do the dynamic fields. http://pastebin.com/duBWd66F

    opened by efinst0rm 2
  • Proposal to add mode

    Proposal to add mode "stackcolumns"

    the added function "stackcolumns" does duplicate the table in a suite a pairs on smaller screen, but preserving the columns instead of the lines.

    Usage is just the same as stacktables, see it running on the last table (agenda) of "index", by resizing your screen.

    Let me know how you like it! and thanks for your code that really helped me. B.

    opened by berteh 2
  • Add classes from source table

    Add classes from source table

    I needed the same classes from the source table, so i added the classes in line 45:

    st-val '+$(this).prop('class')
    

    Maybe you also could do this with the st-key td's. I just needed it for the st-val td's

    opened by kimchristiansen 2
  • Stackable.js and Foundation ToolTips?

    Stackable.js and Foundation ToolTips?

    Issue happens if using the Foundations (tooltips) within a table that also uses (stackable.js). If the tooltip is embedded in a stackable table, it will not work if viewing on smaller screens.

    I believe this is due to a specificity problem. REFERENCED HERE: Click Function in Stackable.js Table? Using the tooltip methods of (show) and (Hide) in Foundation ~ (REF: https://foundation.zurb.com/sites/docs/tooltip.html#js-functions) ~ I tried to work around the issue by duplication the tooltip show function but also including $('body')... to help target the tooltip inside the stacked table when viewed on mobile screens. The tooltips still do not work when viewing the table on smaller screens ~ what am I missing?

    CODEPEN: https://codepen.io/jinch/pen/bXpOgM?editors=0010 $('body').on('mouseenter', 'span.has-tip', function(e) { e.preventDefault(); $(this).foundation('show'); });

    The expected behavior is that the tooltip will work on smaller screens as it does outside of a table that does not use stackable.js

    opened by jinch 1
  • jquery 1.7 contains know vulnerabilities

    jquery 1.7 contains know vulnerabilities

    Please update to latest (3.60 now) jquery

    Dependency jquery version 1.7 was detected and suffers from the following vulnerabilities:

    CVE-2020-7656: jquery prior to 1.9.0 allows Cross-site Scripting attacks via the load method. The load method fails to recognize and remove "", which results in the enclosed script logic to be executed.

    opened by JuhaO81 0
  • stacktable. and Datatables

    stacktable. and Datatables

    Hi, It's possible to use stacktable.js with Datatables? I have some ajax tables working with datatables and I need to use stacktable.js how can I do it? thanks

    opened by mavbcn 0
  • empty cells converted to headers (accesibility issue)

    empty cells converted to headers (accesibility issue)

    If you have a table with empty cells, those cells can get converted to tags for the small version of the table. This can cause pages using the script to fail Section 508 compliance checks. An example table:

    <table>
    	<tr>
    		<td>&nbsp;</td>
    		<td>
    			This is some table content
    		</td>
    	</tr>
    </table>
    

    Running Stackable.js results in this:

    <table class=" stacktable small-only"><tbody><tr class="  "><th class="st-head-row st-head-row-main" colspan="2">&nbsp;</th></tr></tbody></table>
    <table class="stacktable large-only">
    	<tbody><tr>
    		<td>&nbsp;</td>
    		<td>
    			This is some table content
    		</td>
    	</tr>
    </tbody></table>
    

    That empty <th class="st-head-row st-head-row-main" colspan="2"> causes 508 validation errors. Perhaps the <td> could only be converted to a <th> if it's not empty? Or have an option to ignore empty <td> tags to maintain 508 compliance?

    opened by haskinsjg 0
  • Add stacktable.css to package.json files

    Add stacktable.css to package.json files

    We use the stacktable.css file with our projects. It was included fine when using bower, but it is not included when installing via npm. This seems to fix the issue.

    opened by mg-sd 1
Owner
John Polacek
Lead Web Developer at GiveSmart. Based in Chicago. Runs ChicagoTechEvents.com
John Polacek
A JQuery plugin to create AJAX based CRUD tables.

What is jTable http://www.jtable.org jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has several

Volosoft 1.1k Dec 21, 2022
Live searching/filtering for HTML tables in a jQuery plugin

jQuery Filter Table Plugin This plugin will add a search filter to tables. When typing in the filter, any rows that do not contain the filter will be

Sunny Walker 175 Oct 29, 2022
jQuery plugin to make HTML tables responsive

FooTable V3 This is a complete re-write of the plugin. There is no upgrade path from V2 to V3 at present as the options and the way the code is writte

FooPlugins 2.1k Dec 19, 2022
An Obsidian plugin to provide an editor for Markdown tables

An Obsidian plugin to provide an editor for Markdown tables. It can open CSV data and data from Microsoft Excel, Google Sheets, Apple Numbers and LibreOffice Calc as Markdown tables from Obsidian Markdown editor.

Ganessh Kumar 112 Dec 31, 2022
A stupidly small and simple jQuery table sorter plugin

Stupid jQuery Table Sort This is a stupid jQuery table sorting plugin. Nothing fancy, nothing really impressive. Overall, stupidly simple. Requires jQ

Joseph McCullough 708 Dec 26, 2022
jQuery grid plugin

jqGrid jQuery grid plugin jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the w

Tony Tomov 2.8k Jan 7, 2023
jQuery plugin to show a tree structure in a table

jQuery treetable jQuery treetable is a plugin for jQuery, the 'Write Less, Do More, JavaScript Library'. With this plugin you can display a tree in an

Ludo van den Boom 734 Nov 14, 2022
Lightweight Grid jQuery Plugin

jsGrid Lightweight Grid jQuery Plugin Project site js-grid.com jsGrid is a lightweight client-side data grid control based on jQuery. It supports basi

Artem Tabalin 1.5k Dec 31, 2022
jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF

tableExport.jquery.plugin Export HTML Table to CSV DOC JSON PDF PNG SQL TSV TXT XLS (Excel 2000 HTML format) XLSX (Excel 2007 Office Open XML format)

null 918 Dec 29, 2022
A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch screens with a resolution of 1024x600 connected to a Raspberry Pi.

EDStatusPanel A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch scr

marcus-s 24 Oct 4, 2022
An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

Obsidian Excel to Markdown Table An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor. Demo You can paste the copied Excel d

Ganessh Kumar 108 Jan 4, 2023
NFT stacking frontend completion using web3 on solana for client Nelson project.

NFT stacking frontend completion using web3 on solana for client Nelson project.

Kapollo 12 Dec 16, 2022
Shrinks any large data tables into compact and responsive tables

jquery.table-shrinker A Jquery plugin to make HTML Table responsive across all devices, the right way! Demo Click here to see the demo, remember to re

null 29 Sep 11, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Enable full screen on for large aspect ratio screens on WhatsApp Web.

Maximize WhatsApp [WIP] Enable full screen on large aspect ratio screens on WhatsApp Web. Enable Epiphany extension. Optional if not done. Download th

null 2 Mar 13, 2022
Cloud function to generate basic icons, splash screens, and favicons.

Example: https://icogen.vercel.app/api/icon?color=white&padding=300&icon_id=1f1f1-1f1fa Can be used in Expo apps via app.json: { "expo": { "icon

Evan Bacon 13 Jan 2, 2023
A JQuery plugin to create AJAX based CRUD tables.

What is jTable http://www.jtable.org jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has several

Volosoft 1.1k Dec 21, 2022
Live searching/filtering for HTML tables in a jQuery plugin

jQuery Filter Table Plugin This plugin will add a search filter to tables. When typing in the filter, any rows that do not contain the filter will be

Sunny Walker 175 Oct 29, 2022