Cell Styling and Text Formatting

3 Jul 202624 minutes to read

Text and cell formatting improves the appearance of your spreadsheet and helps highlight specific cells or ranges. You can apply formats such as font size, font family, font color, text alignment, borders, and more. Use the allowCellFormatting property to enable or disable text and cell formatting in the Spreadsheet.

You can set formats in the following ways:

  • Use the style property to apply formats to each cell during the initial load.
  • Use the cellFormat method to apply formats to a cell or range of cells dynamically.
  • Apply formatting directly by clicking the desired format option from the ribbon toolbar.

Fonts

The React Spreadsheet Editor provides comprehensive font formatting options to customize text appearance in cells. These options help improve readability and establish a clear visual hierarchy in your data.

The Spreadsheet supports the following font formatting options:

Format Description
fontFamily Specifies the typeface of the text (e.g., Arial, Calibri, Times New Roman, Verdana).
fontSize Specifies the size of the text in points (e.g., 10pt, 12pt, 14pt).
fontWeight Specifies the thickness of the text. Supports values such as normal, bold, and numeric weights (e.g., 100–900) to control the emphasis level of the text.
fontStyle Specifies the style of the text. Supports values such as normal, italic, and oblique to adjust the appearance and emphasis of the content.
textDecoration Specifies decorative styling applied to the text. Supports values such as underline, overline, and line-through (strikethrough) to highlight, cross out, or distinguish content within a cell.
color Specifies the color of the text.

Text Alignment

You can align text in cells using the following options:

Alignment Type Options Description
textAlign Left, Center, Right Aligns text horizontally from left to right within the cell.
verticalAlign Top, Middle, Bottom Aligns text from top to bottom within the cell.

Indents

Indentation helps enhance the visual appearance of text in cells by adding space before the text content. You can apply cell text indentation using the textIndent property.

Fill Color

Fill color (background color) is used to highlight cells or ranges of cells across the workbook. You can apply background colors to cells using the backgroundColor property.

The following code example shows the style formatting in text and cells of the spreadsheet.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
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';

