SBD Nicer Tables

Article Index
SBD Nicer Tables
Instructions
Downloads
Simple Examples
Advanced Examples
Pricing
All Pages

Introduction

This mambot/plugin is based upon modified version of the following scripts:

SoftComplex's Tigra Tables
HTML Table Filter Generator v1.6* By Max Guglielmi (mguglielmi.free.fr/scripts/TableFilter/?l=en )
Standardista Table Sorting (http://sourceforge.net/project/showfiles.php?id=162528 )

* The new Joomla 1.5 Native version uses v1.9 of the Table Filter generator script

The original Tigra Tables JavaScript component applys nice visual effects to HTML tables on the client-side making them easier to read, it has been modified to work with a table filter (HTML Table Filter Generator) and table sorter (Standardista Table Sorting) to provide a powerful yet relatively easy to use mambot script to provide useful features to tables.

Nicer Tables Features:

• alternating rows colors, either by fixed colour or CSS
• onmouseover row effect, either by fixed colour or CSS
• easy row (un)marking with mouse click, either by fixed colour or CSS
• all colors configurable either by colour (not Joomla 1.5 native) or CSS
• table header and footer offsets configurable **
• multiple independent tables configurations per page
• only a minute to set up
• general or per table settings
• relatively fast, light and robust

** Footers cannot be used when sorting is required, filtering will remove the footer on selection.

Nicer Tables Compatibility List:

Though the scripts used in this mambot have been successfully tested in various browsers I cannot guarantee the same with the combined scripts, it has been tested in the following browsers so should work in later versions:

• Opera 9.10
• Netscape 7.6
• FireFox 2.0.0.6
• Internet Explorer 6

The original Tigra Table javascript originally worked in the following browsers:

• Microsoft Internet Explorer 4+
• Mozilla FireFox 1+
• Netscape 6+
• Safari 1+
• Opera 7+

For comments, suggestions, problems and help, please use our forums.

 

 

Usage Instructions:

To use this mambot, you need to add an ID to a table, and pass this ID to the following code example below:

For example:

<table id="mytable"><tr><td></td></tr></table>

{ sbdnicertables titleId=mytable} *

Tip: you can set a default table config in the mambots parameters, then all you need to do is assign the table the ID placed here, then just use { sbdnicertables} * and it'll use these settings.

If you require a different look for a certain table you can use the following paramters (Note: any left out the system will use the default ones set).

Parameters:

tableid - This is the ID you set in the table, without setting this the mambot will try to assign the default settings configured in the mambot. Please note the Joomla 1.5 native version requires unique tableids per table

headeroff - How many rows to skip before applying effects at the begining of the table. Must be numerical.

footeroff - How many rows to skip at the bottom of the table. Must be numerical. Note: it is not possible to use a footer when sorting is required.

The following parameters define the colour and or css style to be used, they all accept the same configuration parameters which can be any of the following:

Colour code, for example #000000 or black

CSS Style (class), for example css#classname, so if you had a class .classname in your CSS file this would be used. the css# must be used for the mambot to use CSS styling.

oddcol - the colour or style for odd rows (Joomla 1.0 or Joomla 1.5 legacy only)

evencol - the colour or style for even rows (Joomla 1.0 or Joomla 1.5 legacy only)

movercol - the colour or style for rows highlighted with the mouse (Joomla 1.0 or Joomla 1.5 legacy only)

onclickcol - the colour or style for the row clicked upon (Joomla 1.0 or Joomla 1.5 legacy only)

oddStyle - the style class to use for the odd rows of table (Joomla 1.5 Native version only)

evenStyle - the style class to use for the even rows of table (Joomla 1.5 Native version only)

moverStyle - the style class to use for the mouse over row of table (Joomla 1.5 Native version only)

onclickStyle - the style class to use for the clicked row of table (Joomla 1.5 Native version only)

filterstart - add this is you wish the table to be filtered. True or False

butShow - whether you wish to enable a submit button for the filtering options. True or False

butValue - the value for the filter button, maybe anything you like. Default: >

displayText - the text to display for showing all or resetting default option in filtering dropdowns. Default: < Show All >

resetBut - whether a reset button is displayed to reset all filters. True or False

resetText - the text for the reset button. Default: Reset

sortSelect - whether to attempt to sort the drop down values for the filters

colOptions -  here you can specify the options for the filters, you have three options available:

1. Text Box
2. Drop Down
3. No Filter

By default all filters become text boxes, if this is the desired option the colOptions need not be set or used. To set a dropdown option for the column the format is the following (Note: column numbers start at 0 for the first column):

column number:s

So if you want the first and second column with drop downs you would use the following, any remaining columns would use a text box:

colOptions=0:s,1:s

Note the use of the comma to seperate the commands for each column, to remove the option to filter on a column just add the column number on its own, so using the above example, the following code would provide the first two columns as drop downs followed by the second two columns with no filtering:

colOptions=0:s,1:s,2,3

An example of how to add the code is provided below, for better examples and how they look take a look at the example pages:

{ sbdnicertables tableid=test headeroff=1 footeroff=0 oddcol=#cccccc evencol=#ffffff movercol=#f5f5f5 onclickcol=#666666} *

* Remove the space between { and sbdtigratable, for example {sbdtigratable, to use properly.

With the additional ability to use CSS in the table rows, you can use either CSS from your template or you can use the CSS file provided with the mambot, which by default is the selected option. In this file you can add numerous  preconfigured styles and call them within the mambot rather than having to remember all the different schemes that you use.

The file is located in the following location: <joomla installation>/mambot/content/sbdnicertables/sbdnicertables.css (Joomla 1.0 or Joomla 1.5 legacy), the file has been moved to the following location for the Joomla 1.5 native version: <joomla installation>/plugins/content/sbdnicertables/css/sbdnicertables.css

Note: The following only works for Joomla 1.0 and Joomla 1.5 legacy

To use your templates css file just select the mambot to use the template option and then provide the name of the template css file, the mambot assumes this is in a css folder under the template directory.

To use the css settings instead of providing colours is very easy, and uses the same method above. To call a css style you need to prefix 'css' in front of the style name, for example:

css#mycssstyle or
css.mycssstyle

The mambot accepts Class style definitions for use.

An example:

CSS code in the template:

.oddCol{ background-color: #ff0000; }
.eveCol{ background-color: #00ff00; }
.movCol{ background-color: #0000ff; }
.oncCol{ background-color: #660066; }

To use the above css for your table:

{ sbdnicertables tableid=test headeroff=1 footeroff=0 oddcol=css#oddCol evencol=css#eveCol movercol=css#movCol onclickcol=css#oncCol}

To assign your own classes in the Joomla 1.5 Native version use the new commands:

oddStyle, evenStyle, moverStyle and onclickStyle as previously described.

You'll find working examples on the examples pages.

To enable sorting in the table you are required to set the table class to sortable. (Note the single 't'). So the code for the table would be:

<table class="sortable" id="highlight"><tr><td></td></tr></table>

Sorting and filtering both do not touch the rows set as headers, however please note that the will affect the footer line of the table, and it is recommended not to use footers when filtering or sorting is required.

Due to the power of the filtering script only some of the more basic functions have been incorporated into the plugin. The Joomla 1.5 Native version of this plugin adds an extra option which allows you to call and set further features of the Filter Table script:

manualConfig - use this to manually set any other configuration options for the filter as described here: http://mguglielmi.free.fr/scripts/TableFilter/doc.php?l=en#config

 

 

Downloads:

The latest version of the mambot will always be available for download here:

SBD Nicer Tables

Please note: these examples require updating and may not work as described.

Header	Header	Header	Header
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even

A simple table with a single header line and just coloured rows. Code:

{ sbdnicertables tableid=exampleone headeroff=1 footeroff=0 oddcol=#cccccc evencol=#ffffff movercol=#f5f5f5 onclickcol=#666666}

Header	Header	Header	Header
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even
Footer	Footer	Footer	Footer
Footer	Footer	Footer	Footer

A table showing of a single header with two footer rows now touch by the formatting. Code:

{ sbdnicertables tableid=exampletwo headeroff=1 footeroff=2 oddcol=#cccccc evencol=#660000 movercol=#00ff00 onclickcol=#ff00ff}

Header	Header	Header	Header
Header	Header	Header	Header
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even
Footer	Footer	Footer	Footer

Reverse on the above table, two headers followed with a single footer. Code:

{ sbdnicertables tableid=examplethree headeroff=2 footeroff=1 oddcol=#ffffff evencol=#000066 movercol=#660066 onclickcol=#330000}

Header	Header	Header	Header
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even

This table uses the default options, so only { sbdnicertables} is called.

Header	Header	Header	Header
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even
Odd	Odd	Odd	Odd
Even	Even	Even	Even

This table is created using colours set in your Template CSS file, by passing 'css#' first it tells the script to look in your prefered place for the css information. Code:

{ sbdnicertables tableid=examplefive headeroff=1 footeroff=0 oddcol=css#oddCol evencol=css#eveCol movercol=css#movCol onclickcol=css#oncCol}

 

 

header	header	header	header
header	header	header	header
even one	even one	even one	even one
odd	odd	odd	odd
two even	two even	two even	two even
odda	odd	oddc	odd
even	even	even	even

This table uses CSS for styling, two header lines with filtering - the first column a text box, the second column a drop down and no filtering on the second two columns and sorting is based always on the bottom header line.

{ sbdnicertables tableid=advancedone headeroff=1 footeroff=0 oddcol=css#oddCol evencol=css#eveCol movercol=css#movCol onclickcol=css#oncCol filterStart=true colOptions=1:s,2,3 enableSort=true}

header	header	header	header
even one	even one	even one	even one
odd	odd	odd	odd
two even	two even	two even	two even
odda	odd	oddc	odd
even	even	even	even

Powered by Nicer Tables

This table uses CSS for styling, two header lines with filtering - the first two columns are drop downs and no filtering on the second two columns with sorting.

 

 

This mambot is provided in two versions:

A free GNU GPL Version 3 version with a one link placed after the last table to our web site and developer information contained in the javascript, Joomla 1.0 and Joomla 1.5 Legacy only.

A Paid (licensed) version which has all links and developer information removed from the mambot providing a clean install including the native version for Joomla 1.5, available as a subscription (includes access to other of our products as well), see here for more details on our subscription offer.