Tabulator JS: After loading data column not rendering

Question

after i loading the data via ajax in tabulatorJS, the column header titles changed to data value name. The ajax response is a java object, which has the same attribute names as the field name in tabulator columns. The response you can see at bottom of this article. Data found

If no data found the table was rendered correctly. No data found

Have you any idea?

table = new Tabulator("#table-div", {
    ajaxURL: '/loadDataObject.do',
    ajaxConfig: 'GET',
    ajaxParams: {name: $('#name').val()},
    // data: dataObject,
    responsiveLayout: true,
    keybindings: true,
    locale: true,
    langs: {
        "de-de": {
        }
    },
    movableColumns: true,
    movableRows: true,
    resizableRows: false,
    headerSort: false,
    autoColumns: true,
    autoResize: true,
    layout: 'fitColumns',
    placeholder: $.i18n.prop('table.no_data_found'),
    columns: [
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, cssClass: 'disabled'},
        {title: $.i18n.prop('table.pos_number'), field: 'posNumber', editor: 'input', width: 40},
        {title: $.i18n.prop('table.symbol'), field: 'classSymbol', width: 45, cssClass: 'disabled item-symbol'},
        {title: $.i18n.prop('table.item_work_operation_number'), field: 'itemNumber', editor: 'input', width: 70, cssClass: 'item-number text-uppercase'},
        {title: $.i18n.prop('table.item_work_operation_name'), field: 'itemName', width: 300, cssClass: 'disabled item-name'},
        {title: $.i18n.prop('table.item_length'), field: 'itemLength', width: 70, cssClass: 'disabled item-length'},
        {title: $.i18n.prop('table.item_width'), field: 'itemWidth', width: 70, cssClass: 'disabled item-width'},
        {title: $.i18n.prop('table.item_height'), field: 'itemHeight', width: 70, cssClass: 'disabled item-height'},
        {title: $.i18n.prop('table.warehouse_storage_unit'), field: 'warehouseStorageUnit', width: 70, cssClass: 'disabled warehouse-storage-unit'},
        {title: $.i18n.prop('table.position_text'), field: 'positionText', editor: 'input', width: 200}]);

AJAX-Response

[
       {
          "posNumber":"1",
          "classSymbol":"fa-shopping-cart",
          "itemNumber":"V000092",
          "itemName":"Test asd asd a         ",
          "itemLength":1234000.34,
          "itemWidth":0.0,
          "itemHeight":0.0,
          "warehouseStorageUnit":"mm",
          "positionText":"jsdfakjfjöq",
          "quantity":12.0,
          "fCode":"ML",
          "benefit":12.0,
          "cutLength":0.0,
          "cutWidth":0.0,
          "cutHeight":0.0,
          "edge":"H",
          "edgeProperty":"",
          "provisionType":""
       }
    ]

Oli Folkerd Oli Folkerd · Accepted Answer · 2020-10-18T14:17:02

This is happening because you have autoColumns enabled.

With auto columns enabled it will automatically create the tables columns based on the data returened.

If you want to define the columns first the you should simply not define the autoColumns option in your table setup

Tabulator JS: After loading data column not rendering

1 Answers