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

This is a quick command summary. You can also check out the

SuperTable Free Reference Manual.

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

{active column#}
{supertable active column#}

{active 3}
{active disable}

{bodywidth 10 15 15 30}
{supertable bodywidth 10 15 15 30}

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

{borders on}

{class name}
{supertable class name}

{class monochrome}

{clear number}
{supertable clear number}

{clear 1}

{cssfile path}
{supertable cssfile path}

{cssfile path/to/file.css}

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

{headcols 1 12.5}
{headcols 2}

{headrows number}
{supertable headrows number}

{headrows 1}

{id identifier}
{supertable id identifier}

{id special-table}

{link url}
{supertable link url}

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

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

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

{style css}
{supertable style css}

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

{subtext any text}
{supertable subtext any text}

{subtext Daily Special!}

{target value}
{supertable target value}

{target _blank}

{text any text}
{supertable text any text}

{text Mark Webber}

{wrapper setting}
{supertable wrapper setting}

{wrapper off}
{wrapper on}
{wrapper 0}

Release Notes

Version 1.8.2

• All Editions
  • Fixes a missing function in the Joomla 3.0 version. SuperTable for Joomla 1.5 and 2.5 are not affected by this update.

Version 1.8.1

• All Editions
  • Supports Joomla 3.0.
  • Fixes problem with editing on front end (only an issue in Joomla 1.5).
  • Compatible with mootools updates in Joomla 3.0

Version 1.8.0

• All Editions
  • More improvements to HTML injection code; added {htmlfix} command to disable injection logic.

Version 1.7.2

• All Editions
  • Changed mootools load strategy to avoid a Joomla 2.5 issue.

Version 1.7.1

• All Editions
  • Fixed error when loading plugin parameters.

Version 1.7.0

• All Editions
  • Table injection code has been overhauled to not break HTML no matter what context the SuperTable call is made in.
  • New plugin parameter disables mootools load to avoid conflicts (has no effect in Joomla 1.5).
  • When the user is running IE8, uses integer percentages for table widths. This should avoid table breakage when IE rounds up.
  • Eliminated an error when other extensions fire a content prepare event without required parameters.
  • Minor CSS improvements.
• Plus and Pro Editions
  • Three new CSS presets for YooTheme Revista Blue (partially sponsored development).

Version 1.6.0

• Plus and Pro Editions
  • New {blocklink} and {blocktarget} commands allow an entire row or column to be linked.

Version 1.5.2

• All Editions
  • SuperTable now generates class references for table columns by number. This only affects sites that use custom CSS to change individual row styles.

Version 1.5.1

Only Pro is affected; there is no need to upgrade Free or Plus editions.

• Pro Edition
  • Corrects an undefined variable bug introduced in version 1.4.0

Version 1.5.0

• All Editions
  • All CSS styles have been improved. Includes one bug fix and several aesthetic updates.
  • A redundant class was eliminated from the generated HTML (supertable-col-head in a header row).
  • Fix warnings generated by problem with new diagnostics in 1.4.0.
  • Minor version bump because of the HTML change.

Full release notes for all versions

Download

Links to download pages:

Joomla 1.5

Joomla 2.5

Joomla 3.0

Compare

Available Styles - All Row mode styles are Plus and Pro exclusives. Bold Styles are Plus and Pro only.

	Column Mode	Row Mode
AHS
Beez Green
Mono
Revista Blue Complimentary 1
Revista Blue Complimentary 2
Revista Blue Monochrome
RTO