SuperTable Plugin: Powerful Tabular Data

Introduction

Introduction to SuperTable

SuperTable runs when Joomla prepares an article for display, and just before the page is sent to the browser. This means you can use it anywhere you can put a table, in any component or module.

We'll start with a little information in a table, created in Joomla's default editor (TinyMCE). You can use any editor you want.

That's kind of boring! To start fixing it, put the Supertable markup around the table:

{supertable table}
HTML table
{/supertable}

This is what you get:

It's important to remember two things:

First, your table must be "valid XML". Usually this is pretty easy to achieve, but you might find some old code like this:

(we're using angle quotes for less than and greater than
because our editor insists on "fixing" our example.)
«img src="/pic.jpg" border=0»

Supertable will generate nothing if it sees code like that. A valid alternative is

«img src="/pic.jpg" border="0"/»

It's a good idea to make sure your code is valid anyway. Browsers do a much better job of displaying valid pages.

Second, you can't use multi-cell attributes, like colspan="2". SuperTable ignores these and you won't get the output you expect.

Swapping Rows for Columns

Our table is better, but SuperTable highlights columnar data and we have our data in rows. Most data is row based, and swapping data around is tedious. That's why SuperTable has a transpose function:

{supertable table transpose}
HTML table
{/supertable}

Now we have a column orientation:

More Formatting

A few things need to be fixed! The longer text has taken up two lines and pushed their columns down, and the headings don't stand out from the data. We also want the heading column to be narrower than the data columns. If we were Ferrari fans and wanted to highlight our team, we would make it the "active" column.

{supertable table transpose}
{active 3}
{headcols 1 15}
{headrows 1}
{rowheight 1 45px}
{rowheight 3 45px}
HTML table
{/supertable}

(all the SuperTable commands can be on one line if you prefer)

Now the table is starting to take shape:

That's just the basics of SuperTable. You can select from other built-in styles, specify your own CSS, and lots more. Check out the details tab to see everything SuperTable can do!

Details

Plugin Parameters

The plugin only has a few parameters:

Commands

The form of a SuperTable call is

{supertable table [options]}
[optional commands]
Your HTML table
{/supertable}

The commands are usually {command [options]}, but if a command conflicts with another plugin, you can add the trigger word so it becomes {supertable command [options]}

The HTML table can also contain these cell-level commands: class, link, style, subtext, target, and text. Commands are flagged with Cell and Table to indicate where they can be used.

Active Command (Table)

The active command defines which column is highlighted when the user is not mousing over the table.

Formats:

{active column#}
{supertable active column#}

Example:

{active 3}

Borders Command (Table)

The borders command adds DIV tags to the output that surround the table and each column. This is intended to offer additional style options. The default value is off.

Formats:

{borders on|off}
{supertable borders on|off}

Example:

{borders on}

Class Command (Table, Cell)

The class command adds a class identifier to the applicable HTML. When used at the table level, the outermost DIV has this class added. When used at the cell level, the DIV that contains the cell contents has this class added.

Formats:

{class name}
{supertable class name}

Example:

{class monochrome}

Clear Command (Table)

The clear command adds a clearing DIV after the table. If the value is zero, nothing is added.

Formats:

{clear number}
{supertable clear number}

Example:

{clear 1}

CSS File Command (Table)

The CSS File command lets you include CSS for the table. Usually this would be used in conjunction with the class command or the id command to bring in table specific styles.

Formats:

{cssfile path}
{supertable cssfile path}

Example:

{cssfile path/to/file.css}

Header Columns Command (Table)

The header columns command defines how many table columns will have header styles applied to them. The optional second parameter defines the percentage of the table width that the header columns should take. If no width is specified the columns are distributed evenly.

Formats:

{headcols count [width]}
{supertable headcols count [width]}

Examples:

{headcols 1 12.5}
{headcols 2}

Header Rows Command (Table)

The header rows command defines the number of rows that will have header styles. If not present, no rows will be headers.

Formats:

{headrows number}
{supertable headrows number}

Example:

{headrows 1}

ID Command (Table)

The id command sets a HTML id for the outer DIV of the table. This can be used to apply specific CSS rules.

Formats:

{id identifier}
{supertable id identifier}

Example:

{id special-table}

Link Command (Cell)

The link command turns text in the cell into a link and specifies the URL (also see the target command).

Formats:

{link url}
{supertable link url}

Example:

{link http://www.abivia.net/}

Row Height Command (Table)

The row height command defines the height of a table row. This command can occur multiple times.

Formats:

{rowheight row# css-height}
{supertable rowheight row# css-height}

Examples:

{rowheight 1 45px}
{rowheight 5 3ex}

Style Command (Table, Cell)

The style command allows you to add CSS to a specific table cell. In version 1.0.0 and higher, the style command works at the table level.

Formats:

{style css}
{supertable style css}

Example:

{style font-family:serif; font-size: 120%;}

Subtext Command (Cell)

Specifies text to be placed in a subtext span.

Formats:

{subtext any text}
{supertable subtext any text}

Example:

{subtext Daily Special!}

Target Command (Cell)

The target command defines the target attribute of any links in the cell (also see the link command).

Formats:

{target value}
{supertable target value}

Example:

{target _blank}

Text Command (Cell)

Normally the text value of a cell is the information that's left over after other commands have been removed. The link command allows you to specify the cell's text exactly.

Formats:

{text any text}
{supertable text any text}

Example:

{text Mark Webber}

Release Notes

Version 1.0.3

• Made a change to correct an issue with some versions of PCRE that was causing SuperTable to not run on some hosts. Thanks to user northis and his host for identifying the solution.

Version 1.0.2

• Fixed an issue where the plugin wasn't generating properly when used in a module.

Version 1.0.1

• Fixed a minor bug in data formatting. Only the pro version is affected.

Version 1.0.0

• Introduced SuperTable Pro.
• Added new class references so now there are even more ways to style a SuperTable (including column parity, column number, and row number).
• Added the style class to the table level.
• Fixed a bug with debug output (debugging information is written as a HTML comment when turned on).

Version 0.0.7

• Fixed a divide by zero error in the case where there were no header columns. This error was introduced in 0.0.6.

Version 0.0.6

• Fixed a bug: tables with more than one header column were being allocated too much width (thanks to Brian Teeman for the report).
• Several fixes to the CSS in the "ahs" style (thanks to Flavia Silveria and Brian Teeman).
• Updated documentation to note restrictions on the source table (valid XML, no rowspan or colspan).

Version 0.0.5

• Added some GPL license headers and index.html files to meet JED requirements.

Version 0.0.4

• First public availability. This release is suitable for test environments. There are probably bugs, use at your own risk.
• The CSS presets have some known minor issues. These will be updated over time. Fixes are welcome.

Download

Links to download pages:

Joomla 1.5

Joomla 1.6

Joomla 1.7