Responsive Tables - for presenting complex forms elegantly on mobile devices
Summary of features
Bootstrap's scrolling table wrapper is fine for viewing the occasional table on a smartphone, but it is hardly the most elegant mobile solution. This is where two focused plugins come into play: FooTable and Stacktable. FooTable gradually collapses its columns into drop-downs as the viewport shrinks, whereas Stacktable presents an alternative two-column table at a particular breakpoint.
At a glance
- Both plugins integrate perfectly with the COLOURcode template styling.
- Both have been given styling enhancements when in their collapsed states.
- Stackable offers two modes of collapsed table presentation: stacks or cards.
- FooTable has built-in filtering, sorting and pagination for large datasets.
FooTable responsive table (in a coloured panel)
The table's columns show or hide (to a drop-down in the first column) as the viewport size changes through each breakpoint. Each column can be precisely configured to show or hide for each breakpoint.
| Category | Structure | Country | Flag | City | Height | Height |
|---|---|---|---|---|---|---|
| Mixed-Use | Burj Khalifa | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 830 m | 2,722 ft |
| Office | One World Trade Center | USA | <span class="flag-icon flag-icon-us"> </span> | New York | 541 m | 1,776 ft |
| Residential | Princess Tower | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 414 m | 1,358 ft |
| Hotel | JW Marriott Marquis | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 355 m | 1,166 ft |
| Education | Moscow State University | Russia | <span class="flag-icon flag-icon-ru"> </span> | Moscow | 240 m | 787 ft |
| Hospital | Guy's Hospital | UK | <span class="flag-icon flag-icon-gb"> </span> | London | 149 m | 488 ft |
FooTable with filtering and sorting
The table below has the following data attributes: data-filtering="true", data-sorting="true". Click on a column's header to sort the table by that column.
| Category | Structure | Country | Flag | City | Height | Height |
|---|---|---|---|---|---|---|
| Mixed-Use | Burj Khalifa | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 830 m | 2,722 ft |
| Office | One World Trade Center | USA | <span class="flag-icon flag-icon-us"> </span> | New York | 541 m | 1,776 ft |
| Residential | Princess Tower | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 414 m | 1,358 ft |
| Hotel | JW Marriott Marquis | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 355 m | 1,166 ft |
| Education | Moscow State University | Russia | <span class="flag-icon flag-icon-ru"> </span> | Moscow | 240 m | 787 ft |
| Hospital | Guy's Hospital | UK | <span class="flag-icon flag-icon-gb"> </span> | London | 149 m | 488 ft |
Coloured FooTable in a default panel
| Category | Structure | Country | Flag | City | Height | Height |
|---|---|---|---|---|---|---|
| Mixed-Use | Burj Khalifa | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 830 m | 2,722 ft |
| Office | One World Trade Center | USA | <span class="flag-icon flag-icon-us"> </span> | New York | 541 m | 1,776 ft |
| Residential | Princess Tower | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 414 m | 1,358 ft |
| Hotel | JW Marriott Marquis | UAE | <span class="flag-icon flag-icon-ae"> </span> | Dubai | 355 m | 1,166 ft |
| Education | Moscow State University | Russia | <span class="flag-icon flag-icon-ru"> </span> | Moscow | 240 m | 787 ft |
| Hospital | Guy's Hospital | UK | <span class="flag-icon flag-icon-gb"> </span> | London | 149 m | 488 ft |
Stacktable responsive table (in a coloured panel)
Stacktable.js creates a copy of the targeted table that is converted into a two-column key/value format and then shown for small screens, whilst at the same time the primary table is hidden.
| Category | Structure | Country | City | Height | Height |
|---|---|---|---|---|---|
| Mixed-Use | Burj Khalifa | UAE | Dubai | 830 m | 2,722 ft |
| Office | One World Trade Center | USA | New York | 541 m | 1,776 ft |
| Residential | Princess Tower | UAE | Dubai | 414 m | 1,358 ft |
| Hotel | JW Marriott Marquis | UAE | Dubai | 355 m | 1,166 ft |
| Education | Moscow State University | Russia | Moscow | 240 m | 787 ft |
| Hospital | Guy's Hospital | UK | London | 149 m | 488 ft |
Stacktable card table
Card table works similarly to stack table except that it breaks each row into its own table, thus the row tables function like cards.
| Category | Structure | Country | City | Height | Height |
|---|---|---|---|---|---|
| Mixed-Use | Burj Khalifa | UAE | Dubai | 830 m | 2,722 ft |
| Office | One World Trade Center | USA | New York | 541 m | 1,776 ft |
| Residential | Princess Tower | UAE | Dubai | 414 m | 1,358 ft |
| Hotel | JW Marriott Marquis | UAE | Dubai | 355 m | 1,166 ft |
| Education | Moscow State University | Russia | Moscow | 240 m | 787 ft |
| Hospital | Guy's Hospital | UK | London | 149 m | 488 ft |
Coloured Stacktable in a default panel
| Category | Structure | Country | City | Height | Height |
|---|---|---|---|---|---|
| Mixed-Use | Burj Khalifa | UAE | Dubai | 830 m | 2,722 ft |
| Office | One World Trade Center | USA | New York | 541 m | 1,776 ft |
| Residential | Princess Tower | UAE | Dubai | 414 m | 1,358 ft |
| Hotel | JW Marriott Marquis | UAE | Dubai | 355 m | 1,166 ft |
| Education | Moscow State University | Russia | Moscow | 240 m | 787 ft |
| Hospital | Guy's Hospital | UK | London | 149 m | 488 ft |