This repository has been archived by the owner on Oct 21, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 432
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
309 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <!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"> | ||
| <title>TableSaw Column Toggle Table</title> | ||
|
|
||
| <link rel="stylesheet" href="../dist/tablesaw.css"> | ||
| <link rel="stylesheet" href="demo.css"> | ||
| <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css"> | ||
| <style> | ||
| th, | ||
| td { | ||
| border: 1px solid #000; | ||
| } | ||
| </style> | ||
| <script src="../dist/tablesaw.js"></script> | ||
| <script src="../dist/tablesaw-init.js"></script> | ||
| <script src="//filamentgroup.github.io/demo-head/loadfont.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="demo-header"> | ||
| <div class="company"> | ||
| <img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png"> | ||
| </div> | ||
| <div class="details"> | ||
| <h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span> | ||
| <span class="description">A group of plugins for responsive tables.</span> | ||
| </h1> | ||
| <ul class="outbound-links"> | ||
| <li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li> | ||
| <li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="nav-container"> | ||
| <div class="docs-globalnav"> | ||
| <nav class="docs-nav"> | ||
| <a href="kitchensink.html" class="current">Kitchen Sink</a> | ||
| <a href="modeswitch.html">Mode Switch</a> | ||
| <a href="sort.html">Sortable</a> | ||
| <a href="stack.html">Stack</a> | ||
| <a href="stackonly.html">Stack Only</a> | ||
| <a href="swipe.html">Swipe Table</a> | ||
| <a href="toggle.html">Toggle</a> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="docs-main"> | ||
| <h2>Colspans</h2> | ||
| <table class="tablesaw" data-tablesaw-mode="columntoggle" data-tablesaw-minimap data-tablesaw-mode-switch> | ||
| <thead> | ||
| <tr> | ||
| <th data-tablesaw-priority="1">Header 1</th> | ||
| <th data-tablesaw-priority="1">Header 2</th> | ||
| <th data-tablesaw-priority="1">Header 3</th> | ||
| </tr> | ||
| <tr> | ||
| <th data-tablesaw-priority="1">Header 1</th> | ||
| <th data-tablesaw-priority="1" colspan="2">Header 2 (colspan=2)</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>1</td> | ||
| <td>2</td> | ||
| <td>3</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="2">colspan="2"</td> | ||
| <td>3</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <!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"> | ||
| <title>TableSaw Column Toggle Table</title> | ||
|
|
||
| <link rel="stylesheet" href="../dist/tablesaw.css"> | ||
| <link rel="stylesheet" href="demo.css"> | ||
| <link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css"> | ||
|
|
||
| <script src="../dist/tablesaw.js"></script> | ||
| <script src="../dist/tablesaw-init.js"></script> | ||
| <script src="//filamentgroup.github.io/demo-head/loadfont.js"></script> | ||
| </head> | ||
| <body> | ||
| <div class="demo-header"> | ||
| <div class="company"> | ||
| <img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png"> | ||
| </div> | ||
| <div class="details"> | ||
| <h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span> | ||
| <span class="description">A group of plugins for responsive tables.</span> | ||
| </h1> | ||
| <ul class="outbound-links"> | ||
| <li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li> | ||
| <li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="nav-container"> | ||
| <div class="docs-globalnav"> | ||
| <nav class="docs-nav"> | ||
| <a href="kitchensink.html">Kitchen Sink</a> | ||
| <a href="modeswitch.html">Mode Switch</a> | ||
| <a href="sort.html">Sortable</a> | ||
| <a href="stack.html">Stack</a> | ||
| <a href="stackonly.html">Stack Only</a> | ||
| <a href="swipe.html">Swipe Table</a> | ||
| <a href="toggle.html" class="current">Toggle</a> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="docs-main"> | ||
|
|
||
| <h2>Column Toggle with Rowspan Table</h2> | ||
| <table class="tablesaw" data-tablesaw-mode="swipe"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th> | ||
| <th scope="col" rowspan="2" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3" style="border: 1px solid #000">rowspan=2</th> | ||
| <th scope="col" colspan="2" data-tablesaw-sortable-col data-tablesaw-priority="2" style="border: 1px solid #000">colspan=2</th> | ||
| </tr> | ||
| <tr> | ||
| <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th> | ||
| <th scope="col" colspan="2" data-tablesaw-sortable-col data-tablesaw-priority="2" style="border: 1px solid #000">colspan=2</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td> | ||
| <td>1</td> | ||
| <td>2009</td> | ||
| <td rowspan="2" style="border: 1px solid #000">rowspan=2</td> | ||
| </tr> | ||
| <tr> | ||
| <td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td> | ||
| <td>2</td> | ||
| <td>2009</td> | ||
| </tr> | ||
| <tr> | ||
| <td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td> | ||
| <td>3</td> | ||
| <td>2012</td> | ||
| <td>2012</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.