Merge cells in React Spreadsheet

27 May 202624 minutes to read
Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use allowMerge property to enable or disable the merge cells option in spreadsheet.
You can merge the range of cells in the following ways,
Set the rowSpan and colSpan property in cell to merge the number of cells at initial load.
Select the range of cells and apply merge by selecting the desired option from ribbon toolbar.
Use merge method to merge the range of cells, once the component is loaded.
The available merge options in spreadsheet are,
Type	Action
Merge All	Combines all the cells in a range in to a single cell (default).
Merge Horizontally	Combines cells in a range as row-wise.
Merge Vertically	Combines cells in a range as column-wise.
UnMerge	Splits the merged cells into multiple cells.
The following code example shows the merge cells operation in spreadsheet.
app.jsx
app.tsx
datasource.jsx
datasource.tsx
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App() {
    const spreadsheetRef = React.useRef(null);
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:S1');
            spreadsheet.numberFormat('h:mm AM/PM', 'C1:S1');
            spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:S11');
            // Merging the `K4:M4` cells using method
            spreadsheet.merge('K4:M4');
            // Merging the 5th and 6th row cells across 11th, 12th and 13th column
            spreadsheet.merge('K5:M6', 'Vertically');
            // Merging the 18th and 19th column cells across 2nd, 3rd and 4th row
            spreadsheet.merge('N4:O6', 'Horizontally');
        }
    }, []);

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} showFormulaBar={false}>
                <SheetsDirective>
                    <SheetDirective name={"Merge Cells"}>
                        <RowsDirective>
                            <RowDirective height={35}></RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={1} rowSpan={2}></CellDirective>
                                    <CellDirective colSpan={2}></CellDirective>
                                    <CellDirective index={6} colSpan={3}></CellDirective>
                                    <CellDirective index={10} rowSpan={2} colSpan={3}></CellDirective>
                                    <CellDirective index={13} colSpan={2}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={3} colSpan={3}></CellDirective>
                                    <CellDirective index={6} colSpan={4}></CellDirective>
                                    <CellDirective index={13} colSpan={3}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={2} colSpan={3}></CellDirective>
                                    <CellDirective index={5} colSpan={2}></CellDirective>
                                    <CellDirective index={7} colSpan={3}></CellDirective>
                                    <CellDirective index={15} colSpan={2}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={2} colSpan={3}></CellDirective>
                                    <CellDirective index={6} colSpan={4}></CellDirective>
                                    <CellDirective index={16} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={2} colSpan={4}></CellDirective>
                                    <CellDirective index={7} colSpan={3}></CellDirective>
                                    <CellDirective index={15} colSpan={2}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                        </RowsDirective>
                        <RangesDirective>
                            <RangeDirective dataSource={data}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={90}></ColumnDirective>
                            <ColumnDirective width={150}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:S1');
            spreadsheet.numberFormat('h:mm AM/PM', 'C1:S1');
            spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:S11');
            // Merging the `K4:M4` cells using method
            spreadsheet.merge('K4:M4');
            // Merging the 5th and 6th row cells across 11th, 12th and 13th column
            spreadsheet.merge('K5:M6', 'Vertically');
            // Merging the 18th and 19th column cells across 2nd, 3rd and 4th row
            spreadsheet.merge('N4:O6', 'Horizontally');
        }
    }, []);

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} showFormulaBar={false}>
                <SheetsDirective>
                    <SheetDirective name={"Merge Cells"}>
                        <RowsDirective>
                            <RowDirective height={35}></RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={1} rowSpan={2}></CellDirective>
                                    <CellDirective colSpan={2}></CellDirective>
                                    <CellDirective index={6} colSpan={3}></CellDirective>
                                    <CellDirective index={10} rowSpan={2} colSpan={3}></CellDirective>
                                    <CellDirective index={13} colSpan={2}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={3} colSpan={3}></CellDirective>
                                    <CellDirective index={6} colSpan={4}></CellDirective>
                                    <CellDirective index={13} colSpan={3}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={2} colSpan={3}></CellDirective>
                                    <CellDirective index={5} colSpan={2}></CellDirective>
                                    <CellDirective index={7} colSpan={3}></CellDirective>
                                    <CellDirective index={15} colSpan={2}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={2} colSpan={3}></CellDirective>
                                    <CellDirective index={6} colSpan={4}></CellDirective>
                                    <CellDirective index={16} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective height={35}>
                                <CellsDirective>
                                    <CellDirective index={2} colSpan={4}></CellDirective>
                                    <CellDirective index={7} colSpan={3}></CellDirective>
                                    <CellDirective index={15} colSpan={2}></CellDirective>
                                    <CellDirective index={17} colSpan={2}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                        </RowsDirective>
                        <RangesDirective>
                            <RangeDirective dataSource={data}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={90}></ColumnDirective>
                            <ColumnDirective width={150}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={120}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
 * Merge cells data source
 */
