How to assign a string with angle brackets to a cell in Tabulator.js, for example: "a<b<c"?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How to assign a string with angle brackets to a cell in Tabulator.js, for example: "a

P粉718730956 2023-08-03 13:48:37

479

I have a cell in a Tabulator table that uses a list type editor. The options are populated by an array of strings that look like this (for example):

[ "a When the list editor is populated (using editorParams:{values:exampleOptions} in the column definition), or when I use setValue() directly on the cell, it discards what follows the angle brackets. So in the dropdown I see something like this: 
 "a", "b", "c",
 How to display complete string in dropdown list/cell?

P粉718730956

reply all (1)

P粉6593785772023-08-04 00:07:33 1 floor

One way is to use the itemFormatter option in editorParams to define a new element node for the list of values and return the innerHTML of the element containing the list value:

editorParams: { values: ["a { const listNode = document.createTextNode(value); element.appendChild(listNode); return element.innerHTML; } },

This is an example on the name column:

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 { 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' } ] })