Edit in JSFiddle

// Visualize: Change table column basic formatting  (5.6)

// This Fiddle uses non-standard demo reports:
//    /public/viz/report_with_different_column_types

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var columns,
    report = v.report({
        resource: "/public/viz/report_with_different_column_types",
        container: "#container",
        events: {
            reportCompleted: function (status, error) {
                if (status === "ready") {
                    columns = _.filter(report.data().components, function (component) {
                        return component.componentType == "tableColumn";
                    });
                    
                    var column4 = columns[4];

                    $("#label").val(column4.label);
                    
                    $("#headingFormatAlign"    ).val(column4.headingFormat.align);
                    $("#headingFormatBgColor"  ).val(column4.headingFormat.backgroundColor);
                    $("#headingFormatFontSize" ).val(column4.headingFormat.font.size);
                    $("#headingFormatFontColor").val(column4.headingFormat.font.color);
                    $("#headingFormatFontName" ).val(column4.headingFormat.font.name);
                    if (column4.headingFormat.font.bold) {
                        $("#headingFormatFontBold").attr("checked", "checked");
                    } else {
                        $("#headingFormatFontBold").removeAttr("checked");
                    }
                    if (column4.headingFormat.font.italic) {
                        $("#headingFormatFontItalic").attr("checked", "checked");
                    } else {
                        $("#headingFormatFontItalic").removeAttr("checked");
                    }
                    if (column4.headingFormat.font.underline) {
                        $("#headingFormatFontUnderline").attr("checked", "checked");
                    } else {
                        $("#headingFormatFontUnderline").removeAttr("checked");
                    }
                    
                    $("#detailsRowFormatAlign"    ).val(column4.detailsRowFormat.align);
                    $("#detailsRowFormatBgColor"  ).val(column4.detailsRowFormat.backgroundColor);
                    $("#detailsRowFormatFontSize" ).val(column4.detailsRowFormat.font.size);
                    $("#detailsRowFormatFontColor").val(column4.detailsRowFormat.font.color);
                    $("#detailsRowFormatFontName" ).val(column4.detailsRowFormat.font.name);
                    if (column4.detailsRowFormat.font.bold) {
                        $("#detailsRowFormatFontBold").attr("checked", "checked");
                    } else {
                        $("#detailsRowFormatFontBold").removeAttr("checked");
                    }
                    if (column4.detailsRowFormat.font.italic) {
                        $("#detailsRowFormatFontItalic").attr("checked", "checked");
                    } else {
                        $("#detailsRowFormatFontItalic").removeAttr("checked");
                    }
                    if (column4.detailsRowFormat.font.underline) {
                        $("#detailsRowFormatFontUnderline").attr("checked", "checked");
                    } else {
                        $("#detailsRowFormatFontUnderline").removeAttr("checked");
                    }

                    $("#detailsRowFormatPatternNegativeFormat").val(column4.detailsRowFormat.pattern.negativeFormat);
                    $("#detailsRowFormatPatternPrecision"     ).val(column4.detailsRowFormat.pattern.precision);
                    $("#detailsRowFormatPatternCurrency"      ).val(column4.detailsRowFormat.pattern.currency || "");
                    
                    if (column4.detailsRowFormat.pattern.percentage) {
                        $("#detailsRowFormatPatternPercentage").attr("checked", "checked");
                    } else {
                        $("#detailsRowFormatPatternPercentage").removeAttr("checked");
                    }

                    if (column4.detailsRowFormat.pattern.grouping) {
                        $("#detailsRowFormatPatternGrouping").attr("checked", "checked");
                    } else {
                        $("#detailsRowFormatPatternGrouping").removeAttr("checked");
                    }
                }
            }
        },
        error: function (err) {
            alert(err);
        }
    });

    $("#changeHeadingFormat").on("click", function () {
        report.updateComponent(columns[4].id, {
            headingFormat: {
                align: $("#headingFormatAlign").val(),
                backgroundColor: $("#headingFormatBgColor").val(),
                font: {
                    size: parseFloat($("#headingFormatFontSize"     ).val()),
                    color:           $("#headingFormatFontColor"    ).val(),
                    underline:       $("#headingFormatFontUnderline").is(":checked"),
                    bold:            $("#headingFormatFontBold"     ).is(":checked"),
                    italic:          $("#headingFormatFontItalic"   ).is(":checked"),
                    name:            $("#headingFormatFontName"     ).val()
                }
            }
        }).fail(function (e) {
            alert(e);
        });
    });
    
    $("#changeDetailsRowFormat").on("click", function () {
        report.updateComponent(columns[4].id, {
            detailsRowFormat: {
                align: $("#detailsRowFormatAlign").val(),
                backgroundColor: $("#detailsRowFormatBgColor").val(),
                font: {
                    size: parseFloat($("#detailsRowFormatFontSize"     ).val()),
                    color:           $("#detailsRowFormatFontColor"    ).val(),
                    underline:       $("#detailsRowFormatFontUnderline").is(":checked"),
                    bold:            $("#detailsRowFormatFontBold"     ).is(":checked"),
                    italic:          $("#detailsRowFormatFontItalic"   ).is(":checked"),
                    name:            $("#detailsRowFormatFontName"     ).val()
                },
                pattern: {
                    negativeFormat:     $("#detailsRowFormatPatternNegativeFormat").val(),
                    currency:           $("#detailsRowFormatPatternCurrency"      ).val() || null,
                    precision: parseInt($("#detailsRowFormatPatternPrecision"     ).val(), 10),
                    percentage:         $("#detailsRowFormatPatternPercentage"    ).is(":checked"),
                    grouping:           $("#detailsRowFormatPatternGrouping"      ).is(":checked")
                }
            }
        }).fail(function (e) {
            alert(e);
        });
    });

    $("#changeLabel").on("click", function () {
        report.updateComponent(columns[4].id, {
            label: $("#label").val()
        }).fail(function (e) {
            alert(e);
        });
    });
});

