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:

tablesaw doc

table-saw demo

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?

Answer 1

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>

Answer 2

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>