johnpolacek/stacktable.js

jQuery plugin for stacking tables on small screens

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

stacktable.js's Issues

myClass option

I think it is no need. You may copy all classes from original element.

Rebind cardtable?

Hi.

Is there a way to rebind cardtable?

On initial load I bind like so:
$('#searchresults').cardtable();

And on subsequent paging, I call the same again:
$('#searchresults').cardtable();

But the cardtable doesn't update the 'hidden' table? Any advice please?

Original table is shown when stacktable is called.

As the title says, original table is shown when stacktable() is called. I fixed this by editing the last line to:

if (settings.hideOriginal) $table.hide();

table.small-only repeat in single page application

In SPA, when paginate, stacktable.js need call per page go, table.small-only will repeat!

Link in readme points to wrong project page

It should link to https://johnpolacek.github.io/stacktable.js/ instead of https://johnpolacek.github.com/stacktable.js

Change .first() to .eq(0) and your can support much older versions of JQuery.

N/T

Option to not have header

Add option to not have header, if we set the "headIndex" to -1 for example there should not be any index, and the "st-val" should expand it's width to 100%.

Has this project been abandoned

Is this project still being maintained?

Click Function in Stackable.js Table?

Not sure I stumbled on a bug, but recently I found that my stackable table using "stackable.js" will not run a click function calling toggleClass on an element. It works fine in desktop view but when scaled down and the stackable.js is triggered, my function stops working. This is only happening when the table is stacked and is only effecting elements inside the table.

Here is the Jquery function I'm hoping to get to work on the stacked table:
`/START WISH LIST STAR TOGGLE + MODAL/
$(document).ready(function() {
"use strict";
$('.product table span.star').on('click', function() {
$(this).toggleClass('active');

	if($(this).hasClass('active')){
		$('#wishListModal').foundation('open');
	}
});

/*This is needed to redraw the slick coursel in the modal as dimentions are not properly calculated (due to it initialy hidden)*/
$('[data-reveal]').on('open.zf.reveal', function() {
	$('.slick-slider').resize();
});

});
/END WISH LIST STAR TOGGLE + MODAL/`

Any advice or insight on the issue is much appreciated.

Document the available options

From a quick look at the code and your example web page it is obvious that there are some options.
It would be good to document them in the README.md file so people know what they are and what they do.

It seems like these are the possible options and roughly what they do:

• id: A string of space delimited classes that are added to the table. Seems odd to call it id if it is for classes.
• hideOriginal: If true the original full size table will be hidden when the small table is created. Otherwise it will be shown. - I assume that is how it should work but I don't think it actually works since the only code that uses it is like this: if (!settings.hideOriginal) $table.show(); but there is no hiding of the table.
• headIndex: I assume this is to specify the row index of the header, in case it isn't the first.
• myClass: Space separated classes to add to the table. Seems the same as the id option.

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?

colspan on <th> is not respected

Hi,
For cardtable the colspan on the <th> tags are not respected . Rather the text in the <th> is added as key only to first corresponding <td> in the <tbody> while keys for all other tds are left empty. I am attaching images in support of my issue:

Note the colspan for Actions

The way it looks when cardtable function is run

.

Row and cell attributes not copied

Hello,

I've applied some additional data-attributes to the table rows & cells (which are being used for filtering & some other related functions), but unfortunately stacktable doesn't seem to copy them when generating the responsive tables.

Would it be possible to add this?

Card table table headers changed to td

When opting for Card Table the first colum are the th elements of the original table. Better to keep th for semantic meaning.

Destroy

I got problem when i try to re build some table... the small-only table duplicate

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.

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 "<script>" HTML tags that contain a whitespace character, i.e: "</script >", which results in the enclosed script logic to be executed.

Add to npm and/or bower

Refactoring for flexibility

http://codepen.io/TrySound/pen/VYbxLM

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/

Conflict when linking to table content with named anchors

Issue

When a block of content links to table content where named anchors are used, the mobile view (stacked table) content takes precedence over the desktop view content.

Example

• Links to named references in table:

<ul>
  <li><a href="#contentarea1">Content 1</a></li>
  <li><a href="#contentarea2">Content 2</a></li>
</ul>

• Table has rows with named anchors:

<table class="collapse">
  <tr>
    <td><a name="contentarea1"></a>Content 1</td>
    <td>Column content</td>
  </tr>
  <tr>
    <td>More content</th>
    <td>Some other content</th>
  </tr>
  <tr>
    <td><a name="contentarea2"></a>Content 2</td>
    <td>Column content</td>
  </tr>
  <tr>
    <td>More content</th>
    <td>Some other content</th>
  </tr>
...
</table>

Behaviour

stacktable.js duplicates the table content into a hidden table which displays when the mobile mode is engaged. However, the named anchor assumes priority based on its position in the DOM, even though the table isn't displayed.

Have you encountered this use case before?

Suggestion