function App() {
    const spreadsheetRef = React.useRef(null);
    const styles = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '1px solid #e0e0e0' };
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            // Setting common styles to table header cells
            spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
            // Setting common styles to whole table cells
            spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
            // Column wise styles setting
            spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
            // Setting text-indent to 2 and 4 column
            let style = { textAlign: 'left', textIndent: '8pt' };
            spreadsheet.cellFormat(style, 'B2:B12');
            spreadsheet.cellFormat(style, 'D2:D12');
            spreadsheet.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
            spreadsheet.cellFormat({ textAlign: 'center' }, 'E2:E12');
            // Applied border to range of cells using 'setBorder' method
            spreadsheet.setBorder({ borderLeft: '1px solid #e0e0e0', borderRight: '1px solid #e0e0e0' }, 'A2:E2');
            spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A4:E11', 'Horizontal');
            spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A3:E12', 'Outer');
            spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E3:E4');
            spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E9');
            spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E12');
            spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E5');
            spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E8');
            spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E11');
            spreadsheet.cellFormat({ color: '#62c9e8' }, 'E6');
            spreadsheet.cellFormat({ color: '#62c9e8' }, 'E10');
            spreadsheet.cellFormat({ color: '#ff5b5b' }, 'E7');
        }
    }, []);

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} showRibbon={false} showFormulaBar={false} showSheetTabs={false} allowEditing={false} allowDelete={false} allowInsert={false} >
                <SheetsDirective>
                    <SheetDirective selectedRange={"U15"} showGridLines={false}>
                        <RowsDirective>
                            <RowDirective height={40} customHeight={true}>
                                <CellsDirective>
                                    <CellDirective colSpan={5} value={'Order Summary'} style={styles}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                        </RowsDirective>
                        <RangesDirective>
                            <RangeDirective dataSource={data} startCell={'A2'}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={200}></ColumnDirective>
                            <ColumnDirective width={110}></ColumnDirective>
                            <ColumnDirective width={140}></ColumnDirective>
                            <ColumnDirective width={90}></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, CellDirective, CellsDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const styles: CellStyleModel = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '1px solid #e0e0e0' };
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            // Setting common styles to table header cells
            spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
            // Setting common styles to whole table cells
            spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
            // Column wise styles setting
            spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
            // Setting text-indent to 2 and 4 column
            let style: CellStyleModel = { textAlign: 'left', textIndent: '8pt' };
            spreadsheet.cellFormat(style, 'B2:B12');
            spreadsheet.cellFormat(style, 'D2:D12');
            spreadsheet.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
            spreadsheet.cellFormat({ textAlign: 'center' }, 'E2:E12');
            // Applied border to range of cells using 'setBorder' method
            spreadsheet.setBorder({ borderLeft: '1px solid #e0e0e0', borderRight: '1px solid #e0e0e0' }, 'A2:E2');
            spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A4:E11', 'Horizontal');
            spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A3:E12', 'Outer');
            spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E3:E4');
            spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E9');
            spreadsheet.cellFormat({ color: '#10c469', textDecoration: 'line-through' }, 'E12');
            spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E5');
            spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E8');
            spreadsheet.cellFormat({ color: '#FFC107', textDecoration: 'underline' }, 'E11');
            spreadsheet.cellFormat({ color: '#62c9e8' }, 'E6');
            spreadsheet.cellFormat({ color: '#62c9e8' }, 'E10');
            spreadsheet.cellFormat({ color: '#ff5b5b' }, 'E7');
        }
    }, []);

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} showRibbon={false} showFormulaBar={false} showSheetTabs={false} allowEditing={false} allowDelete={false} allowInsert={false} >
                <SheetsDirective>
                    <SheetDirective selectedRange={"U15"} showGridLines={false}>
                        <RowsDirective>
                            <RowDirective height={40} customHeight={true}>
                                <CellsDirective>
                                    <CellDirective colSpan={5} value={'Order Summary'} style={styles}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                        </RowsDirective>
                        <RangesDirective>
                            <RangeDirective dataSource={data} startCell={'A2'}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={200}></ColumnDirective>
                            <ColumnDirective width={110}></ColumnDirective>
                            <ColumnDirective width={140}></ColumnDirective>
                            <ColumnDirective width={90}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
 * Cell formatting data source
 */
export let data = [
    { 'Order Id': 'SF1001', 'Product': 'Laptop Backpack (Blue)', 'Ordered Date': '02/14/2014', 'Ordered By': 'Rahul Sharma', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1002', 'Product': 'Oppo F1 S mobile back cover', 'Ordered Date': '06/11/2014', 'Ordered By': 'Adi Pathak', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1003', 'Product': 'Tupperware 4 bottle set', 'Ordered Date': '07/27/2014', 'Ordered By': 'Himani Arora', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1004', 'Product': 'Tupperware Lunch box', 'Ordered Date': '11/21/2014', 'Ordered By': 'Samuel Samson', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1005', 'Product': 'Panosonic Hair Dryer', 'Ordered Date': '06/23/2014', 'Ordered By': 'Neha', 'Shipment': 'Cancelled' },
    { 'Order Id': 'SF1006', 'Product': 'Philips LED 2 bulb set', 'Ordered Date': '07/22/2014', 'Ordered By': 'Christine J', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1007', 'Product': 'Moto G4 plus headphone', 'Ordered Date': '02/04/2014', 'Ordered By': 'Shiv Nagar', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1008', 'Product': 'Lakme Eyeliner Pencil', 'Ordered Date': '11/30/2014', 'Ordered By': 'Cherry', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1009', 'Product': 'Listerine mouthwash', 'Ordered Date': '07/09/2014', 'Ordered By': 'Siddartha Mishra', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1010', 'Product': 'Protinex original', 'Ordered Date': '10/31/2014', 'Ordered By': 'Ravi Chugh', 'Shipment': 'Delivered' },
];
/**
 * Cell formatting data source
 */
