Tabulator Demo

About select editor text but not value in Tabulator

HTML

<script src="https://unpkg.com/tabulator-tables@5.2/dist/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.2/dist/css/tabulator.min.css">
<div id="example-table" ></div>

JavaScript

var tableData = [{
    name: "Alice", level: "2", actions: "<button tabindex='0' onclick=\"alert('clicked 1')\">X</button>"
  },
  {
    name: "Bob", level: "3", actions: "<button tabindex='0' onclick=\"alert('clicked 2')\">X</button>",
  },
];

var levels = {
  1: 'Pro',
  2: 'Advanced',
  3: 'Moderate',
  4: 'Rookie'
};

var table = new Tabulator("#example-table", {
  height: '100px',
  data: tableData,
  columns: [{
  	title: "Name",
    field: "name"
  },{
    title: "Level",
    field: "level",
    editor: "list",
    editorParams: {
      values: levels
    },
    formatter: function(cell, formatterParams, onRendered) {
      var select = document.createElement('select');
      select.style.width = '100%';
      select.innerHTML = '<option>' + levels[cell.getValue()] + '</option>'; 

      return select;
    }
  }, {title: "Actions", field: "actions", formatter: 'html'} ],
});