Добавление значений массива в опцию поля в столбце и для использования в respiveLayoutCollapseFormatter- Tabulator
Создана таблица табулятора с разборными строками, но в данных столбца есть массив, который необходимо отформатировать и применить в функции respiveLayoutCollapseFormatter и добавить в строку.
let table = new Tabulator('#newTable', {
data: shareTableData, //set initial table data
layout: "fitDataFill",
columns: [{
title: "col1",
field: "name",
align: "right",
sorter: "string",
width: '35%',
sortable: true
},
{
title: "col2",
field: "col2",
align: "right",
sorter: "alphanum",
width: '20%',
sortable: true
},
{
formatter: "responsiveCollapse",
width: 30,
minWidth: 30,
align: "center",
resizable: false,
headerSort: false
},
{
title: "books",
field: "booklist",
width: 150,
responsive: 2
},
];,
columnHeaderSortMulti: true,
initialSort: [{
column: 'name',
dir: 'asc'
}],
responsiveLayout: "collapse",
responsiveLayoutCollapseFormatter: function (data) {
var list = document.createElement("div");
/*data is any object, it needs to be an array*/
for (var key in data) {
let item = document.createElement("div");
console.log(data[key]);
item.innerHTML = "<strong>" + key + "</strong> - " + data[key];
list.appendChild(item);
}
return Object.keys(data).length ? list : "";
}
});
Как мы можем отформатировать поле списка книг, если список книг ['book1','book2', 'book3'] и добавить под разборным div
1 ответ
Если вы хотите отформатировать данные столбца определенным образом, вам следует использовать средства форматирования.
Взгляните на документацию Formatter для получения дополнительной информации.