Tablesaw Examples
Some tables are very complex and are difficult to neatly wrap with CSS alone. Tablesaw is a "flexible tool for responsive tables." It supports a combination of methods that can help make tables more responsive. Because not all tables are alike, extra CSS and Javascript may be needed to make your tables work with these examples.
For all these examples, adjust the browser width to see how the tables respond.
Stack Table
The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.
| Skill | Last Entry | Alphabet | More Alphabet |
|---|---|---|---|
| SkillBartender | Last EntryMay 2, 1:34p John K. | AlphabetA, B, C, D | More AlphabetE, F, G, H |
| SkillHost | Last EntryMay 11, 12:45a | AlphabetA, B, C, D | More AlphabetE, F, G, H |
Sortable Table
Default appearance (with optional sortable-switch <select>)
Users may sort the table using the <select> input or by selecting the heading column.
| Reviews | |||||
|---|---|---|---|---|---|
| Rank1 | Movie TitleCitizen Kane | Year1941 | Rating100% | Reviews74 | Box Office$2M |
| Rank1 | Movie Titlecitizen kane | Year1941 | Rating100% | Reviews74 | Box Office$1M |
| Rank1.2 | Movie Titlecitizen blane | Year1941 | Rating100% | Reviews74 | Box Office$12M |
| Rank1.3 | Movie Titlecitizen Lane | Year1941 | Rating100% | Reviews74 | Box Office$4.2M |
| Rank2 | Movie TitleCasablanca | Year1942 | Rating97% | Reviews64 | Box Office$1M |
| Rank3 | Movie TitleThe Godfather | Year1972 | Rating97% | Reviews87 | Box Office$1M |
| Rank4 | Movie TitleGone with the Wind | Year1939 | Rating96% | Reviews87 | Box Office$1M |
| Rank5 | Movie TitleLawrence of Arabia | Year1962 | Rating94% | Reviews87 | Box Office$1M |
| Rank6 | Movie TitleDr. Strangelove ... | Year1964 | Rating92% | Reviews74 | Box Office$1M |
| Rank7 | Movie TitleThe Graduate | Year1967 | Rating91% | Reviews122 | Box Office$1M |
| Rank8 | Movie TitleThe Wizard of Oz | Year1939 | Rating90% | Reviews72 | Box Office$1M |
| Rank9 | Movie TitleSingin' in the Rain | Year1952 | Rating89% | Reviews85 | Box Office$1M |
| Rank10 | Movie TitleInception | Year2010 | Rating84% | Reviews78 | Box Office$1M |
Swipe Table
For mobile display widths, you can click the arrows to scroll left and right. On actual mobile devices, you should be able to swipe your finger left or right.
| Name | Rank | Money | Money | A (1–5) | B (1–5) | C (%) | D (1–5) | E (1–5) | F (1–5) |
|---|---|---|---|---|---|---|---|---|---|
| Amanda | 1 | 19.45 | 18.72 | 5 | 5 | 98 | 5 | 4 | 3 |
| Dave | 2 | 36.32 | 20.52 | 4 | 3 | 87 | 5 | 4 | 3 |
| Kristen | 3 | 35.23 | 21.36 | 2 | 5 | 89 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
Swipe Table with Mini Map
Same as the previous example but with a little "map" of dots showing your location without the wider table.
| Name | Rank | Money | Money | A (1–5) | B (1–5) | C (%) | D (1–5) | E (1–5) | F (1–5) |
|---|---|---|---|---|---|---|---|---|---|
| Amanda | 1 | 19.45 | 18.72 | 5 | 5 | 98 | 5 | 4 | 3 |
| Dave | 2 | 36.32 | 20.52 | 4 | 3 | 87 | 5 | 4 | 3 |
| Kristen | 3 | 35.23 | 21.36 | 2 | 5 | 89 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
| Kenny | 4 | 34.65 | 27.15 | 4 | 4 | 98 | 5 | 4 | 3 |
Column Toggle Table
The Column Toggle Table allows the user to select which columns they want to be visible. This example is still being developed.
| Rank | Movie Title | Year | Rating | Reviews |
|---|---|---|---|---|
| 1 | Citizen Kane | 1941 | 100% | 74 |
| 2 | Casablanca | 1942 | 97% | 64 |
| 3 | The Godfather | 1972 | 97% | 87 |
| 4 | Gone with the Wind | 1939 | 96% | 87 |
| 5 | Lawrence of Arabia | 1962 | 94% | 87 |