export let data = [
    {
        'Employee ID': 10001,
        'Employee Name': 'Davolio',
        '9:00 AM': 'Analysis Tasks',
        '9:30 AM': 'Analysis Tasks',
        '10:00 AM': 'Team Meeting',
        '10:30 AM': 'Testing',
        '11:00 AM': 'Development',
        '11:30 AM': 'Development',
        '12:00 PM': 'Development',
        '12:30 PM': 'Support',
        '1:00 PM': 'Lunch Break',
        '1:30 PM': 'Lunch Break',
        '2:00 PM': 'Lunch Break',
        '2:30 PM': 'Testing',
        '3:00 PM': 'Testing',
        '3:30 PM': 'Development',
        '4:00 PM': 'Conference',
        '4:30 PM': 'Team Meeting',
        '5:00 PM': 'Team Meeting'
    },
    {
        'Employee ID': 10002,
        'Employee Name': 'Buchanan',
        '9:00 AM': 'Task Assign',
        '9:30 AM': 'Support',
        '10:00 AM': 'Support',
        '10:30 AM': 'Support',
        '11:00 AM': 'Testing',
        '11:30 AM': 'Testing',
        '12:00 PM': 'Testing',
        '12:30 PM': 'Testing',
        '1:00 PM': 'Lunch Break',
        '1:30 PM': 'Lunch Break',
        '2:00 PM': 'Lunch Break',
        '2:30 PM': 'Development',
        '3:00 PM': 'Development',
        '3:30 PM': 'Check Mail',
        '4:00 PM': 'Check Mail',
        '4:30 PM': 'Team Meeting',
        '5:00 PM': 'Team Meeting'
    },
    {
        'Employee ID': 10003,
        'Employee Name': 'Fuller',
        '9:00 AM': 'Check Mail',
        '9:30 AM': 'Check Mail',
        '10:00 AM': 'Check Mail',
        '10:30 AM': 'Analysis Tasks',
        '11:00 AM': 'Analysis Tasks',
        '11:30 AM': 'Support',
        '12:00 PM': 'Support',
        '12:30 PM': 'Support',
        '1:00 PM': 'Lunch Break',
        '1:30 PM': 'Lunch Break',
        '2:00 PM': 'Lunch Break',
        '2:30 PM': 'Development',
        '3:00 PM': 'Development',
        '3:30 PM': 'Team Meeting',
        '4:00 PM': 'Team Meeting',
        '4:30 PM': 'Development',
        '5:00 PM': 'Development'
    },
    {
        'Employee ID': 10004,
        'Employee Name': 'Leverling',
        '9:00 AM': 'Testing',
        '9:30 AM': 'Check Mail',
        '10:00 AM': 'Check Mail',
        '10:30 AM': 'Support',
        '11:00 AM': 'Testing',
        '11:30 AM': 'Testing',
        '12:00 PM': 'Testing',
        '12:30 PM': 'Testing',
        '1:00 PM': 'Lunch Break',
        '1:30 PM': 'Lunch Break',
        '2:00 PM': 'Lunch Break',
        '2:30 PM': 'Development',
        '3:00 PM': 'Development',
        '3:30 PM': 'Check Mail',
        '4:00 PM': 'Conference',
        '4:30 PM': 'Conference',
        '5:00 PM': 'Team Meeting'
    },
    {
        'Employee ID': 10005,
        'Employee Name': 'Peacock',
        '9:00 AM': 'Task Assign',
        '9:30 AM': 'Task Assign',
        '10:00 AM': 'Task Assign',
        '10:30 AM': 'Task Assign',
        '11:00 AM': 'Check Mail',
        '11:30 AM': 'Support',
        '12:00 PM': 'Support',
        '12:30 PM': 'Support',
        '1:00 PM': 'Lunch Break',
        '1:30 PM': 'Lunch Break',
        '2:00 PM': 'Lunch Break',
        '2:30 PM': 'Development',
        '3:00 PM': 'Development',
        '3:30 PM': 'Team Meeting',
        '4:00 PM': 'Team Meeting',
        '4:30 PM': 'Testing',
        '5:00 PM': 'Testing'
    }
];
/**
 * Merge cells data source
 */
