Retired

This repository is now officially retired. Please check out our new responsive tables project: Tablesaw.

Selectively displaying data

The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a., responsive design).

We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an option is checked, the associated data will persist and display at all screen widths until the option is unchecked.

You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is persistent.

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16