I think the plugin should change the names of anchors embedded in table code when the table is hidden, and revert them to the original when the table is visible. Can you think of an alternate solution?

When I have time, I could try to submit a pull request. But if you've already solved the problem I would greatly accept your solution. ;-)

Remove last column

How to remove last column of stackable table before init?

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

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

click event don't goes up

Hi,
in my table I create some links with ids, and then some on click event with jquery with some ajax calls behind.

If stacktable is not here, everything works fine, but when i enable stackable , events seems to be lost and it don't work anymore

exemple hereunder the hello is never displayed is stacktable applied on the table, displayed if statcktable disabled.
thanks,
`

                     <td>
                        <span id='np57d69a51-9b60-4c9f-9b92-e3a1ac112135'>Oui - <a href="/admin/repas/np/57d69a51-9b60-4c9f-9b92-e3a1ac112135" class="test" id="link-1282719413">Non pris</a></span>                        </td>
                    <td>
                        <span id='npc57d69a51-9b60-4c9f-9b92-e3a1ac112135'>Non</span>                        </td>

                </tr>

<script type="text/javasript"> $( ".test" ).click(function() { alert('hello'); }); </script>

`

Exclude some IDs or Classes to not apply stacktable

Hi,
I need to exclude some part of my HTML, actually my jquery command is:
$('div.content').children('table').stacktable();
and I tried :
$('div.content').not('#colonne-2.page-espace').children('table').stacktable();
with no effect.So how can I do that ?

Thanks

windows phone - no effect ?

Hello, came here from a Drupal Commerce article about responsive checkout tables...
I can't see any effect on your project website and demo. Apart from that, the site itself is not responsive?! Any clues?

Currenrly I am using a windows phone. 53x series.

Include Version in Source

Would it be possible to include the version in the source code (e.g. in the header block)?

thead not respected as first rowIndex

Consider this table:

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

