Template in React Spreadsheet component
30 Mar 202324 minutes to read
Cell Template is used for adding HTML elements into Spreadsheet. You can add the cell template in spreadsheet by using the template property and specify the address using the address property inside the ranges property. You can customize the Html elements similar to Syncfusion components (TextBox, DropDownList, RadioButton, MultiSelect, DatePicker etc) by using the beforeCellRender event. In this demo, Cell template is applied to C2:C9 and instantiated with Html input components like TextBox, RadioButton, TextArea. You need to bind the events to perform any operations through HTML elements or Syncfusion components. Here, we have added change event in to the MultiSelect control, and we have updated the selected data into the spreadsheet cell through that change event.
The following sample describes the above behavior.
Sample link: Cell template
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 { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
const spreadsheetRef = React.useRef(null);
const scrollSettings = { isFinite: true };
const selectionSettings = { mode: 'None' };
const boldCenter = {
fontWeight: 'bold', textAlign: 'center', fontSize: '12pt', verticalAlign: 'middle',
textDecoration: 'underline'
};
const nameTextbox = () => {
return (<TextBoxComponent placeholder="Name"></TextBoxComponent>);
};
const dobTextbox = () => {
return (<TextBoxComponent placeholder="DOB"></TextBoxComponent>);
};
const genderRadioButton = () => {
return (<div>
<RadioButtonComponent name="gender" value="male" label="Male"></RadioButtonComponent>
<RadioButtonComponent name="gender" value="female" label="Female"></RadioButtonComponent>
</div>);
};
const dropDownList = () => {
let experience = ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
return (<DropDownListComponent placeholder="Experience" dataSource={experience}></DropDownListComponent>);
};
const multiSelect = () => {
let languages = ['JAVA', 'C#', 'SQL'];
return (<MultiSelectComponent placeholder="Areas of Interest" showClearButton={false} dataSource={languages}></MultiSelectComponent>);
};
const mobileNoTextbox = () => {
return (<TextBoxComponent placeholder="Mobile Number"></TextBoxComponent>);
};
const emailTextbox = () => {
return (<TextBoxComponent placeholder="Email"></TextBoxComponent>);
};
const textArea = () => {
return (<TextBoxComponent multiline={true}></TextBoxComponent>);
};
const button = () => {
return (<ButtonComponent content="Add" style={{ float: "right" }} cssClass="e-flat"></ButtonComponent>);
};
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
// Merges B1 and C1 cells
spreadsheet.merge('B1:C1');
}
}, []);
return (
<div className='control-pane'>
<div className='control-section spreadsheet-control'>
<SpreadsheetComponent ref={spreadsheetRef} showRibbon={false} showFormulaBar={false} allowOpen={false} allowSave={false} name={'Candidates List'} scrollSettings={scrollSettings} allowEditing={false} selectionSettings={selectionSettings}>
<SheetsDirective>
<SheetDirective name='Registration Form' rowCount={40} colCount={30} showGridLines={false}>
<RowsDirective>
<RowDirective height={55}>
<CellsDirective>
<CellDirective index={1} value='Interview Registration Form' style={boldCenter}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Name:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Date of Birth:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Gender:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Year of Experience:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Areas of Interest:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Mobile Number:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Email:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={82}>
<CellsDirective>
<CellDirective index={1} value='Address:'></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective index={1} width={190}></ColumnDirective>
<ColumnDirective width={350}></ColumnDirective>
</ColumnsDirective>
<RangesDirective>
<RangeDirective template={nameTextbox} address='C2'></RangeDirective>
<RangeDirective template={dobTextbox} address='C3'></RangeDirective>
<RangeDirective template={genderRadioButton} address='C4'></RangeDirective>
<RangeDirective template={dropDownList} address='C5'></RangeDirective>
<RangeDirective template={multiSelect} address='C6'></RangeDirective>
<RangeDirective template={mobileNoTextbox} address='C7'></RangeDirective>
<RangeDirective template={emailTextbox} address='C8'></RangeDirective>
<RangeDirective template={textArea} address='C9'></RangeDirective>
<RangeDirective template={button} address='C11'></RangeDirective>
</RangesDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
</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, ScrollSettingsModel, CellStyleModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective, SelectionSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const scrollSettings: ScrollSettingsModel = { isFinite: true };
const selectionSettings: SelectionSettingsModel = { mode: 'None' };
const boldCenter: CellStyleModel = {
fontWeight: 'bold', textAlign: 'center', fontSize: '12pt', verticalAlign: 'middle',
textDecoration: 'underline'
};
const nameTextbox = (): JSX.Element => {
return (<TextBoxComponent placeholder="Name"></TextBoxComponent>);
};
const dobTextbox = (): JSX.Element => {
return (<TextBoxComponent placeholder="DOB"></TextBoxComponent>);
};
const genderRadioButton = (): JSX.Element => {
return (<div>
<RadioButtonComponent name="gender" value="male" label="Male"></RadioButtonComponent>
<RadioButtonComponent name="gender" value="female" label="Female"></RadioButtonComponent>
</div>);
};
const dropDownList = (): JSX.Element => {
let experience = ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
return (<DropDownListComponent placeholder="Experience" dataSource={experience}></DropDownListComponent>);
};
const multiSelect = (): JSX.Element => {
let languages = ['JAVA', 'C#', 'SQL'];
return (<MultiSelectComponent placeholder="Areas of Interest" showClearButton={false} dataSource={languages}></MultiSelectComponent>);
};
const mobileNoTextbox = (): JSX.Element => {
return (<TextBoxComponent placeholder="Mobile Number"></TextBoxComponent>);
};
const emailTextbox = (): JSX.Element => {
return (<TextBoxComponent placeholder="Email"></TextBoxComponent>);
};
const textArea = (): JSX.Element => {
return (<TextBoxComponent multiline={true}></TextBoxComponent>);
};
const button = (): JSX.Element => {
return (<ButtonComponent content="Add" style={{ float: "right" }} cssClass="e-flat"></ButtonComponent>);
};
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
// Merges B1 and C1 cells
spreadsheet.merge('B1:C1');
}
}, []);
return (
<div className='control-pane'>
<div className='control-section spreadsheet-control'>
<SpreadsheetComponent ref={spreadsheetRef} showRibbon={false} showFormulaBar={false} allowOpen={false} allowSave={false} name={'Candidates List'} scrollSettings={scrollSettings} allowEditing={false} selectionSettings={selectionSettings}>
<SheetsDirective>
<SheetDirective name='Registration Form' rowCount={40} colCount={30} showGridLines={false}>
<RowsDirective>
<RowDirective height={55}>
<CellsDirective>
<CellDirective index={1} value='Interview Registration Form' style={boldCenter}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Name:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Date of Birth:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Gender:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Year of Experience:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Areas of Interest:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Mobile Number:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={45}>
<CellsDirective>
<CellDirective index={1} value='Email:'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={82}>
<CellsDirective>
<CellDirective index={1} value='Address:'></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective index={1} width={190}></ColumnDirective>
<ColumnDirective width={350}></ColumnDirective>
</ColumnsDirective>
<RangesDirective>
<RangeDirective template={nameTextbox} address='C2'></RangeDirective>
<RangeDirective template={dobTextbox} address='C3'></RangeDirective>
<RangeDirective template={genderRadioButton} address='C4'></RangeDirective>
<RangeDirective template={dropDownList} address='C5'></RangeDirective>
<RangeDirective template={multiSelect} address='C6'></RangeDirective>
<RangeDirective template={mobileNoTextbox} address='C7'></RangeDirective>
<RangeDirective template={emailTextbox} address='C8'></RangeDirective>
<RangeDirective template={textArea} address='C9'></RangeDirective>
<RangeDirective template={button} address='C11'></RangeDirective>
</RangesDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
</div>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);Note
You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.