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 |
---|---|---|---|
Bartender | May 2, 1:34p John K. | A, B, C, D | E, F, G, H |
Host | May 11, 12:45a | A, B, C, D | E, 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.
Rank | Movie Title | Year | Rating | Reviews | Box Office |
---|---|---|---|---|---|
1 | Citizen Kane | 1941 | 100% | 74 | $2M |
1 | citizen kane | 1941 | 100% | 74 | $1M |
1.2 | citizen blane | 1941 | 100% | 74 | $12M |
1.3 | citizen Lane | 1941 | 100% | 74 | $4.2M |
2 | Casablanca | 1942 | 97% | 64 | $1M |
3 | The Godfather | 1972 | 97% | 87 | $1M |
4 | Gone with the Wind | 1939 | 96% | 87 | $1M |
5 | Lawrence of Arabia | 1962 | 94% | 87 | $1M |
6 | Dr. Strangelove ... | 1964 | 92% | 74 | $1M |
7 | The Graduate | 1967 | 91% | 122 | $1M |
8 | The Wizard of Oz | 1939 | 90% | 72 | $1M |
9 | Singin' in the Rain | 1952 | 89% | 85 | $1M |
10 | Inception | 2010 | 84% | 78 | $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 |