Tablesaw headers not shown on mobile

Question

According to their examples and documentation you should be able to see the headers when you are on a mobile phone:

However when i attempt this with the following table:

<table id="table-client" class="table table-responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack"

i get this:

As you can see without the headers.

I searched around and saw a guy on github having the same problem however he did not have any luck with solving the issue.

My question to you guys is, has anyone ever encountered the problem and know of a way to fix it?

can you share your code ? the table works as expected in my implementation. — Gulfaraz Rahman, Mar 24 '17 at 13:11
can you provide some code please ? , i actualy don't know what tablesaw is but if you provide some code i can figure out the problem perhaps — moolsbytheway, Mar 24 '17 at 18:25
Hey guy you must provide some code. Or it's almost impossible to figure out the problem since the demo in your question works. — blackmiaool, Mar 25 '17 at 11:42
@MarcRasmussen I have created the sample page and it is working. Just ensure that you have included the both JavaScript files. It will not work if JavaScript files are not properly loaded. ' ' — Sumit Gulati, Mar 28 '17 at 23:56
@SumitGulati is it possible you can add a fiddle with your example? — Marc Rasmussen, Mar 29 '17 at 07:50
@MarcRasmussen It is not working in JSFiddle because of some loading issue in external files. I have pasted the code below and it just require 3 (tablesaw.js, tablesaw-init.js and tablesaw.css) files to run. — Sumit Gulati, Mar 29 '17 at 11:57

score 2 · Accepted Answer · answered Mar 29 '17 at 09:14

Without seeing your html table's structure it is impossible to say why the headers are not showing up. But this is the code from the demo site, so just match what they have done here and it should work.

Make sure you're including their library's CSS. It looks like you might not be, and that could be the problem.

They are using a later version of jQuery (v3.1.1) than the one I selected (v2.1.1), but it doesn't appear to matter.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://filamentgroup.github.io/tablesaw/dist/tablesaw.js"></script>
<script src="https://filamentgroup.github.io/tablesaw/dist/tablesaw-init.js"></script>
<link rel="stylesheet" href="http://filamentgroup.github.io/tablesaw/dist/tablesaw.css">


<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" id="tablesaw-5335">
  <thead>
    <tr>
      <th scope="col" data-tablesaw-priority="persist">Movie Title</th>
      <th scope="col" data-tablesaw-sortable-default-col="" data-tablesaw-priority="3">Rank</th>
      <th scope="col" data-tablesaw-priority="2">Year</th>
      <th scope="col" data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th scope="col" data-tablesaw-priority="4">Gross</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">1</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2009</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">83%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$2.7B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">2</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">1997</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">88%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$2.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">3</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2012</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">92%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.5B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">4</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2011</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">96%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.3B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">5</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2013</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">89%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.2B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">6</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2013</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">78%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.2B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">7</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2011</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">36%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">8</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2003</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">95%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">9</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2012</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">92%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.1B</span></td>
    </tr>
    <tr>
      <td class="title"><b class=" tablesaw-cell-label">Movie Title</b><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></span></td>
      <td><b class=" tablesaw-cell-label">Rank</b><span class="tablesaw-cell-content">10</span></td>
      <td><b class=" tablesaw-cell-label">Year</b><span class="tablesaw-cell-content">2014</span></td>
      <td><b class=" tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></b><span class="tablesaw-cell-content">18%</span></td>
      <td><b class=" tablesaw-cell-label">Gross</b><span class="tablesaw-cell-content">$1.0B</span></td>
    </tr>
  </tbody>
</table>

Just a general comment on tracking down the problem. I'm sure you know already, but I'd start by incorporating the above working code, then substitute your data, and finally start adding your additional classes etc... I note in your question you're using classes `table` & `table-responsive` in the table element. I'd leave those classes out first off and then add them back in one at a time, testing to see if they cause a problem, along with any others you are using. — K Scandrett, Mar 29 '17 at 10:53

score 0 · Answer 2 · answered Mar 29 '17 at 11:54

I have just added the required dependency files.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="tablesaw.css">
    <script src="tablesaw.js"></script>
    <script src="tablesaw-init.js"></script>
</head>
<body>
    <table class="table table-responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
            <thead>
                <tr>
                    <th>Movie Title</th>
                    <th>Rank</th>
                    <th>Year</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                    <th>Rating</abbr></th>
                    <th>Gross</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
                    <td>1</td>
                    <td>2009</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                </tr>
                <tr>
                    <td><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
                    <td>2</td>
                    <td>1997</td>
                    <td>88%</td>
                    <td>$2.1B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                    <td>83%</td>
                    <td>$2.7B</td>
                </tr>
            </tbody>
    </table>
</body>
</html>

Tablesaw headers not shown on mobile

2 Answers2