export let data: Object[] = [
    { 'Order Id': 'SF1001', 'Product': 'Laptop Backpack (Blue)', 'Ordered Date': '02/14/2014', 'Ordered By': 'Rahul Sharma', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1002', 'Product': 'Oppo F1 S mobile back cover', 'Ordered Date': '06/11/2014', 'Ordered By': 'Adi Pathak', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1003', 'Product': 'Tupperware 4 bottle set', 'Ordered Date': '07/27/2014', 'Ordered By': 'Himani Arora', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1004', 'Product': 'Tupperware Lunch box', 'Ordered Date': '11/21/2014', 'Ordered By': 'Samuel Samson', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1005', 'Product': 'Panosonic Hair Dryer', 'Ordered Date': '06/23/2014', 'Ordered By': 'Neha', 'Shipment': 'Cancelled' },
    { 'Order Id': 'SF1006', 'Product': 'Philips LED 2 bulb set', 'Ordered Date': '07/22/2014', 'Ordered By': 'Christine J', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1007', 'Product': 'Moto G4 plus headphone', 'Ordered Date': '02/04/2014', 'Ordered By': 'Shiv Nagar', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1008', 'Product': 'Lakme Eyeliner Pencil', 'Ordered Date': '11/30/2014', 'Ordered By': 'Cherry', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1009', 'Product': 'Listerine mouthwash', 'Ordered Date': '07/09/2014', 'Ordered By': 'Siddartha Mishra', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1010', 'Product': 'Protinex original', 'Ordered Date': '10/31/2014', 'Ordered By': 'Ravi Chugh', 'Shipment': 'Delivered' },
];

Borders

The React Spreadsheet Editor allows you to apply borders to a cell or a range of cells. Borders help you separate sections, highlight data, or format tables clearly in your worksheet. You can apply borders in different styles, sizes, and colors based on your needs.

Border Types

The Spreadsheet supports many types of borders. Each type adds a border to a specific side or area of the selected cells:

Types Actions
Top Border Specifies the top border of a cell or range of cells.
Left Border Specifies the left border of a cell or range of cells.
Right Border Specifies the right border of a cell or range of cells.
Bottom Border Specifies the bottom border of a cell or range of cells.
No Border Used to clear the border from a cell or range of cells.
All Border Specifies all border of a cell or range of cells.
Horizontal Border Specifies the top and bottom border of a cell or range of cells.
Vertical Border Specifies the left and right border of a cell or range of cells.
Outside Border Specifies the outside border of a range of cells.
Inside Border Specifies the inside border of a range of cells.

Customize Border Colors and Styles

You can also change how the border looks by adjusting its size and style. The Spreadsheet supports the following options:

Types Actions
Thin Specifies the 1px border size (default).
Medium Specifies the 2px border size.
Thick Specifies the 3px border size.
Solid Used to create the solid border (default).
Dashed Used to create the dashed border.
Dotted Used to create the dotted border.
Double Used to create the double border.

Borders can be applied in the following ways,

  • Using the border, borderLeft, borderRight, borderBottom properties, you can set the desired border to each cell at initial load. The border property is part of CellStyleModel and is applied via the cell’s style object.
  • Using the setBorder method, you can set various border options to a cell or range of cells.
  • Selecting the border options from the ribbon toolbar.

