How can you get Tabulator to use Select2 header filter?

I’m new to both Tabulator and select2 and I think this is possibly a bad way to do it but it seems like it miiight work.

If you want to use select2 with text input elements, it looks like you need to use the full package.

https://jsfiddle.net/dku41pjy/

var tableData = [{
    id: "1",
    topic: "1.1"
  },
  {
    id: "2",
    topic: "2.2"
  },
];

var columns = [{
  title: "ID",
  field: "id"
}, {
  title: "Topic",
  field: "topic",
  headerFilter: 'select2Editor'
}, ];

var awaiting_render = [];

function do_render({ editor, cell, success, cancel, editorParams }) {
  console.log('possibly dodgy onrender');
    var selData = [{
    id: '',
    text: "-- All Topics --"
  }, {
    id: '1.1',
    text: "One"
  }, {
    id: "2.2",
    text: "Two"
  }, {
    id: "3.3",
    text: "Three"
  }, ];
  
  $(editor).select2({
    data: selData,
    //allowClear: true,
  });

  $(editor).on('change', function(e) {
    console.log('chaaaange')
    success($(editor).val());
  });


  $(editor).on('blur', function(e) {
    cancel();
  });
      
}
function render_awaiting() {
    var to_render = awaiting_render.shift();
  do_render(to_render);
  if(awaiting_render.length > 0)
    render_awaiting();
}

Tabulator.prototype.extendModule("edit", "editors", {
    select2Editor:function(cell, onRendered, success, cancel, editorParams) {
      console.log(cell);
      var editor = document.createElement("input");
      editor.type = 'text';
      awaiting_render.push({ editor, cell, success, cancel, editorParams });

      return editor
    },
});

var table = new Tabulator("#table", {
  placeholder: "No Data Found.",
  layout: "fitData",
  data: tableData,
  columns: columns,
  tableBuilt:function(){
    render_awaiting();
  },
});

Edit: my suspicion is that onRendered only gets fired when these edit elements are used in cells to sope with the transition between showing just data and showing an editable field.