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