User macro for creating an editable table?

[Catherine Z]

Hi,

I would like to create a user macro that allows the user to create tables, and to add or remove columns and rows as needed. I am currently using the following, but it create a predefined number of rows and columns:

## This is a macro for inserting a table.
## @param DocTable:title=DocTable|type=string|desc=Table
## @param Head1:type=string|desc=Heading
## @param Head2:type=string|desc=Heading
## @param Cell1:type=string|desc=cell
## @param Cell2:type=string|desc=cell

<table class="DocTable">
<caption style="font-family:family:bliss pro light; font-size:1.1em; page-break-after: avoid;text-align:left;padding-bottom:8px;">$!paramHead1</caption>
<tr>
<th class="TableHeader" style="background-color: transparent; font-family:bliss pro medium; font-size:1em;margin-bottom:-10px; margin-top:-15px;">$!paramHead2</th>
<th class="TableHeader" style="background-color: transparent; font-family:bliss pro medium; font-size:1em;margin-bottom:-10px; margin-top:-15px;">$!paramHead2</th>
</tr>
<tr>
<td>$!paramCell1</td>
<td>$!paramCell2</td>
</tr>
</tbody>
</table>

Thanks in advance.

[Davin Studer]

So, first confluence-cloud does not do user macros. So, the labels on the question are not correct. Secondly and more important, why do you want to use a user macro as opposed to the table editor in the toolbar? Thirdly, I don't think you could easily do what you want with a user macro.

[Davin Studer]

Are you wanting to use a user macro simply so that you can control the table layout? If so, then I would suggest a different approach. Instead create table with the tale editor and then surround you table with a user macro that will much with the table and its styles. Here is an example I created a while ago.

Macro Name:
advanced_tables 

Macro Title:
Advanced Tables 

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 04/30/2014
## @param AutoNumber:title=Autonumber Rows|type=boolean|desc=This will autonumber the rows in the table that are not heading rows.|default=false
## @param HeadingReset:title=Reset Count|type=boolean|desc=This will reset the count each time a heading row is encountered. (only applicable if Autonumber Rows is checked)|default=false
## @param Zebra:title=Zebra Table|type=boolean|desc=This will alternate the color of the table's rows.|default=false
## @param NoScroll:title=No Table Scroll|type=boolean|desc=This will turn off the scroll bat that is at the bottom of the table in favor of one always at the bottom of the page. This is useful for tables that are wider than the page.|default=false
## @param Width:title=Table Width|type=string|required=false|desc=This will set the width of the table. Acceptable values are in % or px.
## @param Class:title=CSS Class|type=string|required=false|desc=This will assign a css class to the table.
## @param ColWidth:title=Column Widths|type=string|required=false|desc=Use a comma separated list of column widths for the table. Acceptable values are in % or px.
#set( $id = $action.dateFormatter.calendar.timeInMillis )
<style type="text/css">
#if ( $paramZebra == true )
#table$id tr:nth-child(odd) {background-color: #E0F0FF;}
#table$id tr:nth-child(even) {background-color: #FFFFFF;}
#end
#if ( $paramNoScroll == true )
#table$id .table-wrap {overflow-x: visible;}
#end
#if ( $paramWidth && $paramWidth != "" )
#table$id table {width: $paramWidth;}
#end
</style>
<script type="text/javascript">
AJS.toInit(function(){
    AJS.$('#table$id table').each(function(){
        ################
        ## Autonumber ##
        ################
        #if ( $paramAutoNumber == true )
        var number = true;
        #else
        var number = false;
        #end
        
        #if ( $paramHeadingReset == true )
        var reset = true;
        #else
        var reset = false;
        #end
        
        ################
        ## Width      ##
        ################
        #if ( $paramWidth && $paramWidth != "" )
        var tblWidth = '$paramWidth';
        #else
        var tblWidth = '';
        #end
        
        ################
        ## Class      ##
        ################
        #if ( $paramClass && $paramClass != "" )
        var cssClass = '$paramClass';
        #else
        var cssClass = '';
        #end
        ################
        ## Col Width  ##
        ################
        #if ( $paramColWidth && $paramColWidth != "" )
        var colWidth = '$paramColWidth';
        #else
        var colWidth = '';
        #end
        if(number) {
            var count = 1;
            
            AJS.$('tr', this).each(function(){
                if(AJS.$('th',this).length != 0) {
                    AJS.$(this).prepend('<th class="confluenceTh"> </th>');
                    if(reset) {
                        count = 1;
                    }
                } else {
                    AJS.$(this).prepend('<td class="confluenceTd">' + count + '</td>');
                    count++;
                }
            });
        }
        
        if(tblWidth != "") {
            AJS.$(this).css('width', tblWidth);
        }
        
        if(cssClass != "") {
            AJS.$(this).addClass(cssClass);
        }
        
        if(colWidth != "") {
            var arrColWidth = colWidth.split(',');
            var firstRow = AJS.$('tr:first-child', this);
            var tdorth = AJS.$('td', firstRow).length == 0 ? 'th' : 'td';
            
            AJS.$(tdorth, firstRow).each(function(index){
                if(index + 1 <= arrColWidth.length && arrColWidth[index].trim().search(/^([0-9]+)(%|px)$/) != -1) {
                    AJS.$(this).css('width', arrColWidth[index].trim());
                }
            });
        }
    });
});
</script>
<div id="table$id">$body</div>