Error: cannot call methods on tabulator prior to initialization; attempted to call method 'addRow' - asp.net-mvc

Question

I have a page with a table:
<table id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
#Html.EditorFor(model => item);
}
</tbody>
</table>
And I then initialise Tabular like so:
$("#myTable").tabulator({
layout: "fitColumns",
addRowPos: "bottom",
columns: [
{ title: "Description", field: "Description", editor: "input" },
{ title: "Qty", field: "Quantity", sorter: "number", editor: "number", editorParams: { min: 0, step: 1, } },
{ title: "Cost", field: "Cost", sorter: "number", editor: "number", editorParams: { min: 0, step: 0.1, }, align: "right", formatterParams: { decimal: '.', thousand: '.', symbol: "R" }, bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: { decimal: '.', thousand: '.', symbol: "R" } },
{ formatter: "buttonCross", width: 30, align: "center", cellClick: function (e, cell) { cell.getRow().delete(); } },
],
});
This all works pretty nicely, but I attempted to add:
$("#add-row").click(function () {
$("#myTable").tabulator("addRow", {}, true);
});
clicking on my button to add a new row results in: Error: cannot call methods on tabulator prior to initialization; attempted to call method 'addRow'
I tried to do: var table = $("#myTable").tabulator... with table.addRow({}) but then I get an error saying addRow is not a function.
Is it supposed to work like this?

Answer 1

That message suggests that you havnt created your Tabulator object before you have called the addRow function.
If you are new to Tabulator then i would suggest that you dont use the jQuery wrapper. that was there more for legacy reasons from the old 3.5 version.
In this case you should use the constructor:
var table = new Tabulator("#myTable", {
layout: "fitColumns",
addRowPos: "bottom",
columns: [
{ title: "Description", field: "Description", editor: "input" },
{ title: "Qty", field: "Quantity", sorter: "number", editor: "number", editorParams: { min: 0, step: 1, } },
{ title: "Cost", field: "Cost", sorter: "number", editor: "number", editorParams: { min: 0, step: 0.1, }, align: "right", formatterParams: { decimal: '.', thousand: '.', symbol: "R" }, bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: { decimal: '.', thousand: '.', symbol: "R" } },
{ formatter: "buttonCross", width: 30, align: "center", cellClick: function (e, cell) { cell.getRow().delete(); } },
],
});
And then you can add rows like this:
table.addRow({}, true);
You just need to make sure that when you assign it to the table variable it is in a scope where it can be accessed by all functions that need it

Answer 2

I was initialising a Tabulator onto an existing table targetting the <table id="myTable"> element. Although this works great initially, trying other stuff (like in my question) kept on resulting in 'Error: cannot call methods on tabulator prior to initialization'.
I ended up scraping the predefined <table> and went with initialising on <div id="myTable"> and getting the data via ajax.
Now it all works as expected/documented. Dunno if this is a bug/supposed to work like this/my own incompetence, but at least I can move on.