I have recently switched from Tabulator 4.5 to 5.0 and I am having some problems with my old code. I used to just give existing Drupal HTML tables a Tabulator skin, however, now while the tables are generated, the data is lost, and no rows are displayed. Here is an example:
HTML
<table data-drupal-selector="edit-cimek" class="responsive-enabled table table-hover table-striped" id="edit-cimek"
data-striping="1">
<thead>
<tr>
<th>Hivatalos név</th>
<th>Címtípus</th>
<th>Teljes cím</th>
<th>Kontakt</th>
<th>Gombok</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>AAAAAAAAAAAAAAAAAAAA</td>
<td>BBBBBBBBBB</td>
<td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</td>
<td><a id='cimtorol_5' class='cimtorol'><img title='Törlés'
src='/src/here' alt='Törlés' width='30px'></a> <a
id='cimmodosit_5' class='cimmodosit'><img title='Módosítás'
src='/src/here' alt='Módosítás' width='30px'></a>
</td>
</tr>
<tr class="even">
<td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td>BBBBBBBBB</td>
<td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
<td>D</td>
<td><a id='cimtorol_1' class='cimtorol'><img title='Törlés'
src='/src/here' alt='Törlés' width='30px'></a> <a
id='cimmodosit_1' class='cimmodosit'><img title='Módosítás'
src='/src/here' alt='Módosítás' width='30px'></a>
</td>
</tr>
</tbody>
</table>
JS
var table = new Tabulator("#edit-cimek", {
columns: [
{ title: Drupal.t('Official name'), field: "name", sorter: "string" },
{ title: Drupal.t('Address type'), field: "type", sorter: "number" },
{ title: Drupal.t('Full address'), field: "address", sorter: "string" },
{ title: Drupal.t('Contact'), field: "kapcstarto", sorter: "number" },
{
title: Drupal.t('Buttons'), field: "buttons", sorter: "string", formatter: "html", cellClick: function (e, cell) {
e.preventDefault();
}
}
]
});
What might be the problem, and why doesn't it work in 5.0 when it worked in 4.5?