<!-- Visualize: Change table column basic formatting  (5.6)
  -->

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://underscorejs.org/underscore-min.js"></script>
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>

<div style="float: left;">
	<h3>Heading format for 5th column</h3>
	Align:  <select id="headingFormatAlign"><option value="left">left</option><option value="center">center</option><option value="right">right</option></select>

	<br/>
	Background color: <input type="text" id="headingFormatBgColor" value=""/>

	<br/>
	Font size: <input type="text" id="headingFormatFontSize" value=""/>

	<br/>
	Font color: <input type="text" id="headingFormatFontColor" value=""/>

	<br/>
	Font name: <input type="text" id="headingFormatFontName" value=""/>

	<br/>
	Bold: <input type="checkbox" id="headingFormatFontBold" value="true"/>

	<br/>
	Italic: <input type="checkbox" id="headingFormatFontItalic" value="true"/>

	<br/>
	Underline: <input type="checkbox" id="headingFormatFontUnderline" value="true"/>

	<br/><br/>

	<button id="changeHeadingFormat">Change heading format</button>
</div>
<div style="float: left;">
	<h3>Details row format for 5th column</h3>
	Align: <select id="detailsRowFormatAlign"><option value="left">left</option><option value="center">center</option><option value="right">right</option></select>

	<br/>
	Background color: <input type="text" id="detailsRowFormatBgColor" value=""/>

	<br/>
	Font size: <input type="text" id="detailsRowFormatFontSize" value=""/>

	<br/>
	Font color: <input type="text" id="detailsRowFormatFontColor" value=""/>

	<br/>
	Font name: <input type="text" id="detailsRowFormatFontName" value=""/>

	<br/>
	Bold: <input type="checkbox" id="detailsRowFormatFontBold" value="true"/>

	<br/>
	Italic: <input type="checkbox" id="detailsRowFormatFontItalic" value="true"/>

	<br/>
	Underline: <input type="checkbox" id="detailsRowFormatFontUnderline" value="true"/>
	    
	<br/><br/>
	<b>Number pattern:</b>
	
	<br/>
	Negative format: <input type="text" id="detailsRowFormatPatternNegativeFormat"/>

	<br/>
	Precision: <input type="text" id="detailsRowFormatPatternPrecision"/>

	<br/>
	Currency: <select id="detailsRowFormatPatternCurrency">
					<option value="">----</option>
					<option value="USD">USD</option>
					<option value="EUR">EUR</option>
					<option value="GBP">GBP</option>
					<option value="YEN">YEN</option>
					<option value="LOCALE_SPECIFIC">LOCALE_SPECIFIC</option>
			</select>

	<br/>
	Thousands grouping: <input type="checkbox" id="detailsRowFormatPatternGrouping" value="true"/>

	<br/>
	Percentage: <input type="checkbox" id="detailsRowFormatPatternPercentage" value="true"/>
	
	<br/><br/>
	<button id="changeDetailsRowFormat">Change details row format</button>
</div>
<div style="float: left;">
	<h3>Change label of 5th column</h3>
	<br/>
	Label <input type="text" id="label"/>
	<br/>
	<button id="changeLabel">Change label</button>
</div>
<div style="clear: both;"></div>

<div id="container"></div>