Wiki Tutorial - Editable Tables

Create an Edittable Table

%EDITTABLE{ }%
| *#* | *Property Name* | *Type* | *Date* | *Comments* |
| 1 | Fooz | New Property | 15 July 2008 | this will be very tricky |
| 2 | baz | Upgrade | 31 July 2008 |  |

If you don't define a format, each column is assumed to be plain text of equal width.

screenshot

Control The Format

The *format" attribute has several types to choose from: text, textarea, checkbox, radio button, select (menu), label (readonly), date, or row (number). See EditTablePlugin for the syntax of each format type.

Example 1

This example uses the format shown immediately below.

%EDITTABLE{ format="|row, -1 | text, 40 | select, 1, New Property, Upgrade, Maintenance | date | textarea, 4x50" }%

  • Example 1 screenshot - view:
    Example 1 screenshot - view

  • Example 1 screenshot - edit:
    Example 1 screenshot - edit

Try it!

Example 2

This example uses the format shown immediately below.

%EDITTABLE{ format="|row, -1 | text, 20 | checkbox, 3, Ham, Eggs, Toast, Potatoes, Fruit, Cereal |" }%

  • Example 2 screenshot - view:
    Example 2 screenshot - view

  • Example 2 screenshot - edit:
    Example 2 screenshot - edit

Try it!

Using Date Fields

The date field type (format=|...date...) allows you to choose a date from a popup calendar (JavaScript must be enabled). You can optionally specify the date format desired using the available date specifiers (ref. JSCalendarContrib). The default format is %e %B %Y (e.g. 19 January 2010).

Syntax
| date, <size>, <initial value>, <DHTML date format> |

Example
   date,8,,%M/%d/%y

Sorting - If you want the resulting table to be sortable based on a date field, be sure to use a recognized date format. The type of data in a table cell is determined automatically:

  • date if format is:
    • 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)
  • number is digits, with optional decimal point
  • otherwise treated as text

%a - abbreviated weekday name 
%A - full weekday name 
%b - abbreviated month name 
%B - full month name 
%C - century number 
%d - the day of the month ( 00 .. 31 ) 
%e - the day of the month ( 0 .. 31 ) 
%H - hour ( 00 .. 23 ) 
%I - hour ( 01 .. 12 ) 
%j - day of the year ( 000 .. 366 ) 
%k - hour ( 0 .. 23 ) 
%l - hour ( 1 .. 12 ) 
%m - month ( 01 .. 12 ) 
%M - minute ( 00 .. 59 ) 
%n - a newline character 
%p - "PM" or "AM"
%P - "pm" or "am"
%S - second ( 00 .. 59 ) 
%s - number of seconds since Epoch (since Jan 01 1970 00:00:00 UTC) 
%t - a tab character 
%U, %W, %V - the week number
   The week 01 is the week that has the Thursday in the current year,
   which is equivalent to the week that contains the fourth day of January. 
   Weeks start on Monday.
%u - the day of the week ( 1 .. 7, 1 = MON ) 
%w - the day of the week ( 0 .. 6, 0 = SUN ) 
%y - year without the century ( 00 .. 99 ) 
%Y - year including the century ( ex. 1979 ) 
%% - a literal % character 

Set Color Based On Cell Content

Using JavaScript and "select" menus, you can add color to your data.

Use An Image in a Select Menu

Show an image instead of text while displaying in view mode. i.e. instead of showing "done", shows the Wiki image of done in view mode.

Be sure to use <nop> in your select list!

   * Set TODO = <img src="%ICONURL{todo}%" width="37" height="16" alt="TODO" border="0" />
   * Set INPROGRESS = %ICON{wip}%
   * Set DONE = <img src="%ICONURL{done}%" width="37" height="16" alt="Done" border="0" />

%EDITTABLE{format="| select, 1, wiki, dist, docs | select, 1, %<nop>TODO%, %<nop>INPROGRESS%, %<nop>DONE% |"}%
| *type* | *status* |

  • Example 3 screenshot - view:
    Example 3 screenshot - view

  • Example 3 screenshot - edit:
    Example 3 screenshot - edit

Try it!

Other Options

Other options allow you more flexibility. The table below does not permit more than one row, the "Quiet Save" button is absent, and we've customized the "Edit" button.

%EDITTABLE{ format="| text, 40 | select, 1, New Property, Upgrade, Maintenance |" changerows="off" quietsave="off" editbutton="Change Me" }%

  • Example 4 screenshot - view:
    Example 4 screenshot - view

  • Example 4 screenshot - edit:
    Example 4 screenshot - edit

Try it!

JavaScript Interface

The javascriptinterface option lets you directly move and delete rows without going into Edit mode.

screenshot

The javascriptinterface option is Off by default. Enable with "on".
%EDITTABLE{javascriptinterface="on" format="| ... |"}%

Note: The JavaScript interface is ... unusual. See WikiTutETableJS for help.

Re-use an EditTable definition from another page

Use the include parameter to specify another topic defining the EDITTABLE parameters. The first %EDITTABLE% found in the specified topic will be used to draw from used. This is useful if you have many topics with the same table format and you want to store the format in only one place.

For example:
  %EDITTABLE{include="TemplateYServices"}%

-- Main.VickiBrown - 06 Feb 2007

Topic attachments
I Attachment Action Size Date Who Comment
ETss0.pngpng ETss0.png manage 15 K 19 Jan 2010 - 22:23 UnknownUser screenshot
Topic revision: r2 - 02 Dec 2014, VickiBrown
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email