CODEWITHSUNDEEP
tabulator
waubain
waubain

Reputation: 53

Header filtering - create Select field with down arrow

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.

Upvotes: 0

Views: 406

Answers (2)

Dhananjay Gavali
Dhananjay Gavali

Reputation: 251

The tabulator does provides built-in options to show the select box in the header field as well as on cell. However the only issue is it also applies the select box to rows.

Here is demo example of column definition for showing select box in header filter. The extra attributes editor, headerFilterParams, editorParams, clearable needs to provide

{{title:"Artist / Group", field:"artistgroup", headerFilter:true,visible:true,editor: "list", editorParams: { values:getHeaderValues() }, headerFilterParams: { values: getHeaderValues(), clearable: true }},

Here is the function for your reference which returns the list

function getHeaderValues(){
    let planStatusLabels = {};
    Object.keys($plan_status_map_en).forEach(key => {
      planStatusLabels[key] = $plan_status_map_en[key].label;
  });
  return planStatusLabels;
  }

You can skip attribute editorParams and it will still show a dropdown on click of cell item and the value will be no value.

here is documentation link of tabulator with the demo: https://tabulator.info/examples/6.2?#filter-header

EDIT: The solution is quite simple. You just need to make editable as False to avoid the dropdown on cell click as well. editable:false

Upvotes: 0

Double H
Double H

Reputation: 4160

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

Upvotes: 1

Related Questions