Wrap text in React Spreadsheet
22 Jul 202624 minutes to read
Wrap text allows you to display large content as multiple lines in a single cell. By default, wrap text support is enabled in the Spreadsheet. Use the allowWrap property to enable or disable wrap text support.
You can apply or remove wrap text to a cell or range of cells in any of the following ways:
- Using the
wrapproperty in acell, you can enable or disable wrap text to a cell at initial load. - Select or deselect the Wrap Text button from the ribbon Home tab to apply or remove wrap text for the selected range.
- Using the
wrapmethod, you can apply or remove the wrap text once the component is loaded.
The following code example shows the wrap text functionality in 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);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:H5');
spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:B5');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:D5');
// To wrap the cells from E2 to E5 range
spreadsheet.wrap('E2:E5');
// To unwrap the H3 cell
spreadsheet.wrap('H3', false);
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} 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>
);
};
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 { 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:H1');
spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:H5');
spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:B5');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:D5');
// To wrap the cells from E2 to E5 range
spreadsheet.wrap('E2:E5');
// To unwrap the H3 cell
spreadsheet.wrap('H3', false);
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} 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>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Wrap text data source
*/
export let data = [
{
'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'
}
];/**
* 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'
}
];Limitations
The following features have some limitations when using wrap text:
- Sorting with wrap text applied data.
- Merge with wrap text