Table Plugin

<--
   Contributions to this TWiki plugin are appreciated. Please update the plugin page at
   http://twiki.org/cgi-bin/view/Plugins/TablePlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/TablePluginDev.
   If you are a TWiki contributor please update the plugin in the SVN repository.
-->

Introduction

The TablePlugin gives extra control of table display:

• • A TABLEATTRIBUTES preferences setting on site-level (TWikiPreferences) or web-level (any WebPreferences), e.g.

• One line description, shown in the TextFormattingRules topic:

• Supported attributes:

  Argument	Comment	Default value	Example
  sort	Set table sorting by clicking headers "on" or "off".	unspecified	sort="on"
  initsort	Column to sort initially ("1" to number of columns).	unspecified	initsort="2"
  initdirection	Initial sorting direction for initsort, set to "up" (descending) or "down" (ascending).	unspecified	initdirection="up"
  disableallsort	Disable all sorting, both initsort and header sort. This is mainly used by plugins such as the EditTablePlugin to disable sorting in a table while editing the table.	unspecified	disableallsort="on"
  headerbg	Header cell background color.	"#6b7f93"	headerbg="#999999"
  headerbgsorted	Header cell background color of a sorted column.	the value of headerbg	headerbgsorted="#32596c"
  headercolor	Header cell text color.	"#ffffff"	headercolor="#0000cc"
  databg	Data cell background color, a comma separated list. Specify "none" for no color, that is to use the color/background of the page the table is on.	"#edf4f9,#ffffff"	databg="#f2f2f2,#ffffff"
  databgsorted	Data cell background color of a sorted column; see databg.	the values of databg	databgsorted="#d4e8e4,#e5f5ea"
  datacolor	Data cell text color, a comma separated list.	unspecified	datacolor="#0000CC, #000000"
  tableborder	Table border width (pixels).	"1"	tableborder="2"
  tableframe	Table frame, set to "void" (no sides), "above" (the top side only), "below" (the bottom side only), "hsides" (the top and bottom sides only), "lhs" (the left-hand side only), "rhs" (the right-hand side only), "vsides" (the right and left sides only), "box" (all four sides), "border" (all four sides).	unspecified	tableframe="hsides"
  tablerules	Table rules, set to "none" (no rules), "groups" (rules will appear between row groups and column groups only), "rows" (rules will appear between rows only), "cols" (rules will appear between columns only), "all" (rules will appear between all rows and columns).	unspecified	tablerules="rows"
  cellpadding	Cell padding (pixels).	"0"	cellpadding="0"
  cellspacing	Cell spacing (pixels).	"0"	cellspacing="3"
  cellborder	Cell border width (pixels).	unspecified	cellborder="0"
  valign	Vertical alignment of cells and headers, set to "top", "middle", "bottom" or "baseline".	unspecified	valign="top"
  headervalign	Vertical alignment of header cells; overrides valign.	unspecified	headervalign="top"
  datavalign	Vertical alignment of data cells; overrides valign.	unspecified	datavalign="top"
  headeralign	Header cell alignment, one value for all columns, or a comma separated list for different alignment of individual columns. Set to "left", "center", "right" or "justify". Overrides individual cell settings.	unspecified	headeralign="left,right"
  dataalign	Data cell alignment, one value for all columns, or a comma separated list for different alignment of individual columns. Set to "left", "center", "right" or "justify". Overrides individual cell settings.	unspecified	dataalign="center"
  tablewidth	Table width: Percentage of window width, or absolute pixel value.	unspecified	tablewidth="100%"
  columnwidths	Column widths: Comma delimited list of column widths, percentage or absolute pixel value.	unspecified	columnwidths="80%,20%"
  headerrows	Number of header rows to exclude from sort. (will be rendered in a HTML thead section)	(determined automatically)	headerrows="2"
  footerrows	Number of footer rows to exclude from sort. (will be rendered in a HTML tfoot section)	"0"	footerrows="1"
  id	Unique table identifier string, used for targeting a table with CSS.	tableN (where N is the table order number on the page)	id="userTable"
  summary	Table summary used by screenreaders: A summary of what the table presents. It should provide an orientation for someone who listens to the table.	unspecified	summary="List of subscribed users"
  caption	Table caption: A title that will be displayed just above the table.	unspecified	caption="Users"

