Currently, I am working on a project involving Tabulator.js and attempting to incorporate a column with a multi-select feature that includes a search option. My approach has been to utilize the Select2 library, but I have run into some challenges.
Here is the code snippet I have been using:
const tabledata = [
{
id: 1,
name: "Oli Bob",
select2: ['two', 'three']
},
{
id: 2,
name: "Mary May",
select2: ['two']
},
{
id: 3,
name: "Christine Lobowski",
select2: ['two']
},
{
id: 4,
name: "Brendon Philips",
select2: ['two']
},
{
id: 5,
name: "Margret Marmajuke",
},
];
const list = [
{
id: 'one',
text: 'one'
},
{
id: 'two',
text: 'two'
},
{
id: 'three',
text: 'three'
}
];
const select2Editor = function (cell, onRendered, success, cancel, editorParams) {
const editor = document.createElement("select");
onRendered(function () {
const select_2 = $(editor);
select_2.select2({
data: list,
width: '100%',
multiple: true,
minimumInputLength: 0,
})
if (typeof cell.getValue() == 'object') {
const selectedValuesIds = cell.getValue().map(val => list.find(x => x.text == val).id)
select_2.val(selectedValuesIds).trigger('change')
}
select_2.on('select2:select select2:unselect', () => {
const data = select_2.select2('data')
const cellValue = data.map(el => el.text)
success(cellValue)
});
// $(editor).on('blur', () => cancel)
editor.focus()
});
return editor;
};
const table = new Tabulator("#table", {
// debugEventsExternal: true,
// debugEventsInternal: true,
height: "500px",
data: tabledata,
rowHeight: 32,
columns: [
{
title: "Name",
field: "name",
width: 150
},
{
title: "Select2",
field: "select2",
width: 300,
editor: select2Editor,
},
],
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4330262f2620377103776d726d736e31206d73">[email protected]</a>/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5f4940494f581e6c18021d021c015e4f021c">[email protected]</a>/dist/js/select2.min.js"></script>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1a0f0c1b020f1a011c431a0f0c020b1d2e58405e405e">[email protected]</a>/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7938685928b86938895ca9386858b8294a7d1c9d7c9d7">[email protected]</a>/dist/js/tabulator.min.js"></script>
<div id="table"></div>I have encountered the following challenges while using this code:
The process of opening the list is cumbersome as it requires clicking twice - once for the editor to appear and then again for the list to show up. This feels counterintuitive.
If I click on other non-editable cells while the list is open, the focus does not shift away. I attempted to resolve this by adding "$(editor).on('blur', () => cancel)", but this causes the list not to open at all because the focus moves to the select2 element when the list appears, resulting in the editor closing.
I am exploring alternatives to simplify the implementation of this feature, potentially without relying on additional libraries. If there are any suggestions or guidance on improving my current approach using Select2, I would greatly appreciate it. Thank you!