export let data: Object[] = [
  {
      'Employee ID': 10001,
      'Employee Name': 'Davolio',
      '9:00 AM': 'Analysis Tasks',
      '9:30 AM': 'Analysis Tasks',
      '10:00 AM': 'Team Meeting',
      '10:30 AM': 'Testing',
      '11:00 AM': 'Development',
      '11:30 AM': 'Development',
      '12:00 PM': 'Development',
      '12:30 PM': 'Support',
      '1:00 PM': 'Lunch Break',
      '1:30 PM': 'Lunch Break',
      '2:00 PM': 'Lunch Break',
      '2:30 PM': 'Testing',
      '3:00 PM': 'Testing',
      '3:30 PM': 'Development',
      '4:00 PM': 'Conference',
      '4:30 PM': 'Team Meeting',
      '5:00 PM': 'Team Meeting'
  },
  {
      'Employee ID': 10002,
      'Employee Name': 'Buchanan',
      '9:00 AM': 'Task Assign',
      '9:30 AM': 'Support',
      '10:00 AM': 'Support',
      '10:30 AM': 'Support',
      '11:00 AM': 'Testing',
      '11:30 AM': 'Testing',
      '12:00 PM': 'Testing',
      '12:30 PM': 'Testing',
      '1:00 PM': 'Lunch Break',
      '1:30 PM': 'Lunch Break',
      '2:00 PM': 'Lunch Break',
      '2:30 PM': 'Development',
      '3:00 PM': 'Development',
      '3:30 PM': 'Check Mail',
      '4:00 PM': 'Check Mail',
      '4:30 PM': 'Team Meeting',
      '5:00 PM': 'Team Meeting'
  },
  {
      'Employee ID': 10003,
      'Employee Name': 'Fuller',
      '9:00 AM': 'Check Mail',
      '9:30 AM': 'Check Mail',
      '10:00 AM': 'Check Mail',
      '10:30 AM': 'Analysis Tasks',
      '11:00 AM': 'Analysis Tasks',
      '11:30 AM': 'Support',
      '12:00 PM': 'Support',
      '12:30 PM': 'Support',
      '1:00 PM': 'Lunch Break',
      '1:30 PM': 'Lunch Break',
      '2:00 PM': 'Lunch Break',
      '2:30 PM': 'Development',
      '3:00 PM': 'Development',
      '3:30 PM': 'Team Meeting',
      '4:00 PM': 'Team Meeting',
      '4:30 PM': 'Development',
      '5:00 PM': 'Development'
  },
  {
      'Employee ID': 10004,
      'Employee Name': 'Leverling',
      '9:00 AM': 'Testing',
      '9:30 AM': 'Check Mail',
      '10:00 AM': 'Check Mail',
      '10:30 AM': 'Support',
      '11:00 AM': 'Testing',
      '11:30 AM': 'Testing',
      '12:00 PM': 'Testing',
      '12:30 PM': 'Testing',
      '1:00 PM': 'Lunch Break',
      '1:30 PM': 'Lunch Break',
      '2:00 PM': 'Lunch Break',
      '2:30 PM': 'Development',
      '3:00 PM': 'Development',
      '3:30 PM': 'Check Mail',
      '4:00 PM': 'Conference',
      '4:30 PM': 'Conference',
      '5:00 PM': 'Team Meeting'
  },
  {
      'Employee ID': 10005,
      'Employee Name': 'Peacock',
      '9:00 AM': 'Task Assign',
      '9:30 AM': 'Task Assign',
      '10:00 AM': 'Task Assign',
      '10:30 AM': 'Task Assign',
      '11:00 AM': 'Check Mail',
      '11:30 AM': 'Support',
      '12:00 PM': 'Support',
      '12:30 PM': 'Support',
      '1:00 PM': 'Lunch Break',
      '1:30 PM': 'Lunch Break',
      '2:00 PM': 'Lunch Break',
      '2:30 PM': 'Development',
      '3:00 PM': 'Development',
      '3:30 PM': 'Team Meeting',
      '4:00 PM': 'Team Meeting',
      '4:30 PM': 'Testing',
      '5:00 PM': 'Testing'
  }
];
Limitations

The following features have some limitations when using merged cells:
Merge with filter.
Merge with wrap text.
Merge with border style.
Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Merge cells in React Spreadsheet

Limitations