Table with 4 digit year dates and no use of %TABLE{...}%

• • Set TABLEATTRIBUTES = tableborder="1" cellpadding="0" cellspacing="0" valign="top" headercolor="#ffffff" headerbg="#687684" headerbgsorted="#334455" databg="#ffffff,#edf4f9" databgsorted="#f1f7fc,#ddebf6" tablerules="rows"

• Supported attributes:

  Argument	Comment	Default value	Example
  sort	Set table sorting by clicking headers "on" or "off".	unspecified	sort="on"
  initsort	Column to sort initially ("1" to number of columns).	unspecified	initsort="2"
  initdirection	Initial sorting direction for initsort, set to "up" (descending) or "down" (ascending).	unspecified	initdirection="up"
  disableallsort	Disable all sorting, both initsort and header sort. This is mainly used by plugins such as the EditTablePlugin to disable sorting in a table while editing the table.	unspecified	disableallsort="on"
  headerbg	Header cell background color.	"#6b7f93"	headerbg="#999999"
  headerbgsorted	Header cell background color of a sorted column.	the value of headerbg	headerbgsorted="#32596c"
  headercolor	Header cell text color.	"#ffffff"	headercolor="#0000cc"
  databg	Data cell background color, a comma separated list. Specify "none" for no color, that is to use the color/background of the page the table is on.	"#edf4f9,#ffffff"	databg="#f2f2f2,#ffffff"
  databgsorted	Data cell background color of a sorted column; see databg.	the values of databg	databgsorted="#d4e8e4,#e5f5ea"
  datacolor	Data cell text color, a comma separated list.	unspecified	datacolor="#0000CC, #000000"
  tableborder	Table border width (pixels).	"1"	tableborder="2"
  tableframe	Table frame, set to "void" (no sides), "above" (the top side only), "below" (the bottom side only), "hsides" (the top and bottom sides only), "lhs" (the left-hand side only), "rhs" (the right-hand side only), "vsides" (the right and left sides only), "box" (all four sides), "border" (all four sides).	unspecified	tableframe="hsides"
  tablerules	Table rules, set to "none" (no rules), "groups" (rules will appear between row groups and column groups only), "rows" (rules will appear between rows only), "cols" (rules will appear between columns only), "all" (rules will appear between all rows and columns).	unspecified	tablerules="rows"
  cellpadding	Cell padding (pixels).	"0"	cellpadding="0"
  cellspacing	Cell spacing (pixels).	"0"	cellspacing="3"
  cellborder	Cell border width (pixels).	unspecified	cellborder="0"
  valign	Vertical alignment of cells and headers, set to "top", "middle", "bottom" or "baseline".	unspecified	valign="top"
  headervalign	Vertical alignment of header cells; overrides valign.	unspecified	headervalign="top"
  datavalign	Vertical alignment of data cells; overrides valign.	unspecified	datavalign="top"
  headeralign	Header cell alignment, one value for all columns, or a comma separated list for different alignment of individual columns. Set to "left", "center", "right" or "justify". Overrides individual cell settings.	unspecified	headeralign="left,right"
  dataalign	Data cell alignment, one value for all columns, or a comma separated list for different alignment of individual columns. Set to "left", "center", "right" or "justify". Overrides individual cell settings.	unspecified	dataalign="center"
  tablewidth	Table width: Percentage of window width, or absolute pixel value.	unspecified	tablewidth="100%"
  columnwidths	Column widths: Comma delimited list of column widths, percentage or absolute pixel value.	unspecified	columnwidths="80%,20%"
  headerrows	Number of header rows to exclude from sort. (will be rendered in a HTML thead section)	(determined automatically)	headerrows="2"
  footerrows	Number of footer rows to exclude from sort. (will be rendered in a HTML tfoot section)	"0"	footerrows="1"
  id	Unique table identifier string, used for targeting a table with CSS.	tableN (where N is the table order number on the page)	id="userTable"
  summary	Table summary used by screenreaders: A summary of what the table presents. It should provide an orientation for someone who listens to the table.	unspecified	summary="List of subscribed users"
  caption	Table caption: A title that will be displayed just above the table.	unspecified	caption="Users"

