Header filtering - create Select field with down arrow

Question

I am using Tabulator 5.x. I have a table with header filtering. The column in question is the last column "Transcribed". Is there a way to have the typical down arrow on the right side of the select box that shows the end user it is a drop down list similar to if you were using option in html? Rather than having to click on it filter field to see the choices.

I looked in documentation but do not see any examples using a down arrow. I also looked in the CSS, but did not anything if indeed it was there.

---

var table = new Tabulator("#transcription-table", {
height:"640px",
layout:"fitDataStretch",
ajaxURL:"get_transcriptions.php",
columns:[
    {title:"ID", field:"id", headerSort:false, visible:false},       
    {title:"Song Title", field:"songtitle", width:350, sorter:"string", headerFilter:"input"},
    {title:"Artist / Group", field:"artistgroup", widthGrow:1.5 ,sorter:"string", headerFilter:"input"},

    {title:"Transcribed", field:"transcribed", widthGrow:1.2, sorter:"string", headerTooltip:"Transcribed into music notation", editor:"select", editorParams:{values:{"Yes":"Yes", "No":"No"}}, headerFilter:true, headerFilterParams:{values:{"Yes":"Yes", "No":"No", "":""}}},
    
    ]
});

---

Thank you.

Answer 1

You can create your own editor by extending editor module as

Tabulator.extendModule("edit", "editors", {
  selectwithdrop: function (cell, onRendered, success, cancel, editorParams) {
      var cellValue = cell.getValue().toUpperCase(),
            input = document.createElement("select");

        Object.keys(editorParams.values).forEach((key) => {
          let option = document.createElement("option");
          option.text = editorParams.values[key];
          option.value = key;
          input.add(option);
      });

      input.style.padding = "10px";
      input.style.width = "100%";
      input.style.boxSizing = "border-box";
      input.style.border = "1px solid #4b4b4b";
      input.style.borderRadius = "5px";
      input.style.outline = "none";

      input.value = cellValue;

      // onRendered(function () {
      //    input.focus();
      //    input.style.height = "100%";
      // });

      function onChange(e) {
          success(input.value);
      }

      //submit new value on blur or change
      input.addEventListener("change", onChange);
      // input.addEventListener("blur", onChange);

      //submit new value on enter

      return input;
  },
});

Working Demo CodeSandBox