🔗 Merge Cells

The Cell Merge feature allows you to combine adjacent cells into a single, larger cell, much like Excel’s merge functionality. This feature is particularly useful for creating headers that span multiple columns or rows and for visually grouping related data within your grid.

const cellMerge = [{ row: 1, column: 1, rowSpan: 2, colSpan: 2, rowType: 'rgRow', colType: 'rgCol' }]

Source code

TypeScript

src/components/cell-merge/CellMerged.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements(); // Define the custom element
import { useRandomData, currentTheme } from '../composables/useRandomData';

import { CellMergePlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';

const { isDark } = currentTheme();
const { createRandomData } = useRandomData();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');

  grid.source = createRandomData(100);
  // Define columns
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];
  // Define plugin
  grid.plugins = [CellMergePlugin, ColumnStretchPlugin];

  grid.additionalData = {
    cellMerge: [], // Define merge data
    stretch: 'all',
  };

  document.querySelector('.cell-merge')?.addEventListener('click', () => {
    grid.additionalData.cellMerge?.push();
    grid.additionalData = {
      ...grid.additionalData,
      cellMerge: [{
        row: 1,
        column: 1,
        rowSpan: 2,
        colSpan: 2,
        rowType: 'rgRow',
        colType: 'rgCol',
      }],
    };
  });

  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue

src/components/cell-merge/CellMerged.vue

<template>
  <div>
    <button
      class="rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      @click="addCellMerge"
    >
      Merge Cell
    </button>

    <br />

    <VGrid
      :theme="isDark ? 'darkCompact' : 'compact'"
      :columns="columns"
      :source="rows"
      :plugins="plugins"
      :additionalData="additionalData"
      hide-attribution
    />
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { VGrid } from '@revolist/vue3-datagrid';
import { CellMergePlugin, ColumnStretchPlugin, type MergeData, type StretchConfig } from '@revolist/revogrid-pro';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';

const { isDark } = currentThemeVue();
const { createRandomData } = useRandomData();

const columns = ref([
  { name: '🆔 ID', prop: 'id' },
  { name: '🍎 Fruit', prop: 'name' },
  { name: '💰 Price', prop: 'price' },
]);

const plugins = ref([CellMergePlugin, ColumnStretchPlugin]);

const rows = ref(createRandomData(100));

const additionalData = shallowRef<{stretch: StretchConfig, cellMerge: MergeData[]}>({
  stretch: 'all',
  cellMerge: [
        { row: 1, column: 0, rowSpan: 3, colSpan: 0, rowType: 'rgRow', colType: 'rgCol' },
        { row: 1, column: 1, rowSpan: 3, colSpan: 0, rowType: 'rgRow', colType: 'rgCol' },
        { row: 4, column: 2, rowSpan: 3, colSpan: 0, rowType: 'rgRow', colType: 'rgCol' },
      ],
});

const addCellMerge = () => {
  additionalData.value = {
    ...additionalData.value,

    cellMerge: [
      {
        row: 1,
        column: 1,
        rowSpan: 2,
        colSpan: 2,
        rowType: 'rgRow',
        colType: 'rgCol',
      },
    ],
  };
};
</script>

React

src/components/cell-merge/CellMerged.tsx

import { useState, useMemo } from 'react';
import { RevoGrid, type DataType } from '@revolist/react-datagrid';
import {
  CellMergePlugin,
  ColumnStretchPlugin,
} from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';
const { isDark } = currentTheme();
const { createRandomData } = useRandomData();

function CellMerged() {
  const [source] = useState<DataType[]>(createRandomData(100));
  const [additionalData, setAdditionalData] = useState<{
    cellMerge: any[];
    stretch: string;
  }>({
    cellMerge: [],
    stretch: 'all',
  });

  const columns = useMemo(
    () => [
      { name: '🆔 ID', prop: 'id' },
      { name: '🍎 Fruit', prop: 'name' },
      { name: '💰 Price', prop: 'price' },
    ],
    []
  );

  const handleMergeClick = () => {
    setAdditionalData((prev) => ({
      ...prev,
      cellMerge: [
        {
          row: 1,
          column: 1,
          rowSpan: 2,
          colSpan: 2,
          rowType: 'rgRow',
          colType: 'rgCol',
        },
      ],
    }));
  };

  return (
    <div>
      <button className="rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" onClick={handleMergeClick}>
        Merge Cells
      </button>
      <RevoGrid
        columns={columns}
        source={source}
        additionalData={additionalData}
        hide-attribution
        theme={isDark() ? 'darkCompact' : 'compact'}
        plugins={[CellMergePlugin, ColumnStretchPlugin]}
      />
    </div>
  );
}

export default CellMerged;

Angular

src/components/cell-merge/CellMergedAngular.ts

import {
  Component,
  ViewEncapsulation,
  type OnInit,
} from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { CellMergePlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';

@Component({
  selector: 'cell-merge-angular',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <button
      class="rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      (click)="mergeCells()">Merge Cells</button>
    <revo-grid
      [columns]="columns"
      [source]="source"
      [additionalData]="additionalData"
      [hideAttribution]="true"
      [theme]="theme"
      [plugins]="plugins"
      style="height: 400px;"
    ></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
})
export class CellMergeGridComponent implements OnInit {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  source = useRandomData().createRandomData(100);

  additionalData: any = {
    cellMerge: [], // Define merge data
    stretch: 'all',
  };

  columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name' },
    { name: '💰 Price', prop: 'price' },
  ];

  plugins = [CellMergePlugin, ColumnStretchPlugin];

  ngOnInit() {
    // Initial setup if necessary
  }

  mergeCells() {
    this.additionalData = { ...this.additionalData, cellMerge: [{
      row: 1,
      column: 1,
      rowSpan: 2,
      colSpan: 2,
      rowType: 'rgRow',
      colType: 'rgCol',
    }] };
  }
}

Why Use Cell Merge?

Cell Merge is a powerful tool that can help you:

• Create Merged Headers: Design headers that span across several columns or rows, making it easier to categorize and organize related data.
• Group Data Visually: Highlight or group related data by merging cells, which improves the readability and interpretability of your grid.

Example Use Cases

• Merged Headers: Combine cells to create a single header that covers multiple columns. This is ideal for providing overarching categories or labels for grouped columns.
• Data Grouping: Use cell merging to visually segment related data or to emphasize specific sections of your grid.

How It Works

The Cell Merge feature enables you to specify which cells should be merged into a larger cell. This larger cell will span across multiple columns and/or rows. The content of the merged cell will be centrally displayed, enhancing the layout of your grid.

Since this is a Pro feature, ensure that you have access to the Pro version of RevoGrid to utilize this functionality.