TablePlugin and CSS

TablePlugin implements the following precedence:

• the TABLEATTRIBUTE settings only write html styling, no CSS
• the TABLEATTRIBUTE settings can be overridden by a skin's CSS
• the TABLE tag attributes are converted to CSS styling, written in the head; these override any skin's CSS

CSS written by TablePlugin

• • dd MMM YYYY - hh:mm (MMM is Jan, Feb, etc.)
  • dd-MMM-YY or dd-MMM-YYYY (can be / or space in place of -) (MMM is Jan, Feb, etc)

• • Set TABLEATTRIBUTES = tableborder="1" cellpadding="0" cellspacing="0" valign="top" headeralign="center" headercolor="#ffffff" headerbg="#6b7f93" headerbgsorted="#334455" headercolor="#ffffff" databg="#ffffff,#edf4f9" databgsorted="#f5f5f5,#dce7ee"

• • • #Set TABLEATTRIBUTES = tableborder="1" cellpadding="0" cellspacing="1" headerbg="#99cccc" databg="#ffffff,#ffffcc"

• Row spans

Row spans

Table cells with a single caret indicate follow-up rows of multi-row spans. For example,

| One One | One Two | One Three |
| ^ | Two Two | Two Three |
| Three One | ^ | Three Three |

• Make all tables in a topic sortable. If this is set to all, all tables that have a header row (including those that do not have %TABLE before them) will be made sortable. If set to none, only tables with %TABLE will be sortable. Topic rendering is faster if this is set to none.

• • Set SORT = all

• • Set TABLEATTRIBUTES = tableborder="0" cellpadding="1" cellspacing="1" headerbg="#dadada" headercolor="#000000" databg="#eaeaea, #ffffff"
  • Classic skin table attributes:
    • #Set TABLEATTRIBUTES = tableborder="1" cellpadding="0" cellspacing="1" headerbg="#99CCCC" databg="#FFFFCC, #FFFFFF"

• (Dakar) Visit configure in your TWiki installation, and enable the plugin in the {Plugins} section.

• • dd-MMM-YY or dd-MMM-YYYY (can be / or space in place of -)

Examples

Use of %TABLE{...}%

Table with 4 digit year dates and no use of %TABLE{...}%

• Changing background color and text color for header cells
• Changing background color and text color for data cells - colors can alternate
• Table attributes can be set and overridden in this order:
  • Default TABLEATTRIBUTES Plugin setting in this topic.
  • A TABLEATTRIBUTES preferences setting on site-level (TWikiPreferences) or web-level (any WebPreferences), e.g.
    • Set TABLEATTRIBUTES = tableborder="0" cellpadding="1" ...
  • Before a table using %TABLE{...}%

Sorting

Click on column heading text to sort by a column. Initial column will be sorted in descending order, click again to get ascending order. The type of data in the cell is determined automatically:

• date if format is:
  • dd MMM YYY - hh:mm
  • dd-MMM-YY or dd-MM-YYYY (can be / or space in place of -)
  • MMM is Jan, Feb, etc
• number is digits, with optional decimal point
• otherwise treated as text

• Default table attributes:
  • Set TABLEATTRIBUTES = tableborder="1" cellpadding="0" cellspacing="1" headerbg="#99CCCC" databg="#FFFFCC, #FFFFFF"

Table Attributes

• Table width, e.g. 100% for relative, 640 for absolute width. Default: (not set)
  • Set TABLEWIDTH =

• Background color of header cells ('*'s around text). Choose one of the StandardColors. Default: #99CCCC
  • Set HEADER_BG =

• Text color of header cells ('*'s around text). Default: not specified, e.g. determined by the browser
  • Set HEADER_COLOR =

• Background color of table rows, two alternate colors. Default: #FFFFCC, #FFFFFF

• Text color of table rows, alternate colors. Default: not specified, e.g. determined by the browser
  • Set DATA_COLOR =

Example