Having problems with importing html tables to Tabulator

Viewed 51

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?

0 Answers
Related