adding array values in field option on column and to be used on responsiveLayoutCollapseFormatter- Tabulator

Question

Created a tabulator table having collapsible rows, But in the column data, I've an array, which needs to be formatted and applied in responsiveLayoutCollapseFormatter function and append in the row.

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 : "";
}

});

                                                  

How can we format the booklist field, if the booklist is ['book1','book2', 'book3'] and append under the collapsible div

Answer 1

如果要以特定方式格式化列数据，则应使用格式化程序。

请查看Formatter Documentation，以了解更多信息。