I don't see anything wrong with your approach. In one of my projects, I'm successfully using:
var myCols = [...];
$('#dataTable').handsontable({
data: serverdataarray,
columns: myCols
});
In you sample code, the comment line "// Strictly speaking ...": At the beginning of the line you seem to have too many closing brackets. var cols = [...]});
should just be var cols = [...];
I'm assuming its a typo.
Except for that I suggest checking that the the columns data is set to exactly the same ID/name as the column has from the server and not i.e. what you want as a heading. Example:
var cols = [{ data: "RefNum" }, { data: "Qty"}];
Add headers using:
colHeaders: ["Reference", "Quantity"]
The last thing I can think of is that there is something wrong with the renderer. Try removing the renderer for each column and see if it works first. Its kind of hard to help without more code on this.