%META:TOPICINFO{author="TWikiContributor" date="1191744279" format="1.1" version="14"}%
---+!! Edit Table Plugin

Edit TWiki tables in place, using edit fields and drop down boxes, without having to edit the complete topic. 

Simply add an *[&nbsp;Edit&nbsp;table&nbsp;]* button to an existing table by writing =%<nop>EDITTABLE{}%= directly above the table. This can be added to tables that are formatted with TablePlugin: add the =EDITTABLE= variable just above or below the =TABLE= tag. It can also be used without any =TABLE= tag.

Customize entry fields by specifying the format: use a text field, a drop down box, a date field, radio buttons or checkboxes.

Multiple tables per topic are editable, but only one at a time can be edited.

%TOC%

---++ Per Table Settings

Add a =%<nop>EDITTABLE{...}%= variable just before an existing table to make it editable, or add the variable anywhere in a topic to start a new table.
%INCLUDE{"%TWIKIWEB%.VarEDITTABLE" section="edittable_attributes"}%

---+++ Initial Values

TWiki variables like =%<nop>Y%= in =&lt;initial value&gt;= (of text input field) and =&lt;label text&gt;= (of fixed label) will *not* get expanded when a new row is added.

#DateField
---+++ Date Field Type

<img src="%ATTACHURLPATH%/EditTablePluginCalendarExample.gif" alt="Edit Table Calendar Example" width="638" height="250" />

The =date= field type allows one to choose a date with a popup calendar. Popup calendar works with all modern browsers. The date picker button is inactive if the browser cannot support the popup calendar or if javascript is disabled. 


---++ Per Cell Settings

An individual edit field type can be defined for each table cell. Place an =%<nop>EDITCELL{ "type, ..." }%= variable at the end of the cell content. This is useful to override the per column =%<nop>EDITTABLE{ format="..." }%= settings, or to create tables with key/value rows. All edit field types of the =format="..."= parameter are supported. For example, to define a text field, type: =| cell content %<nop>EDITCELL{ "text, 20" }% |=

It is also possible to place the edit button inside a cell instead of default location below the table. Type =| %<nop>EDITCELL{ "editbutton, 1, Edit this table" }% |= to show a button, or =| %<nop>EDITCELL{ "editbutton, 1, Edit table, Image-URL" }% |= to show a button image with alternate text.

__Note:__ The =%<nop>EDITCELL{ }%=variable cannot be used by itself; place an =%<nop>EDITTABLE{ }%=variable at the beginning of a table where you want to use =%<nop>EDITCELL{ }%= variables.

---++ Table Buttons

<form>
   * In page view mode:
      * <input type="submit" class="twikiSubmit" name="et"   value="Edit table" onclick="return(false);" /> - turn the table into edit mode
   * In edit mode:
      * <input type="submit" class="twikiButton" name="etsave"   value="Save table"  onclick="return(false);" /> - save your changes
      * <input type="submit" class="twikiButton" name="etqsave"   value="Quiet save"  onclick="return(false);" /> - save your changes without alerting subscribed WebNotify users
      * <input type="submit" class="twikiButton" name="etaddrow" value="Add row" onclick="return(false);" /> - add row to the table (if enabled)
      * <input type="submit" class="twikiButton" name="etdelrow" value="Delete last row" onclick="return(false);" /> - remove last row from the table (if enabled)
      * <input type="submit" class="twikiButtonCancel" name="etcancel" value="Cancel" onclick="return(false);" /> - cancel without saving and release edit lock
      * <img src="%ATTACHURLPATH%/btn_move.gif"> - Move a row by clicking this button next to the row to
         be moved, then at a destination.
      * <img src="%ATTACHURLPATH%/btn_delete.gif"> - Deletes the row next to this button.
</form>

---++ Examples

