Joomla 1.5 Joomla 2.5 Joomla 3.x

Features

Free Styles

AHS (column mode)

Beez Green (column mode)

Mono (column mode)

RTO (collumn mode)

More Styles available in Plus and Pro!

Check out our commercial editions:

  • SuperTable Plus – row highlights, a full user manual, individual ticket support.
  • SuperTable Pro – use a local or remote database to retrieve your table data. Includes a full user manual, individual ticket support.

SuperTable Free edition

Abivia's SuperTable Plugin is designed to make your tabular data pop in seconds! SuperTable takes regular tabular data and turns it into a powerful and dynamic display.

SuperTable Features

  • System plugin lets you put a SuperTable anywhere on your site.
  • Built-in CSS style library with custom override to your own CSS file.
  • Each table can have its own class to support multiple styles on the same page.

SuperTable is a plugin, not a module. It doesn't have a fancy user interface, but you can create regular tables in your WYSIWYG editor and use SuperTable markup to create great results. This means you can put a table in an article, in a module, anywhere.

 

Driver
Nationality
Team
Points
Sebastian Vettel
German
RBR-Renault
374
Jenson Button
British
McLaren-Mercedes
240
Fernando Alonso
Spanish
Ferrari
227
Mark Webber
Australian
RBR-Renault
221

 

SuperTable has some restrictions:

  • Your table must be valid XML.
  • You can't use colspan or rowspan in your table.
  • In a Joomla 1.5 site, you need to enable the "System - Mootools Upgrade" plugin to get mootools 1.2.5.

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.

Driver Nationality Team Points
Sebastian Vettel German RBR-Renault 374
Jenson Button British McLaren-Mercedes 240
Fernando Alonso Spanish Ferrari 227
Mark Webber Australian RBR-Renault 221

 

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:

Driver
Sebastian Vettel
Jenson Button
Fernando Alonso
Mark Webber
Nationality
German
British
Spanish
Australian
Team
RBR-Renault
McLaren-Mercedes
Ferrari
RBR-Renault
Points
374
240
227
221

 

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:

Driver
Nationality
Team
Points
Sebastian Vettel
German
RBR-Renault
374
Jenson Button
British
McLaren-Mercedes
240
Fernando Alonso
Spanish
Ferrari
227
Mark Webber
Australian
RBR-Renault
221

 

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:

Driver
Nationality
Team
Points
Sebastian Vettel
German
RBR-Renault
374
Jenson Button
British
McLaren-Mercedes
240
Fernando Alonso
Spanish
Ferrari
227
Mark Webber
Australian
RBR-Renault
221

 

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. It is not the complete documentation. For ALL commands and options see the

SuperTable Free Reference Manual.

Activating SuperTable

SuperTable is easy to use. Just create a table with your regular HTML editor, then surround it with a SuperTable call!

{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 - Set active column

Active Command (Table)

The active command defines which column is highlighted when the user is not mousing over the table. Starting with version 1.1 you can also completely disable the mouse-over highlighting by using "disable" for the column.

Formats:

{active column#}
{supertable active column#}

Example:

{active 3}
{active disable}

bodywidth - Set width of body columns

Bodywidth Command (Table) [v1.3+]

The bodywidth command provides individual control over the width of columns in the table body. Values are expressed as relative weights.

Formats:

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

borders - Add an extra table border

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 - Set a custom CSS class

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 - Add a clearing DIV

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}

cssfile - Set a custom CSS file

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}

headcol - Set column as a header

Header Column Command

The header column command sets the current column to be a header.

Format:

{headcol}
{supertable headcol}

Examples:

{headcol}

headcols - Set number of header columns

Header Columns Command (Table) [enhanced in v1.3+]

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.

Starting in version 1.3, multiple column widths can be provided, one for each column.

Formats:

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

Examples:

{headcols 1 12.5}
{headcols 2}

headrow - Set row as a header

Header Row Command

The header row command sets the current row to be a header.

Format:

{headrow}
{supertable headrow}

Examples:

{headrow}

headrows - Set number of header rows

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 - Set a HTML id for the table

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 Make cell contents a lnk

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/}

