Search results

Cell Range in React Spreadsheet component

A group of cells in a sheet is known as cell range.

Wrap text

Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the allowWrap property to enable or disable the wrap text support in spreadsheet.

Wrap text can be applied or removed to a cell or range of cells in the following ways,

  • Using the wrap property in cell, you can enable or disable wrap text to a cell at initial load.
  • Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range.
  • Using the wrap method, you can apply or remove the wrap text once the component is loaded.

The following code example shows the wrap text functionality in spreadsheet.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';

export default class App extends React.Component<{}, {}> {
       public spreadsheet: SpreadsheetComponent;
       public oncreated(args): void{
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:H5');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:B5');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:D5');
        // To wrap the cells from E2 to E5 range
        this.spreadsheet.wrap('E2:E5');
        // To unwrap the H3 cell
        this.spreadsheet.wrap('H3', false);
    }
     render() {
        return  ( <div> <SpreadsheetComponent
                        ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} showFormulaBar={false} >
                        <SheetsDirective>
                            <SheetDirective name={"Movie List"}>
                             <RowsDirective>
                                 <RowDirective height={30}>
                                 </RowDirective>
                                 <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     </RowsDirective>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={100} index={1}></ColumnDirective>
                                    <ColumnDirective width={140}></ColumnDirective>
                                    <ColumnDirective width={90}></ColumnDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={120}></ColumnDirective>
                                    <ColumnDirective width={90}></ColumnDirective>
                                    <ColumnDirective width={180}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent> </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
 * Wrap text data source
 */
export let data: Object[] = [
  {
      'No': '1',
      'Released on': 1994,
      'Title': 'Forrest Gump',
      'Rating': '5 Stars',
      'Casts': 'Tom Hanks, Robin Wright, Gary Sinise',
      'Directed By': 'Robert Zemeckis',
      'Genre': 'Drama',
      'Comments': 'Based on the 1986 novel of the same name by Winston Groom'
  },
  {
      'No': '2',
      'Released on': 1946,
      'Title': 'It’s a Wonderful Life',
      'Rating': '2 Stars',
      'Casts': 'James Stewart, Donna Reed, Lionel Barrymore',
      'Directed By': 'Frank Capra',
      'Genre': 'Drama',
      'Comments': 'Colorized version'
  },
  {
      'No': '3',
      'Released on': 1988,
      'Title': 'Big',
      'Rating': '4 Stars',
      'Casts': 'Tom Hanks, Elizabeth Perkins, Robert Loggia',
      'Directed By': 'Penny Marshall',
      'Genre': 'Comedy',
      'Comments': 'A thirteen-year-old boy wishes to be big, and his wish comes true.'
  },
  {
      'No': '4',
      'Released on': 1954,
      'Title': 'Rear Window',
      'Rating': '4 Stars',
      'Casts': 'James Stewart, Grace Kelly, Wendell Corey',
      'Directed By': 'Alfred Hitchcock',
      'Genre': 'Suspense',
      'Comments': 'Truly suspenseful and masterfully crafted'
  }
];
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
    oncreated(args) {
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:H5');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:B5');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:D5');
        // To wrap the cells from E2 to E5 range
        this.spreadsheet.wrap('E2:E5');
        // To unwrap the H3 cell
        this.spreadsheet.wrap('H3', false);
    }
    render() {
        return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} showFormulaBar={false}>
                        <SheetsDirective>
                            <SheetDirective name={"Movie List"}>
                             <RowsDirective>
                                 <RowDirective height={30}>
                                 </RowDirective>
                                 <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     <RowDirective>
                                     <CellsDirective>
                                     <CellDirective index={7} wrap={true}></CellDirective>
                                     </CellsDirective>
                                     </RowDirective>
                                     </RowsDirective>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={100} index={1}></ColumnDirective>
                                    <ColumnDirective width={140}></ColumnDirective>
                                    <ColumnDirective width={90}></ColumnDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={120}></ColumnDirective>
                                    <ColumnDirective width={90}></ColumnDirective>
                                    <ColumnDirective width={180}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent> </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

Merge cells

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.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';

export default class App extends React.Component<{}, {}> {
       public spreadsheet: SpreadsheetComponent;
    public boldRight: CellStyleModel = { fontWeight: 'bold', textAlign: 'right' };
    public bold: CellStyleModel = { fontWeight: 'bold' };
     public updateCollection(): void {
        let cell = this.spreadsheet.getActiveSheet().activeCell;
        let cellIdx = getRangeIndexes(cell);
        let Element= this.spreadsheet.getCell(cellIdx[0], cellIdx[1]);
        if (!Element.classList.contains("customClass")) {
            Element.classList.add('customClass'); // To add the custom class in active cell element
            this.spreadsheet.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
        }
    }

    public oncreated(): void{
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:S1');
        this.spreadsheet.numberFormat('h:mm AM/PM', 'C1:S1');
        this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:S11');
        // Merging the `K4:M4` cells using method
        this.spreadsheet.merge('K4:M4');
        // Merging the 5th and 6th row cells across 11th, 12th and 13th column
        this.spreadsheet.merge('K5:M6', 'Vertically');
        // Merging the 18th and 19th column cells across 2nd, 3rd and 4th row
        this.spreadsheet.merge('N4:O6', 'Horizontally');
    }
     render() {
        return  ( <div>
             <SpreadsheetComponent
                        ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} 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>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
 * 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'
  }
];
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.boldRight = { fontWeight: 'bold', textAlign: 'right' };
        this.bold = { fontWeight: 'bold' };
    }
    updateCollection() {
        let cell = this.spreadsheet.getActiveSheet().activeCell;
        let cellIdx = getRangeIndexes(cell);
        let Element = this.spreadsheet.getCell(cellIdx[0], cellIdx[1]);
        if (!Element.classList.contains("customClass")) {
            Element.classList.add('customClass'); // To add the custom class in active cell element
            this.spreadsheet.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
        }
    }
    oncreated() {
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:S1');
        this.spreadsheet.numberFormat('h:mm AM/PM', 'C1:S1');
        this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:S11');
        // Merging the `K4:M4` cells using method
        this.spreadsheet.merge('K4:M4');
        // Merging the 5th and 6th row cells across 11th, 12th and 13th column
        this.spreadsheet.merge('K5:M6', 'Vertically');
        // Merging the 18th and 19th column cells across 2nd, 3rd and 4th row
        this.spreadsheet.merge('N4:O6', 'Horizontally');
    }
    render() {
        return (<div>
             <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} 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>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

See Also