const tableData = [
{ id: 1, name: 'Billy Bob', age: '23', gender: 'male', height: 1, col: 'red', dob: '25/03/2000' },
{ id: 2, name: 'Mary May', age: '41', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982' },
{ id: 3, name: 'Margret Marmajuke', age: '30', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1993' }
]
const table = new Tabulator('#table', {
layout: 'fitColumns',
data: tableData,
columns: [
{ title: 'Name', field: 'name', width: 175, resizable: false },
{ title: 'Age', field: 'age', width: 100, resizable: false },
{ title: 'Gender', field: 'gender', width: 100, resizable: false },
{ title: 'Favourite Color', field: 'col', width: 150 },
{ title: 'Date Of Birth', field: 'dob' }
],
rowFormatter: function (row) {
const data = row.getData()
if (data.col === 'blue') {
const nodes = row.getElement().childNodes
const [c1, c2, c3, ...remains] = nodes
const merged = document.createElement('div')
const mergedWidth =
parseInt(c1.style.width, 10) + parseInt(c2.style.width, 10) + parseInt(c3.style.width, 10) + 'px'
merged.style.width = mergedWidth
merged.className = 'tabulator-cell'
merged.innerHTML = 'Merged "' + data.name + ' + ' + data.age + ' + ' + data.gender + '"'
row.getElement().replaceChildren(merged, ...remains)
}
}
})
<html>
<head>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05716467706964716a772871646769607645302b302b37">[email protected]</a>/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc889d9e89909d88938ed1889d9e90998fbcc9d2c9d2ce">[email protected]</a>/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
</html>