CODEWITHSUNDEEP
javascripthtmltabulator
Vojtěch Bureš
Vojtěch Bureš

Reputation: 3

Multiselect style in Tabulator

I do have a multiselect header filter in tabulator created according to this guide: How do I create a multi-select header filter in tabulator?

I am lost with styling that multiselect input field. Would you please advise, how can I change the style to i.e. chosen, select2, bootstrap, or any other custom style?

I have tried to to assign css class to that column header, which works, but the data are not dynamically changed.

Thanks in advance for your help!

My current code:

<!DOCTYPE html>
<html>
<head>

<title>List of processing items</title>

<meta charset=UTF-8>
<?php include 'header.php';?>
</head>
<body>

<div class="container">
<div id="tabulator"></div>
<script type="text/javascript">

const processingTypeTypes = ['TASK', 'WORKFLOW'];
function multiSelectHeaderFilter(cell) {
  var values = processingTypeTypes;
  const filterFunc = (rowData) => {
    return values.includes(rowData['processingType']);
  }
  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('processingTypeSelector');
    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 = 'processingTypeSelector';
  select.class = "chosen-select";
  select.style = 'width: 100%';
  processingTypeTypes.forEach(processingType => {
    select.innerHTML += "<option id='" + processingType + "' value='" + processingType + "' selected='selected'>" + processingType + "</option>";
  });
  cell.getColumn().getTable().addFilter(filterFunc);
  select.addEventListener('change', onChange);

  return select;
}
</script>

<script>
var tabledata = 
<?php include("include/dummyJson.php"); ?>
;

var table = new Tabulator("#tabulator", {
    layout:"fitColumns",
    headerSort: true,
    tooltips:true,
    placeholder:"No Data. Incorrect input, OR empty response.",
    data:tabledata,
    columns:[
    {title:"Type", field: "processingType", sorter: "string", headerFilter: multiSelectHeaderFilter, headerFilterLiveFilter: false},
    ],
});
</script>

</div>

</body>
</html>

Upvotes: 0

Views: 1131

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8368

The styling of the list element will not be changed if you styled the column header because the list element is attached directly to the body element and absolutely positioned to below the input element for the select. This approach removes any container overflow issues that would otherwise be present.

If you want to be able to style the lists themselves then you need to override the CSS applied to the classes. (make sure you add this css after you import your tabulator.css)

To override anything on the list container you will need:

.tabulator-edit-select-list{
    border:2px solid #f00; //make list have red border
}

To override anything on the list items you will need:

.tabulator-edit-select-list .tabulator-edit-select-list-item{
    color:#f00; //make list item have red text
}

To override anything on a selected list item you will need:

.tabulator-edit-select-list .tabulator-edit-select-list-item.active{
    background:#f00; //make list item background red when selected
}

To override anything on a focused list item you will need:

.tabulator-edit-select-list .tabulator-edit-select-list-item.focused{
    background:#0f0; //make list item background green when focused
}

Upvotes: 0

Related Questions