The following code sample shows how to apply different typed border, colors and styles in the Spreadsheet.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App() {
    const spreadsheetRef = React.useRef(null);
    const headerStyle = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '2px solid #e0e0e0' };

    const onCreated = () => {
        const spreadsheet = spreadsheetRef.current;
        if (!spreadsheet) return;
        // Apply various borders programmatically to demonstrate types
        // Top border for first column header cells
        spreadsheet.setBorder({ border: '2px dashed #0078d4' }, 'A1', 'Top');
        // Left and Right borders for header row
        spreadsheet.setBorder({ border: '1px solid #333' }, 'A3:D12');
        spreadsheet.setBorder({ borderRight: '1px dotted #d14' }, 'E3:E12');
        // Horizontal borders on a block
        spreadsheet.setBorder({ border: '1px solid #040404' }, 'A5:E12', 'Horizontal');
        // Vertical borders on a block
        spreadsheet.setBorder({ border: '1px solid #888' }, 'B3:B12', 'Vertical');
        // Outside border for a range
        spreadsheet.setBorder({ border: '2px solid #000' }, 'B3:B12', 'Outer');
        // Inside borders for a range
        spreadsheet.setBorder({ border: '1px dotted #6a1b9a' }, 'E4:E12', 'Inside');
    };

    // Define sheet model with per-cell border styles
    const sheets = [
        {
            showGridLines: true,
            rows: [
                { height: 40, cells: [{ colSpan: 5, value: 'Order Summary', style: headerStyle }] },
                {
                    index: 1,
                    cells: [
                        { index: 0, style: { borderLeft: '1px double #0a0', borderBottom: '1px double #0a0' } },
                        { index: 1, style: { borderBottom: '1px double #0a0' } },
                        { index: 2, style: { borderBottom: '1px double #0a0' } },
                        { index: 3, style: { borderBottom: '1px double #0a0' } },
                        { index: 4, style: { borderBottom: '1px double #0a0', borderRight: '1px double #0a0' } }
                    ]
                }
            ],
            ranges: [
                { dataSource: data, startCell: 'A2' }
            ],
            columns: [
                { width: 100 },
                { width: 200 },
                { width: 110 },
                { width: 140 },
                { width: 90 }
            ]
        }
    ];

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} sheets={sheets} showFormulaBar={false} created={onCreated} >
            </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 } from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App(): React.ReactElement {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const headerStyle: CellStyleModel = { fontFamily: 'Axettac Demo', verticalAlign: 'middle', textAlign: 'center', fontSize: '18pt', fontWeight: 'bold', color: '#279377', border: '2px solid #e0e0e0' };

    const onCreated = (): void => {
        const spreadsheet = spreadsheetRef.current;
        if (!spreadsheet) return;
        // Apply various borders programmatically to demonstrate types
        // Top border for first column header cells
        spreadsheet.setBorder({ border: '2px dashed #0078d4' }, 'A1', 'Top');
        // Left and Right borders for header row
        spreadsheet.setBorder({ border: '1px solid #333' }, 'A3:D12');
        spreadsheet.setBorder({ borderRight: '1px dotted #d14' }, 'E3:E12');
        // Horizontal borders on a block
        spreadsheet.setBorder({ border: '1px solid #040404' }, 'A5:E12', 'Horizontal');
        // Vertical borders on a block
        spreadsheet.setBorder({ border: '1px solid #888' }, 'B3:B12', 'Vertical');
        // Outside border for a range
        spreadsheet.setBorder({ border: '2px solid #000' }, 'B3:B12', 'Outer');
        // Inside borders for a range
        spreadsheet.setBorder({ border: '1px dotted #6a1b9a' }, 'E4:E12', 'Inside');
    };

    // Define sheet model with per-cell border styles
    const sheets = [
        {
            showGridLines: true,
            rows: [
                { height: 40, cells: [{ colSpan: 5, value: 'Order Summary', style: headerStyle }] },
                {
                    index: 1,
                    cells: [
                        { index: 0, style: { borderLeft: '1px double #0a0', borderBottom: '1px double #0a0' } },
                        { index: 1, style: { borderBottom: '1px double #0a0' } },
                        { index: 2, style: { borderBottom: '1px double #0a0' } },
                        { index: 3, style: { borderBottom: '1px double #0a0' } },
                        { index: 4, style: { borderBottom: '1px double #0a0', borderRight: '1px double #0a0' } }
                    ]
                }
            ],
            ranges: [
                { dataSource: data, startCell: 'A2' }
            ],
            columns: [
                { width: 100 },
                { width: 200 },
                { width: 110 },
                { width: 140 },
                { width: 90 }
            ]
        }
    ];

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} sheets={sheets} showFormulaBar={false} created={onCreated} >
            </SpreadsheetComponent>
        </div>
    );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
 * Cell formatting data source
 */
