How to merge cells with the same content in table component?

Question Description

If there are multiple consecutive cells of the same data in a certain column of the table, these cells will be automatically merged and the content will be displayed in the center. How to achieve this effect on VTable?

Solution

You can set mergeCell to true in columns, and cells with the same content before and after in the column will be automatically merged:

const columns = [
  {
    // ......
    mergeCell: true
  }
];

Code Example

const columns = [
  {
    field: 'id',
    title: 'ID',
    width: 80
  },
  {
    field: 'value',
    title: 'number',
    width: 100,
    mergeCell: true
  }
];
const option: TYPES.ListTableConstructorOptions = {
  records,
  columns
};
new ListTable(document.getElementById('container'), option);

Results

Online demo

Quote

• Merge Cell Demo
• mergeCell api
• github