Clicky

Presenting Tabular Data
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Presenting Tabular Data

I reviewed all of RWExtra's stacks more or less in alphabetical order, so you may be wondering what happened to List Builder. Don't worry, I didn't forget it, but as I consider it to be the most intricate of the RWE stacks, I left it until last to analyse.

I deployed the old version of the stack many times and found it to be the most versatile table builder available for RapidWeaver. Nothing has changed my perception of the stack, except that it got better!

The results that the old TableBuildr stack produced were, it can't be denied, great. The only problem with the stack was that table cells were listed vertically in edit mode. This meant that if you had a number of columns in a table, your edit page would be a mile or two long; not least due to the fact that the stack header was also very large.
The new Table Builder stack has undergone a complete re-write and its presentation on the edit page is much more logical and compact. The resulting tables also appear much cleaner than before.


So where do you start? Once you take a look at the settings panel, you'll realise that everything is actually quite simple.
The first settings are the number of Columns, the Column Sizing – Pixels (Default), or Auto (the cell size adjusts to fit your content) – and the Column Width. The Pixel Width should be understood as maximum width; Table Builder columns have limited responsiveness and will shrink to some extent to accommodate narrower viewports. However, we have defined a 'fixed' cell. We can't reasonably expect a 10 column table to fit onto a mobile screen and still be readable. When Table Builder is wider than the screen it is being viewed on, a slider appears at the bottom of the table..

Next up, you can set the cell Borders. The default setting is All Sides. The options are Table Box Only i.e. the outermost border; Horizontal and Vertical. The default Border Size is set to 1px. You'll notice that in the screenshot above, the border between the top three columns is actually 2px wide; that's is because these are actually three tables set next to each other. This allows my table to reflow on a mobile screen and still display the information comfortably with each table displayed below the other.

The option Table Fill allows you to change the default None to Alternating Rows, Alternating Columns, or Solid. The text Alignment is a global setting for the whole table, but can be overridden on a row-by-row basis, the same applies to the setting Vertical Align – we'll come to these once we take a look at the stack itself, but first the final settings: These are Cell Padding, Line Height, Text Colour and a check box Make First Column Heading which, when clicked, opens up the formatting for the first line of content.

So let's build our table! When you click the blue + button to add your first cild stack, the first Table Row will appear with the number of columns that you set previously. Each cell has a container into which you can drop the stacks for your content. A cell may remain empty without breaking the Table Builder layout.
Once you've added your content to the first row, you can add more child stacks until your table is complete.

The situation may arise, where you wish to format Table Builder rows differently to the overall table content – for dividing headings for instance. Just click the table row and re-open the settings panel. It will now display a checkbox Override Table Styles. In Preview mode, your row will immediately alter its appearance to bold text with a grey background.
You can now set to work to reformat this specific row with the following settings: Bold Text (is activated by default), Disable Borders, Italicized Text, Column Fill for Odd and Even columns, Text Alignment, Vertical Alignment, Cell Padding, Font Size, Line Height and Text Colour. If you need to repeat the formatting further down the table, you can copy and paste or Alt drag and drop the row to its new position and replace its content accordingly.

Table Builder is, in my humble opinion, the best of its kind. I've had it in my toolbox for a number of years and wouldn't want to miss it. And if you have a larger table that needs to be viewed on a mobile device without swiping horizontally, there's always a workaround (see above).

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required