The loop at line 111 searches inside the tbody only, ignoring the thead.
$table.find('>tbody>tr').each(function(rowIndex) {
And within this loop, rowIndex 0 is either skipped or shown as a heading. This means that in this example, the row containing Data 1 and Data 2 will be ignored.

For my use, I have just commented out the if (rowIndex === 0) { section to workaround this issue. I think there are probably a few ways to resolve this, such as changing the .find to >thead>tr,>tbody>tr, but without testing I dont know if that would affect anything else.

Column under column

Is it possible to output a single column (with each column of the original table) table instead of two-column tables?

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

Missing <th> in <thead> displays undifined when it has been stacktable

I have a table with four <th> in the <thead>, however I got only four columns in my table.

When I use stacktable, the missing <th> is populated with the word undifined.

To fix this issue (in my case), I just tweak your code a little bit :

if ($topRow.find('td,th').eq(index).html()){
  markup += '<td class="st-key">'+$topRow.find('td,th').eq(index).html()+'</td>';
 } else {
  markup += '<td class="st-key"></td>';
}

Thanks for the great plugin.

J.

form input array posting double

form input array posting double...

<input type="hidden" name="veg[]" value="x" >

Is there a way to change what becomes the st-head-row elements?

I have a weekly calendar table, when it resizes down to mobile the days are on the side and the times are on the top, it would be cool if this could be reversed, any chance this is possible?

e.g. http://www.yummymummyfitness.com.au/timetable/

Regards,
Devon Mather

CardTable - undefined if in thead is TD not TH

Hi,

Could you implement support for TD in THEAD?

Double caption in cardtable

Having defined a table with an caption results in a double caption

<table>
   <caption>my caption</caption>
   <thead>
      <tr>
         <th>aa</th>
         <th>bb</th>
         <th>cc</th>
     </tr>
   </thead>
   <tbody>
     ...
   </tbody>
</table>

Analyzing the result HTML after initializing the cardtable shows that the caption markup is inserted in the div, and not in the table that is hidden. So the caption is visible twice.

After changing your code at the end of the cardtable function it is working like a charm.

BEFORE CHANGE:

$stacktable.prepend($caption);
$stacktable.append($(markup));
$table.before($stacktable);

AFTER CHANGE:

$stacktable.append($(markup));
$stacktable.find('table').prepend($caption);
$table.before($stacktable);

The changes are:

• flip the first two rows
• prepend caption in table, not in div

Maybe you can put that the next rollout ;)

Tanks

Checked radio buttons

Hello,
Initially checked radion buttons only work in "stacked"/small widths if given the name attribute.
Eg. < input type="radio" value="0" name="q_1" checked >

Tables with multi-level headers

Thanks for the lovely js lib.
In a multi level header table, your js dont work very well... see this example.

Normal Table

Responsive Table

See the Main Header Textile, with the subheader Towel and Tape appears on normal table, but in responsive mode, the table outputs bad data.

Here is my table:

                                    <div id="ctype" class="lastChild">
                                    <table cellspacing="0" cellpadding="0" class="tabelas responsive">
                                    <caption class="firstChild">Type C (Shore D Hardness 25)</caption>
                                    <tbody class="lastChild"><tr class="firstChild">
                                    <th rowspan="2" class="firstChild">Base</th>
                                    <th rowspan="2">Description</th>
                                    <th rowspan="2">Total plate thickness<br class="firstChild lastChild empty">(mm)</th>
                                    <th rowspan="2">Relief depth<br class="firstChild lastChild empty">(mm)</th>
                                    <th colspan="2">Textile</th>
                                    <th rowspan="2" class="lastChild">Advantage</th>
                                    <tr>
                                    <th class="firstChild">Towel</th>
                                    <th class="lastChild">Tape</th>
                                    </tr>
                                    <tr class="lastChild">
                                    <td class="area_blue firstChild">Film</td>
                                    <td>CF200GB</td>
                                    <td>2.00</td>
                                    <td>1.78</td>
                                    <td><span class="tablegood"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span></td>
                                    <td><span class="tablegood"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span></td>
                                    <td class="lastChild">2mm Rubber support<br class="firstChild lastChild empty">Heat-resistant</td>
                                    </tr>
                                    </tbody></table>
                                    </div>
                                    <!-- /ctype -->

No copy of tfoot

Hi, thanks for the useful plugin.

I have a table with , this part has not been copied for the mobile version. Is there a way to do so?

cheers
Florian

NuGet Package

Hi,
Could I add your script to the official NuGet (.NET Package Manager) repositories? It saves me putting the script under version control. I've copied the manifest file, I've done this before mozilla/localforage.

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd">
    <metadata>
        <id>stacktable.js</id>
        <version>1.0.0</version>
        <title>Stacktable.js</title>
        <authors>John Polacek</authors>
        <owners>John Polacek</owners>
        <licenseUrl>http://opensource.org/licenses/GPL-3.0, http://opensource.org/licenses/MIT</licenseUrl>
        <projectUrl>http://github.com/johnpolacek/stacktable.js</projectUrl>
        <requireLicenseAcceptance>false</requireLicenseAcceptance>
        <description>The jQuery plugin for equalizing the height or width of elements. 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</description>
        <summary>Dual MIT / GPL License</summary>
        <copyright>John Polacek</copyright>
        <tags>javascript, responsive, table, responive table, stacktable, jquery</tags>
    </metadata>
    <files>
        <file src="Content\Scripts\stacktable.js" target="Content\Scripts\stacktable.js" />
        <file src="Content\Content\stacktable.css" target="Content\Content\stacktable.css" />
    </files>
</package>

License version confirmation

Hi @johnpolacek 🙋
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.

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

Thanks for your great work!!!! 🙌

Piicksarn

Document the minimum jQuery version

Document the minimum jQuery version.

*/ at the end of styles.css

Is the last line of the styles.ss supposed to have the */

I am just curious, i learn new things all the time.

.clearfix { *zoom: 1; } */

Empty table hidden on small devices

Have a question .. table is hidden on mobile screen if it is empty .. i have a table where first column is icon user click on icon to open modal so it is necessary to show table in mobile screen devices
Thanks

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

Problem with values using aspx edit inline

Hello,
I'm using this library in my aspx project.
I have this problem: on a row of my table I'm using edit inline, and seems that calling the stackable function at the end of my page, in this way:

<script> $(window).load(function () { $('#<%=GridViewList.ClientID%>').stacktable({ myClass: '.stacktable' }); }); </script>

the value that is inside the textbox I'm editing is replaced by the stackable js attaching the new value instead of replacing it. I mean that if I have a textbox with value 50, and I edit it with a new value, i.e. 55, the new value submitted to the server is 50,55 instead of 55.

I already tried to use the cardtable and stackcolumns functions instead of stackable() but it doesn't help. Can you suggest me how to solve it? Thank you

Doesnt support <thead> 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>

Under IE8 stacktable.js throw error : expected identifier on line 22

It seems that some reserved words trigger this error under IE : http://jonathonhill.net/2009-11-24/javascript-reserved-words-trigger-expected-identifier-error-on-ie/

Replacing line 22 :

if (typeof settings.class !== undefined) $stacktable.addClass(settings.class);

with :

if (typeof settings.myClass !== undefined) $stacktable.addClass(settings.myClass);

Fix to be confirmed. I only have tested through browserstack.com.

Cheers,

J.

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

How to access the data in the table?

It is a very interesting plugin that solves the visualization of complex tables in small screens.
I am looking for a responsive solution for editable tables.

My questions

a) But when changing the visualization as it is done to access the data whose layout has been modified. Is there a way to access them if you have to use different selectors?

b) Muchas librerias y framework actuales buscan separar vista de los datos, existe una implementacion para alguna de esas herramientas?

I found a similar solution for angularjs if it were the case to use this framework.
https://github.com/awerlang/angular-responsive-tables