Line before table: =%<nop>EDITTABLE{ format="| row, -1 | text, 20, init | select, 1, one, two, three, four | radio, 3,:-),:-I,:-( | label, 0, %<nop>SERVERTIME{"$day $mon $year $hour:$min"}% |" changerows="on" }%=
%EDITTABLE{ format="| row, -1 | text, 20, init | select, 1, one, two, three, four | radio, 3,:-),:-I,:-( | label, 0, %SERVERTIME{"$day $mon $year $hour:$min"}% |" changerows="on" }%
|*Nr*|*Text field*|*Drop down*|*Mood*|*Timestamp*|
| 1 | hello table | one | :-) | 26 Jun 2002 12:30 |
| 2 |  | two | :-( | 27 Jun 2002 12:40 |

%RED% __Note:__ Please do not save this example table! Use TWiki:Sandbox.EditTablePluginTesting if you want to try out this Plugin %ENDCOLOR%

If this plugin is installed you will see an *[&nbsp;Edit&nbsp;table&nbsp;]* button above; if you were to click on it (please don't, use TWiki:Sandbox.EditTablePluginTesting for testing) you get this form:

<a name="edittable1"></a>
<div class="editTable editTableEdit">
<input type="hidden" name="ettablenr" value="1" />
<table cellspacing="0" id="default" cellpadding="0" class="twikiTable" rules="rows" border="1">
	<thead>
	<tr class="twikiTableEven twikiTableRowdataBgSorted0 twikiTableRowdataBg0">
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol0 twikiFirstCol"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=0;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Nr<input type="hidden" name="etcell1x1" value="*Nr*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol1"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=1;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Text field<input type="hidden" name="etcell1x2" value="*Text field*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol2"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=2;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Drop down<input type="hidden" name="etcell1x3" value="*Drop down*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol3"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=3;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Mood<input type="hidden" name="etcell1x4" value="*Mood*" /></font></a> </th>
		<th bgcolor="#6b7f93" valign="top" class="twikiTableCol4 twikiLastCol"> <a rel="nofollow" href="%SCRIPTURL{"viewauth"}%/%TWIKIWEB%/EditTablePlugin?ettablenr=1&amp;amp;etedit=on&amp;amp;etrows=3&amp;amp;x=27&amp;amp;y=13&amp;amp;sortcol=4;table=2;up=0#sorted_table" title="Sort by this column"><font color="#ffffff">Timestamp<input type="hidden" name="etcell1x5" value="*Timestamp*" /></font></a> </th>
	</tr>
	</thead>
	<tr class="twikiTableOdd twikiTableRowdataBgSorted0 twikiTableRowdataBg0">
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol0 twikiFirstCol"> <span class="et_rowlabel">1<input type="hidden" name="etcell2x1" value="1" /></span> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol1"> <input class="twikiInputField editTableInput" type="text" name="etcell2x2" size="20" value="hello table" /> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol2"> <select class="twikiSelect" name="etcell2x3" size="1"> <option selected="selected">one</option> <option>two</option> <option>three</option> <option>four</option></select> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol3"> <input type="radio" name="etcell2x4" value=":-)" checked="checked" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/smile.gif" alt="smile" title="smile" border="0" />  <input type="radio" name="etcell2x4" value=":-I" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/indifferent.gif" alt="indifferent" title="indifferent" border="0" />  <input type="radio" name="etcell2x4" value=":-(" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/frown.gif" alt="frown" title="frown" border="0" /> </td>
		<td bgcolor="#ffffff" valign="top" class="twikiTableCol4 twikiLastCol"> 26 Jun 2002 12:30<input type="hidden" name="etcell2x5" value="26 Jun 2002 12:30" /> </td>
	</tr>
	<tr class="twikiTableEven twikiTableRowdataBgSorted1 twikiTableRowdataBg1">
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol0 twikiFirstCol twikiLast"> <span class="et_rowlabel">2<input type="hidden" name="etcell3x1" value="2" /></span> </td>
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol1 twikiLast"> <input class="twikiInputField editTableInput" type="text" name="etcell3x2" size="20" value="" /> </td>

		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol2 twikiLast"> <select class="twikiSelect" name="etcell3x3" size="1"> <option>one</option> <option selected="selected">two</option> <option>three</option> <option>four</option></select> </td>
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol3 twikiLast"> <input type="radio" name="etcell3x4" value=":-)" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/smile.gif" alt="smile" title="smile" border="0" />  <input type="radio" name="etcell3x4" value=":-I" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/indifferent.gif" alt="indifferent" title="indifferent" border="0" />  <input type="radio" name="etcell3x4" value=":-(" checked="checked" /> <img src="%PUBURL%/%TWIKIWEB%/SmiliesPlugin/frown.gif" alt="frown" title="frown" border="0" /> </td>
		<td bgcolor="#edf4f9" valign="top" class="twikiTableCol4 twikiLastCol twikiLast"> 27 Jun 2002 12:40<input type="hidden" name="etcell3x5" value="27 Jun 2002 12:40" /> </td>
	</tr></table>
<input type="hidden" name="etrows" value="3" />
<input type="submit" name="etsave" id="etsave" value="Save table" class="twikiSubmit" />
<input type="submit" name="etqsave" id="etqsave" value="Quiet save" class="twikiButton" />
<input type="submit" name="etaddrow" id="etaddrow" value="Add row" class="twikiButton" />
<input type="submit" name="etdelrow" id="etdelrow" value="Delete last row" class="twikiButton" />
<input type="submit" name="etcancel" id="etcancel" value="Cancel" class="twikiButton twikiButtonCancel" />
</div><!-- /editTable -->

The following example shows a simple table with key/value rows. The default edit field type for the value column is a text field. This is overloaded by a selector for the Gender, and a date picker for the DOB. This is typically used by TWiki applications where new topics with tables are created based on a template topic.

<table style="background:#f2f2f2;" cellpadding="6">
<tr>
<th>
You type:
</th>
<th>
You get:
</th>
<th>
Table in edit mode:
</th>
</tr>
<tr>
<td valign="top">
<verbatim>
%EDITTABLE{ format="| label | text, 40 |" changerows="off" }%
|*Key*|*Value*|
| Name: | John Smith |
| Gender: | M %EDITCELL{select, 1, , F, M}% |
| DOB: | 1999/12/31 %EDITCELL{date, 10}% |
| City: | New York |
</verbatim>
</td>
<td valign="top">
<img src="%ATTACHURLPATH%/ScreenshotEditCell1.gif" alt="EDITCELL Example in view mode" width="150" height="172" />
</td>
<td valign="top">
<img src="%ATTACHURLPATH%/ScreenshotEditCell2.gif" alt="EDITCELL Example in edit mode" width="436" height="198" />
</td>
</tr></table>

---++ Plugin Settings

Plugin settings are stored as preferences variables. To reference
a plugin setting write ==%<nop>&lt;plugin&gt;_&lt;setting&gt;%==, for example, ==%<nop>EDITTABLEPLUGIN_SHORTDESCRIPTION%==

   * One line description, shown in the %TWIKIWEB%.TextFormattingRules topic:
      * Set SHORTDESCRIPTION = Edit TWiki tables using edit fields, date pickers and drop down boxes

   * Set DEBUG to 1 to get debug messages in =data/debug.txt=.  Default: =0=
      * Set DEBUG = 0

   * Set JAVASCRIPTINTERFACE to 1 to be able to directly move and delete row without page refresh.
      * Set JAVASCRIPTINTERFACE = 1
   
   * Default for change rows flag: =on=, =off=, =add=
      * Set CHANGEROWS = on

   * Default flag for quiet save option: =on= to show the Quiet Save button, =off= to hide
      * Set QUIETSAVE = on

   * Default edit button: Specify =button text=, or specify =alternate text, image URL=. Note: Texts inside =%<nop>MAKETEXT{}%= are translated into other languages.
      * #Set EDIT_BUTTON = %MAKETEXT{"Edit table"}%
      * Set EDIT_BUTTON = %MAKETEXT{"Edit this table"}%, %ATTACHURL%/edittable.gif
      * Set SAVE_BUTTON = %MAKETEXT{"Save table"}%
      * Set QUIET_SAVE_BUTTON = %MAKETEXT{"Quiet save"}%
      * Set ADD_ROW_BUTTON = %MAKETEXT{"Add row"}%
      * Set DELETE_LAST_ROW_BUTTON = %MAKETEXT{"Delete last row"}%
      * Set CANCEL_BUTTON = %MAKETEXT{"Cancel"}%

__Note:__ The Plugin uses base settings like date format, language and style from the JSCalendarContrib.

---++ Limitations and Known Issues

   * This Plugin does not support TWiki table formatting like Multi-span cells (e.g. =| ... ||=) and cell justification (e.g. =|  centered  |   right |=)
   * There is a performance issue when editing a large table, say, with more then 50 rows
   * Variables like =%<nop>ATTACHURL%= get expanded unless they are in a label
   * You cannot put two =%<nop>EDITTABLE{}%= statements on the same line in the source
   * You can include %-vars now in select values, by quoting them with &lt;nop&gt;, as in %&lt;nop&gt;X% for %<nop>X%, say for instance:
     <br /> =select,1,%&lt;nop&gt;X%,%&lt;nop&gt;Y%=



---++ Installation Instructions

   * Download the ZIP file from the Plugin web (see below)
   * Unzip ==%TOPIC%.zip== in your ($TWIKI_ROOT) directory.
   * Alternatively,
      * Manually resolve the dependencies listed below.
      None
   * The Plugin depends on the =viewauth= script to authenticate the user. As described in %TWIKIWEB%.TWikiAccessControl, copy the =view= script to =viewauth= (or better, create a symbolic link) and add =viewauth= to the list of authenticated scripts in the =.htaccess= file.
   * (Dakar) Visit =configure= in your TWiki installation, and enable the plugin in the {Plugins} section.
   * Test if the Plugin is correctly installed:
      * Check above example if there is an *[&nbsp;Edit&nbsp;table&nbsp;]* button below the table in above example
      * Click on *[&nbsp;Edit&nbsp;table&nbsp;]*, make changes and save the table

---++ License

   * The Edit Table Plugin is released under the [[http://www.gnu.org/licenses/gpl.html][GPL]]


---++ Plugin Info

|  Plugin Author: | TWiki:Main/PeterThoeny |
|  Copyright: | &copy; 2002-2007, TWiki:Main.PeterThoeny ([[http://www.twiki.net/][TWIKI.NET]]) and TWiki Contributors |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Plugin Version: | 01 Dec 2007 (4.3) |
|  Change History: | <!-- specify latest version first -->&nbsp; |
|  01 Dec 2007: | 4.3:  Arthur Clemens: added support for TablePlugin =headerrows= and =footerrows=; updated edit button |
|  16 Oct 2007: | 4.2:  Arthur Clemens: refactoring, bug fixes. |
|  07 Oct 2007: | 15182: PTh: Added %TWIKIWEB%.VarEDITTABLE to have it listed in %TWIKIWEB%.TWikiVariables |
|  15 Mar 2007: | Arthur Clemens: Fixed eating of double newlines; icons for javascript buttons and interface improvements. By default the javascript interface is turned off, set =JAVASCRIPTINTERFACE= to use it in edit mode. |
|  05 Mar 2007: | Byron Darrah: Added ability to dynamically move and delete rows. |
|  12 Oct 2006: | TWikibug:Item2982 - Use default date format from JSCalendarContrib |
|  02 Oct 2006: | TWikibug:Item2884 - Check also for access permission in meta data; proper fix to not warn if oneself has a lock on topic |
|  30 Aug 2006: | TWikibug:Item2829 - Remove whitespace from select, radio and checkbox items; restored topic lock if $TWiki::Plugins::VERSION < 1.1 |
|  29 Jul 2006: | TWikibug:Item2684 - Quietly ignore topic edit locks on table edit |
|  21 Jan 2006: | TWiki:Main.CrawfordCurrie ported to TWiki-4.0.0, changed to use JSCalendarContrib |
|  16 Sep 2004: | Added radio buttons and checkbox controls; escaped "%VBAR%" pipe symbol found in input fields to preserve tables |
|  01 Aug 2004: | Fixed bug where edittable did not work if at the end of a topic |
|  07 Apr 2004: | Fixed bug where two tables got updated when you edit and save a table included into a topic containing other edit tables |
|  02 Mar 2004: | Default for =%<nop>EDITCELL{editbutton}%= is EDITBUTTON preference |
|  27 Feb 2004: | Added QUIETSAVE setting and =quietsave= parameter; image for Edit button |
|  18 Feb 2004: | Doc fixes; allow edit button anywhere in a cell not just at the end of a cell |
|  17 Feb 2004: | Added per cell definition of edit field types with =%<nop>EDITCELL{}%= variable; added =headerislabel= and =editbutton= parameters |
|  20 Dec 2003: | Fixed bug where calendar did not work after adding a row (TWiki:Main/PaulineCheung); added all language files of Mishoo DHTML calendar 0.9.5 |
|  13 Dec 2003: | Added CHANGEROWS, JSCALENDARDATEFORMAT, JSCALENDARLANGUAGE, JSCALENDAROPTIONS settings |
|  16 Oct 2003: | small typo fixed (garbled if ---<nop>+ header on top) |
|  15 Oct 2003: | new date field type with javascript calendar - CN |
|  14 Oct 2003: | docfix: the documentation page was an old one - CN |
|  13 Oct 2003: | bugfix: %-vars in select were resetted to first on add/del row - CN |
|  18 Sep 2003: | incompatibility: changed default of =changerows= to =on=; support for %-vars, Quiet save for saving without notification; all other fixes in Dev topic integrated - CN |
|  08 Nov 2002: | Prevent variable expansion in label text; added escape characters |
|  27 Jun 2002: | New =helptopic= parameter |
|  26 Jun 2002: | Support for variables in included EDITTABLE parameters; fixed problem with HTML in cells |
|  21 May 2002: | Added fixed label format; new =changerows="add"= parameter |
|  27 Apr 2002: | Fixed bug where text after a double quote in a cell disappeared |
|  18 Apr 2002: | Fixed bug where table was breaking when pasting multiple lines into an edit field using Netscape on Unix |
|  08 Apr 2002: | Check for change permission and edit lock of topic |
|  05 Apr 2002: | Initial version |
|  Dependencies: | None |
|  Perl Version: | 5.0 |
|  TWiki:Plugins/Benchmark: | %TWIKIWEB%.GoodStyle 98%, %TWIKIWEB%.FormattedSearch 98%, %TOPIC% 95% |
|  Plugin Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__  %TWIKIWEB%.VarEDITTABLE, %TWIKIWEB%.TWikiPreferences, %TWIKIWEB%.TWikiPlugins

-- TWiki:Main/PeterThoeny - 07 Oct 2007

%META:FILEATTACHMENT{name="EditTablePluginCalendarExample.gif" attr="h" comment="" date="1071283396" path="EditTablePluginCalendarExample.gif" size="7823" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="ScreenshotEditCell1.gif" attr="h" comment="Screenshot" date="1077050633" path="ScreenshotEditCell1.gif" size="2017" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="ScreenshotEditCell2.gif" attr="h" comment="Screenshot" date="1077050702" path="ScreenshotEditCell2.gif" size="3199" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="img.gif" attr="h" comment="Component of Mishoo DHTML calendar" date="1077813483" path="img.gif" size="145" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="menuarrow.gif" attr="h" comment="Component of Mishoo DHTML calendar" date="1077813470" path="menuarrow.gif" size="68" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="edittable.gif" attr="h" comment="Edit table image button" date="1077933805" path="edittable.gif" size="298" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="btn_move.gif" attr="h" comment="Javascript button: move row" date="1077933805" path="btn_move.gif" size="298" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="btn_target.gif" attr="h" comment="Javascript button: move target (animated)" date="1077933805" path="btn_target.gif" size="298" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="btn_delete.gif" attr="h" comment="Javascript button: delete row" date="1077933805" path="btn_delete.gif" size="298" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="btn_delete_disabled.gif" attr="h" comment="Javascript button: delete (disabled)" date="1077933805" path="btn_delete_disabled.gif" size="298" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="edittable.css" attr="h" comment="Plugin Style Sheet" date="1077933805" path="edittable.css" size="298" user="TWikiContributor" version="1.1"}%
%META:FILEATTACHMENT{name="edittable.js" attr="h" comment="Javascript for table editing without page refresh" date="1077933805" path="edittable.js" size="298" user="TWikiContributor" version="1.1"}%
