Tabulator and Select2, not showing selecte value at load

Question

I want to use Select2 in Tabulator but triggering the selected value does not work.

Here is my code of the formatter for the table column:

{
    title: "Select2", field: "lucky_no", align: "center", width: 300, editor: true,
    formatter: function (cell, formatterParams, onRendered) {
        onRendered(function () {
            var select_2 = $(cell.getElement());
            select_2.select2({
                         theme: "classic",
                         placeholder: 'Select',
                         data: list,
                         minimumResultsForSearch: Infinity,
                         width: 300,
                         minimumInputLength: 0,
                         allowClear: true,
            }).on('change', function (e) {
                                console.log('change');
                            });

            select_2.val(list[cell.getValue()].id);
            var x = select_2.val();
            select_2.val(x).trigger('change');
        })
    }
},

I have added a working example.

Triggering the selected value works in drop-down above the table. Although in the table the change event is triggered it does not show the selected value in the dropdown.

Thanks,

Aad

Answer 1

If you are trying to make the field editable, you should be creating a custom editor not a formatter

Formatters are for displaying data to users, editors are for allowing the user to edit the data.

Built In Select Editor

Before I go to far into this example, did you know that Tabulator already comes with a Select Editor built-in to make your life even easier, in the demo in the documentation, have a look at the gender column to see it in action.

Custom Editor

When using custom editors, they come with select and cancel call backs to allow you to pass the data back into the table.

So for your example it should look something like this (this code is untested)

//create custom editor
var select2Editor = function(cell, onRendered, success, cancel, editorParams){

    //create input element to hold select
    var editor = document.createElement("input");

    onRendered(function(){
        var select_2 = $(editor);

        select_2.select2({
             theme: "classic",
             placeholder: 'Select',
             data: list,
             minimumResultsForSearch: Infinity,
             width: 300,
             minimumInputLength: 0,
             allowClear: true,
        });

        select_2.on('change', function (e) {
            success(select_2.val());
        });


        select_2.on('blur', function (e) {
            cancel();
        });
    });


    //add editor to cell
    return editor;
}


//in your column definition for the column
{title: "Select2", field: "lucky_no", align: "center", width: 300, editor: select2Editor},

Answer 2

My first question .. this was not included!

var tabledata = [{
    id: 1,
    name: "Oli Bob",
    progress: 12,
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984",
    car: 1,
    lucky_no: 3
  },
  {
    id: 2,
    name: "Mary May",
    progress: 1,
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982",
    car: true,
    lucky_no: 2
  },
  {
    id: 3,
    name: "Christine Lobowski",
    progress: 42,
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982",
    car: "true",
    lucky_no: 5
  },
  {
    id: 4,
    name: "Brendon Philips",
    progress: 100,
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980",
    lucky_no: 7
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    progress: 16,
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999",
    lucky_no: 4
  },
];

var list = [{
  "id": 1,
  "text": "Organisatorische tekortkomingen"
}, {
  "id": 2,
  "text": "Mechanische gevaren"
}, {
  "id": 3,
  "text": "Hijs-/hefgevaren"
}, {
  "id": 4,
  "text": "Ergonomische tekortkomingen"
}, {
  "id": 5,
  "text": "Mobiliteit en gevaarlijke situaties"
}, {
  "id": 6,
  "text": "Elektrische gevaren"
}, {
  "id": 7,
  "text": "Blootstelling aan gevaarlijke stoffen"
}, {
  "id": 8,
  "text": "Gevaarlijke situaties - Algemeen"
}, {
  "id": 9,
  "text": "Blootstelling aan straling"
}, {
  "id": 10,
  "text": "Druk"
}, {
  "id": 11,
  "text": "Blootstelling aan trillingen"
}, {
  "id": 12,
  "text": "Blootstelling aan geluid"
}, {
  "id": 13,
  "text": "Fysieke gevaren (overig)"
}, {
  "id": 14,
  "text": "Gevaar voor/door derden (hijsen/heffen)"
}, {
  "id": 15,
  "text": "Hijsen/heffen en ergonomische tekortkomingen"
}, {
  "id": 16,
  "text": "Mobiliteit en werkplek/bestuurdersplaats"
}, {
  "id": 17,
  "text": "Mobiliteit en ergonomische tekortkomingen"
}, {
  "id": 18,
  "text": "Mobiliteit en energiebron en -overbrenging"
}, {
  "id": 19,
  "text": "Mobiliteit en stabiliteit"
}, {
  "id": 20,
  "text": "Gevaarlijke situaties door onverwachte opstart/beweging"
}, {
  "id": 21,
  "text": "Gevaren beheerst!",
  "scope": "Algemeen"
}, {
  "id": 22,
  "text": "NIET beoordeeld!"
}];

$('#selectList').select2({
  data: list,
  minimumResultsForSearch: Infinity,
  width: 'resolve',
  minimumInputLength: 0,
  allowClear: true,
  placeholder: "Select",
});

$('#selectList').val(7).trigger('change');

//Build Tabulator
var table = new Tabulator("#example-table", {
  height: "500px",
  columns: [{
      title: "Name",
      field: "name",
      width: 150
    },
    {
      title: "Location",
      field: "location",
      width: 130
    },
    {
      title: "Progress",
      field: "progress",
      sorter: "number",
      align: "left",
      formatter: "progress",
      width: 140
    },
    {
      title: "Gender",
      field: "gender",
      editor: "select",
      editorParams: {
        "male": "Male",
        "female": "Female"
      }
    },
    {
      title: "Rating",
      field: "rating",
      formatter: "star",
      align: "center",
      width: 100
    },
    {
      title: "Date Of Birth",
      field: "dob",
      align: "center",
      sorter: "date"
    },
    {
      title: "Driver",
      field: "car",
      align: "center",
      formatter: "tickCross"
    },
    {
      title: "Select2",
      field: "lucky_no",
      align: "center",
      width: 300,
      //editor: true,
      formatter: function(cell, formatterParams, onRendered) {
        onRendered(function() {
          var select_2 = $(cell.getElement());

          select_2.select2({
            theme: "classic",
            placeholder: 'Select',
            data: list,
            minimumResultsForSearch: Infinity,
            width: 300,
            minimumInputLength: 0,
            allowClear: true,
          }).on('change', function(e) {
            //console.log('change');
          });

          select_2.val(list[cell.getValue()].id);
          var x = select_2.val();
          select_2.val(x).trigger('change');
        })
      }
    },
  ],
});

//load sample data into the table
table.setData(tabledata);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/tabulator-tables@4.1.3/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.1.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<html>

<body>
  <div>
    <select class="form-control" name="selectList" id="selectList">
    </select>
  </div>
  <br />

  <div id="example-table" class="table-striped table-bordered"></div>
</body>

</html>