CODEWITHSUNDEEP
javascripttabulator
D Durham
D Durham

Reputation: 1341

How can a header selected filter value be formatted using Tabulator?

This is a follow up to this SO question. It relates to SELECT header filters using Tabulator. The accepted answer works for formatting the list items

{
      title: "Topic",
      field: "topic",
      width: 120,
      headerFilterPlaceholder: "-- Select --", 
      headerFilter:"select", 
      headerFilterParams: {
          values: [1.0, 1.1, 1.2],
          listItemFormatter:function(value, title){ 
              return "<b>" + title + "</b>";
          },
      }
},

However once selected, the formatting then appears if the selected value of the editor(?) and we get the formatting displayed with the title instead of just title. We think we may need a custom Editor to resolve this but are not sure. We do NOT want the user to be able to edit the values in the table, we just want to selected options value to display without the formatting HTML from the listItemFormatter.

For example, if 1.0 is selected, we want 1.0 to be display in the filter box after selection instead of <b>1.0</b>. This JS Fiddle is set up with an example. Select a formatted list option and you should see the formatted value in the select box after selection. How can the formatting of the selected value be removed?

Upvotes: 0

Views: 346

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8348

You cannot do this using the built in select editor because it uses an input element to display the selected value and input elements can only hold text.

To gain this functionality you would need to build a custom editor. Tabulator has documentation that takes you through How to build a custom editor

You could even base it off the existing select editor, which you can find the code for here

Upvotes: 1

Related Questions