Stacks4Stacks

The CSVtoTable and TableBuilder stacks have long been the go-to stack for many people wanting to create tables in RapidWeaver without code. And to be fair, both do an impressive job of this. But to support mobile devices, it has only been possible to scroll tables horizontally. Advances in HTML and CSS technologies now enable us to take a simple table and make it 'flat pack' to fit mobile screen sizes more comfortably, without horizontal scrolling. FlatPack is good to use for smaller tables, and in instances where you don't require features like column or cell merging.

"Best table stack. Using [FlatPack] for posting soccer match fixtures on the club website. Lots of people coming to the website on iPhone. This stack works like a dream. Really well thought out and put together." - David

Much like TableBuilder, the FlatPack stack supports up-to 15 columns and features a wealth of colour and style options. No complicated code is required to accomplish a simple table. The differences between these two stacks become more apparent when you start comparing things on mobile. FlatPack cleverly breaks a table down into two columns. The addition of a live filter box give FlatPack true 'app like' characteristics; making it far easier for mobile users to view long tables or find what they are looking for.

You would naturally think that FlatPack requires a huge underpinning of complicated code to make it work. The reality is that a majority of the stack is built using standards-compliant HTML and CSS code. The only Javascript code used is a few lines for the optional live filter. Therefore completed tables are always highly accessible, search engine friendly and super lightweight. FlatPack has been extensively tested on a wide range of web browsers and different handheld devices.

Examples

Here are a couple of FlatPack examples. More examples are available in the project file to download, which you can test against using the free trial version or full versions of FlatPack.

A basic table
Comprising of 4 columns and 5 rows. Using the default style and colour options.

A product comparison table
Featuring more table rows. The option has been used to style the first column as a header. Highlighting was also enabled for the third column, to present it with a pale yellow background on desktop.

Setup

Like with other table stacks offered by Stacks4Stacks, the onus of FlatPack has been put on ease and speed of setup. To get a basic table working, please follow these steps:

1. Download and install FlatPack in the normal way.
2. Once installed, drag and drop a copy of the FlatPack stack from your Stacks Library into your Stacks page
3. In the FlatPack table settings, choose how many rows you want your table to have. Up-to 15 rows are supported.
4. Within the group of Table Header Labels, type the names of column headers, as you want them displayed on your website.
5. Click on the blue button in the main page, to add horizontal rows to your table.
6. Within each of the table cells, add the content you want shown. Basic content types and stacks like text, Markdown, images, audio, video and HTML are supported.
7. Keep referring back to the FlatPack settings to adjust the style and behaviour of your table. All settings have informational tooltips to help guide you.
8. Save the changes when done. Publish or export your website in the normal way, when done.

Need to add many rows in bulk? It may be quicker to use the CSV data source, instead of adding individual rows to your table. Most spreadsheet software can export data in CSV format or you can manually type it yourself in a plain text editor. FlatPack uses a clever method of PHP code to read the CSV file and automatically convert the data into table format. Continue to add your table column headings, in the FlatPack table settings.