CODEWITHSUNDEEP
javascripttabulatorformatter
Eki
Eki

Reputation: 95

Missing formatter when using setColumns function in Tabulator 4.9

I have a strange behavior when using the setColumns - the formatters are not recognized anymore:

"Formatter Error - No such formatter found: selectFilter"

If I disable the table.setColumns() line, the local version works just fine and the formatter selectFilter works.

The Tabulator version is 4.9

What would cause this?

html:

    <span id="link_text">...</span>
    <br>
    <div align="center" id="status_table"></div>

javascript code:

<script>
var dataObject = [];
var selectFilter = function(cell, formatterParams){
        var data = cell.getRow().getData();
        var display = "<button> A button </button>";
        return display;
};

var status_table = new Tabulator("#status_table",{
    data:dataObject,
    layout:'fitColumns',
    columns:[
             {title:"Select", hozAlign:"center", field:"open_link", width:200, formatter:selectFilter}
            ],
});

update();

function update() {
    $.ajax({url: PageUrl, 
    success: function(result){
        projectData = result;
        definitionsData = result['definitions'];
        columnData = result['columns'];
        tableData = result['table_data'];
        status_table.setData(tableData);
        document.getElementById("status_table").style.width = definitionsData['width'];
        //status_table.setColumns(columnData);  // if enabled, error happens, other column information comes from JSON correctly
    
    }});
} 
</script>

Here is the JSON:

[
  {
    "definitions": [
      {
        "width": "400px"
      }
    ],
    "columns": [
      {
        "title": "First",
        "hozAlign": "left",
        "field": "project_description",
        "width": 200,
        "headerSort": true
      },
      {
        "title": "Second",
        "hozAlign": "left",
        "field": "open_link",
        "width": 100,
        "formatter": "selectFilter",
        "headerSort": true
      },
      {
        "title": "Third",
        "hozAlign": "left",
        "field": "open_link",
        "width": 100,
        "headerSort": true
      }
    ],
    "table_data": [
      {
        "first_column": "Col 1",
        "open_link": "left"
      }
    ]
  }
]

Upvotes: 1

Views: 541

Answers (1)

haferje
haferje

Reputation: 1003

The issue is in the two different ways you define your custom formatter.

When you initialize the Tabulator instance, you are referencing a function. When you setColumns(), based on your returned Ajax JSON data, you are referencing a string that can only be associated with a curtom Format Module definition. In your returned JSON data. "formatter": "selectFilter" only works if you define selectFilter in Tabulator's Format Module. You could define your custom formatter as:

Tabulator.prototype.extendModule("format", "formatters", {
    selectFilter: function(cell, formatterParams){
        var data = cell.getRow().getData();
        var display = "<button> A button </button>";
        return display;
    },
});

and always set column formatter with "formatter": "selectFilter",.

Upvotes: 2

Related Questions