export let data = [
    { 'Order Id': 'SF1001', 'Product': 'Laptop Backpack (Blue)', 'Ordered Date': '02/14/2014', 'Ordered By': 'Rahul Sharma', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1002', 'Product': 'Oppo F1 S mobile back cover', 'Ordered Date': '06/11/2014', 'Ordered By': 'Adi Pathak', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1003', 'Product': 'Tupperware 4 bottle set', 'Ordered Date': '07/27/2014', 'Ordered By': 'Himani Arora', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1004', 'Product': 'Tupperware Lunch box', 'Ordered Date': '11/21/2014', 'Ordered By': 'Samuel Samson', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1005', 'Product': 'Panosonic Hair Dryer', 'Ordered Date': '06/23/2014', 'Ordered By': 'Neha', 'Shipment': 'Cancelled' },
    { 'Order Id': 'SF1006', 'Product': 'Philips LED 2 bulb set', 'Ordered Date': '07/22/2014', 'Ordered By': 'Christine J', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1007', 'Product': 'Moto G4 plus headphone', 'Ordered Date': '02/04/2014', 'Ordered By': 'Shiv Nagar', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1008', 'Product': 'Lakme Eyeliner Pencil', 'Ordered Date': '11/30/2014', 'Ordered By': 'Cherry', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1009', 'Product': 'Listerine mouthwash', 'Ordered Date': '07/09/2014', 'Ordered By': 'Siddartha Mishra', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1010', 'Product': 'Protinex original', 'Ordered Date': '10/31/2014', 'Ordered By': 'Ravi Chugh', 'Shipment': 'Delivered' },
];
/**
 * Cell formatting data source
 */
export let data: Object[] = [
    { 'Order Id': 'SF1001', 'Product': 'Laptop Backpack (Blue)', 'Ordered Date': '02/14/2014', 'Ordered By': 'Rahul Sharma', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1002', 'Product': 'Oppo F1 S mobile back cover', 'Ordered Date': '06/11/2014', 'Ordered By': 'Adi Pathak', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1003', 'Product': 'Tupperware 4 bottle set', 'Ordered Date': '07/27/2014', 'Ordered By': 'Himani Arora', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1004', 'Product': 'Tupperware Lunch box', 'Ordered Date': '11/21/2014', 'Ordered By': 'Samuel Samson', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1005', 'Product': 'Panosonic Hair Dryer', 'Ordered Date': '06/23/2014', 'Ordered By': 'Neha', 'Shipment': 'Cancelled' },
    { 'Order Id': 'SF1006', 'Product': 'Philips LED 2 bulb set', 'Ordered Date': '07/22/2014', 'Ordered By': 'Christine J', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1007', 'Product': 'Moto G4 plus headphone', 'Ordered Date': '02/04/2014', 'Ordered By': 'Shiv Nagar', 'Shipment': 'Delivered' },
    { 'Order Id': 'SF1008', 'Product': 'Lakme Eyeliner Pencil', 'Ordered Date': '11/30/2014', 'Ordered By': 'Cherry', 'Shipment': 'Shipped' },
    { 'Order Id': 'SF1009', 'Product': 'Listerine mouthwash', 'Ordered Date': '07/09/2014', 'Ordered By': 'Siddartha Mishra', 'Shipment': 'Pending' },
    { 'Order Id': 'SF1010', 'Product': 'Protinex original', 'Ordered Date': '10/31/2014', 'Ordered By': 'Ravi Chugh', 'Shipment': 'Delivered' },
];

Limitations of Formatting

The following features are not supported in Formatting:

  • Insert row/column between the formatting applied cells.
  • Formatting support for row/column.

Note

You can refer to our React Spreadsheet Editor feature tour page for feature highlights. You can also explore our React Spreadsheet example to learn how to present and manipulate data.

See Also