Error rendering visual when align table content

Hi, I wrote this code to center the content of a table:

// Center the table content. By GB

return function() {

var f = function() {};

f.version = "1";

f.supported = {
    visualType: [
        "table"
    ]
};

f.settings = function() {
    return [
        {
            id: "CENTER",
            displayName: "Apply",
            type: "boolean",
            defaultValue: "false"
        },
		{
            id: "ALIGN",
            displayName: "Align value",
            type: "string",
            defaultValue: "center"
        }
	];
};

f.disableDraw = function() {
    return false;
};

f.beforeDraw = function() {
};

f.afterDraw = function() {

var $visual = $('#' + arcapi.chartId());
var visual_dataResult = arcapi.dataResult();
var visual_dataResult_rows = visual_dataResult.rows();

var apply_enabled = arcapi.getSetting("CENTER");

if (apply_enabled === "true") {

	var align_value = arcapi.getSetting("ALIGN");
	var dataResult_columnIndex = visual_dataResult.columnNameToIndex(align_value);
	var visualElements_table = d3.selectAll("#" + arcapi.chartId() + " .dataTables_scrollBody tbody tr td");
	

	visualElements_table.style(
	'text-align',
	
		function(d, i) {
		            var dataResult_columnValue = +visual_dataResult_rows[i][dataResult_columnIndex];
					    	return align_value;
                    }
  );
}	
};
return f;
}();

It works for the first 25 rows - after that, no style is applied.

Error Msg:

App xxxxxxx. Error rendering visual xxxxxx. Extension 34. Entrypoint afterDraw Less

TypeError: Cannot read property ‘undefined’ of undefinedTypeError: Cannot read property ‘undefined’ of undefined at HTMLTableCellElement.eval

The same code works for e.g. the background-color. Whats the problem here, when I am trying to center table content?

Thank you
George

here

Georgio,

Are you looking to apply “center” text-align all columns in the table? If so, applying this CSS might be easier:

.center-align .dataTables_scrollBody tbody tr td {
    text-align: center;
}

Be sure to add the “center-align” CSS class to the “Enter CSS classes for visual” input box at the top of the page (see below). This will make sure that your CSS only applies to this particular visual.

30%20PM

2 Likes

George - Tadd brings up a good point that you can do this with basic CSS.

That being said, your code is having issues on this this:

//var dataResult_columnValue = +visual_dataResult_rows[i][dataResult_columnIndex];

If you simply remove / comment out it will work fine for all rows.

Hope it helps.

2 Likes

Tadd, Shaun, thank you guys!