SuperTable Plus and Pro offer additional link options, including being able to set an entire row or column as a link, and setting different links for a cell's text and subtext.

rowheight - Set row height

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 - Custom CSS Style

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 - A second Line of text

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 - Target window for links

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 - Main cell text

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}

wrapper - Create a surrounding div for styling

Wrapper Command (Table) [v1.2+]

By default, SuperTable surrounds output in a div tag with the class "wrapper". This can cause problems with some templates. The wrapper command can be used to remove the div. The default setting is "on".

Formats:

{wrapper setting}
{supertable wrapper setting}

Examples:

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

Plugin Parameters

Plugin Parameters

The plugin only has a few parameters:

Parameter Description Default
Trigger Word This is what the plugin looks for to start a table. supertable
CSS Mode

Where to get CSS for the table. Options are:

No additional CSS - CSS is already included as part of the template.

SuperTable preset - Use the style selected by the "CSS Template" parameter

Custom - Use the styles provided in the file specified by the "Custom CSS File" parameter.

SuperTable preset
CSS Template This is a list of predefined styles. ahs
Custom CSS File This is a path to the custom CSS file. (blank)
Put messages in

Controls error/warning message output. Options are:

  • Off – Messages are not output.

  • HTML Comments – Messages are written as comments in the output.
  • Article Text – Messages are displayed at the bottom of the article.

Notes:

  1. The same message may be displayed multiple times. This is unavoidable.
  2. The article text option only works on content articles. Any calls to SuperTable in a module will fall back to writing HTML comments.
HTML Comments
Debugging Controls the output of diagnostic information. Diagnostics appear as HTML comments in the page. Off

Release Notes

Version 2.0.3

  • All Editions
    • Auto row height issues have been fixed. All versions now use JQuery.
    • Old IE6 style break tags are auto-converted to valid XML.
    • Improved diagnostics when invalid command found.

Version 2.0.2

  • All Editions
    • Added French translation (fr-FR).
    • Pro: add {$userid} to get current logged in user in a query.

Version 2.0.1

  • All Editions
    • Major update with several new features.
    • Automatic row height calculation.
    • Native jQuery in Joomla 3.x versions.
    • RTL Language support.
    • More responsive on mobile devices.
    • New data sources in Pro: CSV, JSON, and XML.
    • more cell content flexibility for "big cell" tables.
    • New commands to simplify layouts.
    • Language strings to facilitate translations.

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 1.5

Joomla 2.5 Joomla 2.5

Joomla 3.x Joomla 3.x

Compare

Edition
Subscription Price
Highlight Columns
Highlight Rows
Database Queries
DB Look-up Tables
Style Library
Extended Style Library
Use your own CSS
Support
Get a Copy
More Information
Free
$0
Yes
No
No
No
Yes
No
Yes
Public Forum
Plus
$19
Yes
Yes
No
No
Yes
Yes
Yes
Ticket System
Pro
$39
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Ticket System

 

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

  Column Mode Row Mode

AHS

AHS (Free) AHS (Plus and Pro)
Beez Green Beez Green (Free) Beez Green (Plus and Pro)
Mono Mono (Free) Mono (Plus and Pro)
Revista Blue Complimentary 1 Revista Blue Complimentary 1 (Plus and Pro) Revista Blue Complimentary 1 (Plus and Pro)
Revista Blue Complimentary 2 Revista Blue Complimentary 2 (Plus and Pro) Revista Blue Complimentary 2 (Plus and Pro)
Revista Blue Monochrome Revista Blue Monochrome (Plus and Pro) Revista Blue Monochrome (Plus and Pro)
RTO RTO (Free) RTO (Plus and Pro)

.

Share