Comment attribuer une chaîne avec des crochets angulaires à une cellule dans Tabulator.js, par exemple : « a<b<c » ?

Question

J'ai une cellule dans un tableau Tabulator qui utilise un éditeur de type de liste. Les options sont renseignées par un tableau de chaînes qui ressemblent à ceci (par exemple) :

[
   "a
Lorsque l'éditeur de liste est rempli (en utilisant editorParams:{values:exampleOptions} dans la définition de colonne), ou lorsque j'utilise setValue() directement sur la cellule, il supprime ce qui suit les crochets angulaires. Donc, dans la liste déroulante, je vois quelque chose comme ceci : 
"a",
   "b",
   "c",
Comment afficher la chaîne complète dans une liste déroulante/cellule ? 
            

Answer 1

Une solution consiste à utiliser l'option itemFormatter dans editorParams pour définir un nouveau nœud d'élément avec une liste de valeurs et renvoyer le innerHTML de l'élément contenant la valeur de la liste :

editorParams: {
  values: ["a<b", "b<c", "c<d"],
  itemFormatter: (label, value, item, element) => {
    const listNode = document.createTextNode(value);
    element.appendChild(listNode);

    return element.innerHTML;
  }
},

Voici un exemple sur la colonne nom :

const data = [{
    id: 1,
    name: 'Billy Bob',
    age: '12',
    gender: 'male',
    height: 1,
    col: 'red',
    dob: '',
    cheese: 1
  },
  {
    id: 2,
    name: 'Mary May',
    age: '1',
    gender: 'female',
    height: 2,
    col: 'blue',
    dob: '14/05/1982',
    cheese: true
  },
  {
    id: 10,
    name: 'Margret Marmajuke',
    age: '16',
    gender: 'female',
    height: 5,
    col: 'yellow',
    dob: '31/01/1999'
  }
]

const table = new Tabulator('#example-table', {
  data: data,
  columns: [{
      title: 'Name',
      field: 'name',
      editor: "list",
      editorParams: {
        values: ["a<b", "b<c", "c<d"],
        itemFormatter: (label, value, item, element) => {
          const listNode = document.createTextNode(value);
          element.appendChild(listNode);

          return element.innerHTML;
        }
      },
    },
    {
      title: 'Age',
      field: 'age'
    },
    {
      title: 'Gender',
      field: 'gender'
    },
    {
      title: 'Height',
      field: 'height'
    },
    {
      title: 'Favourite Color',
      field: 'col'
    }
  ]
})

<link href="https://unpkg.com/tabulator-tables@5.5.1/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.1/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>