CODEWITHSUNDEEP
tabulator
jjech
jjech

Reputation: 133

How do I create a multi-select header filter in tabulator?

This question has been asked several times in various forms over the years in the Tabulator GitHub repository. Here are a few instances: https://github.com/olifolkerd/tabulator/issues/527, https://github.com/olifolkerd/tabulator/issues/1759

I'm looking for an example of how to achieve this using a dropdown menu of some form --- ideally as described in #1759 (dropdown with checkboxes) but another solution that would work for us is a "select" editor that adds/removes CSVs in the header filter when a value is selected/deselected (extending on the example provided in #527).

Hopefully someone with experience working with custom header filters / editors in tabulator can provide an example of a multi-select header filter dropdown, but if not, then I will post a JSFiddle link myself once I've got something that works.

Upvotes: 4

Views: 8130

Answers (3)

Sahil Singla
Sahil Singla

Reputation: 61

Checkout: https://github.com/olifolkerd/tabulator/issues/527#issuecomment-850900451

Simple Answer by AkshayaBrianTauro

{
    field: "book_name",
    title: "Book Name",
    headerFilterPlaceholder: " ",
    headerFilter: 'select',
    headerFilterFunc:"in",
    headerFilterParams: {values:true, sortValuesList:"asc", multiselect:true}
},

Upvotes: 4

jjech
jjech

Reputation: 133

Here is an example of a custom header filter for tabulator of 'select multiple' type. It can be converted to a dropdown style if desired using external sources such as Chosen or multiselect.js

(I recommend running the below Code Snippet in Full Page view).

const speciesTypes = ['Human', 'Android', 'Betazoid', 'Klingon', 'Ferengi', 'Tamarian'];

function multiSelectHeaderFilter(cell) {

  var values = speciesTypes;

  const filterFunc = (rowData) => {
    return values.includes(rowData['species']);
  }

  const getSelectedValues = (multiSelect) => {
    var result = [];
    var options = multiSelect && multiSelect.options;
    var opt;

    for (var i = 0, iLen = options.length; i < iLen; i++) {
      opt = options[i];

      if (opt.selected) {
        result.push(opt.value || opt.text);
      }
    }
    return result;
  }

  const onChange = () => {
    var editor = document.getElementById('speciesSelector');
    values = getSelectedValues(editor);
    console.log("values: " + values);
    cell.getColumn().getTable().removeFilter(filterFunc);
    cell.getColumn().getTable().addFilter(filterFunc);
  }

  var select = document.createElement("select");
  select.multiple = "multiple";
  select.id = 'speciesSelector';
  select.class = "chosen-select";
  select.style = 'width: 100%';
  speciesTypes.forEach(species => {
    select.innerHTML += "<option id='" + species + "' value='" + species + "' selected='selected'>" + species + "</option>";
  });
  cell.getColumn().getTable().addFilter(filterFunc);
  select.addEventListener('change', onChange);

  return select;
}

var table = new Tabulator("#tabulator", {
  layout: "fitColumns",
  data: [{
    name: 'Geordi La Forge',
    species: 'Human'
  }, {
    name: 'Dathon',
    species: 'Tamarian'
  }, {
    name: 'Jean-Luc Picard',
    species: 'Human'
  }, {
    name: 'Worf, son of Mogh',
    species: 'Klingon'
  }, {
    name: 'Tasha Yarr',
    species: 'Human'
  }, {
    name: 'Data',
    species: 'Android'
  }, {
    name: 'Wesley Crusher',
    species: 'Human'
  }, {
    name: 'Jalad',
    species: 'Tamarian'
  }, {
    name: 'Lwaxana Troi',
    species: 'Betazoid'
  }, {
    name: 'Temba',
    species: 'Tamarian'
  }, {
    name: 'T\'Kuvma',
    species: 'Klingon'
  }, {
    name: 'Lore',
    species: 'Android'
  }, {
    name: 'Noonian Soongh',
    species: 'Human'
  }, {
    name: 'Darmok',
    species: 'Tamarian'
  }, {
    name: 'Reittan Grax',
    species: 'Betazoid'
  }, {
    name: 'Quark',
    species: 'Ferengi'
  }],
  headerSort: true,
  columns: [{
    title: 'Name',
    field: 'name',
    sorter: 'string'
  }, {
    title: 'Species',
    field: 'species',
    sorter: 'string',
    headerFilter: multiSelectHeaderFilter,
    headerFilterLiveFilter: false
  }, ],
});
<html>

  <head>
    <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
  </head>

  <body>
    <div id="tabulator"></div>
  </body>

</html>

JSFiddle: https://jsfiddle.net/jjech/3th28pv0/

Upvotes: 2

Michael O&#39;Keefe
Michael O&#39;Keefe

Reputation: 492

See my answer to Tabulator Multiple Filter in the same Column (show dropbox)

Extend as you see fit...

I dont think <select> support checkboxes as <option>'s, but it would be trivial to replace the <select> with a different style of "pulldown" that does.

Upvotes: 0

Related Questions