Selection in React Spreadsheet component
14 Apr 202324 minutes to read
Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. To enable selection, set mode
as Single
/ Multiple
in selectionSettings
. If you set mode
to None
, it disables the UI selection.
- The default value for
mode
inselectionSettings
isMultiple
.
You have the following options in Selection,
- Cell selection
- Row selection
- Column selection
Cell selection
Cell selection is used to select a single or multiple cells. It can be performed using the selectRange
method.
User Interface:
- Click on a cell to select it (or) use the
arrow
keys to navigate to it and select it. - To select a range, select a cell, then use the left mouse button to select and drag over to other cells (or) use the
Shift + arrow
keys to select the range. - To select non-adjacent cells and cell ranges, hold
Ctrl
and select the cells.
You can quickly locate and select specific cells or ranges by entering their names or cell references in the Name box, which is located to the left of the formula bar, and also select named or unnamed cells or ranges by using the Go To (Ctrl+G
) command.
Row selection
Row selection is used to select a single or multiple rows.
User Interface:
You can perform row selection in any of the following ways,
- By clicking the row header.
- To select multiple rows, select a row header with the left mouse button and drag over to other row headers (or) use the
Shift + arrow
keys to select multiple rows. - To select non-adjacent rows, hold
Ctrl
and select the row header. - You can also use the
selectRange
method for row selection.
The following sample shows the row selection in the spreadsheet, here selecting the 5th row using the selectRange
method.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, getRangeAddress } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
let colCount = spreadsheet.getActiveSheet().colCount;
spreadsheet.selectRange(getRangeAddress([4, 0, 4, colCount]));
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} selectionSettings={{ mode: 'Multiple' }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></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, getRangeAddress } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
let colCount: number = spreadsheet.getActiveSheet().colCount as number;
spreadsheet.selectRange(getRangeAddress([4, 0, 4, colCount]));
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} selectionSettings={{ mode: 'Multiple' }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
* Default data source
*/
export let budgetData = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
}, {
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
}, {
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
}, {
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
/**
* Default data source
*/
export let budgetData: Object[] = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},{
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},{
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
},{
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
Column selection
Column selection is used to select a single or multiple columns.
User Interface:
You can perform column selection in any of the following ways,
- By clicking the column header.
- To select multiple columns, select a column header with the left mouse button and drag over to other column headers (or) use the
Shift + arrow
keys to select the multiple columns. - To select non-adjacent columns, hold
Ctrl
and select the column header. - You can also use the
selectRange
method for row selection.
The following sample shows the column selection in the spreadsheet, here selecting the 3rd column using the selectRange
method.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, getRangeAddress } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
let rowCount = spreadsheet.getActiveSheet().rowCount;
spreadsheet.selectRange(getRangeAddress([0, 2, rowCount, 2]));
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} selectionSettings={{ mode: 'Multiple' }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></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, getRangeAddress } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
let rowCount: number = spreadsheet.getActiveSheet().rowCount as number;
spreadsheet.selectRange(getRangeAddress([0, 2, rowCount, 2]));
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} selectionSettings={{ mode: 'Multiple' }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
* Default data source
*/
export let budgetData = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
}, {
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
}, {
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
}, {
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
/**
* Default data source
*/
export let budgetData: Object[] = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},{
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},{
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
},{
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
How to remove selection in the spreadsheet
The following sample shows, how to remove the selection in the spreadsheet. Here changing the mode
as None
in selectionSettings
to disable’s the UI selection.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
}
}, []);
const onEdit = (args) => {
args.cancel = true;
};
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} cellEdit={onEdit} selectionSettings={{ mode: 'None' }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></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, CellEditEventArgs } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:D1');
}
}, []);
const onEdit = (args: CellEditEventArgs): void => {
args.cancel = true;
};
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} cellEdit={onEdit} selectionSettings={{ mode: 'None' }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
* Default data source
*/
export let budgetData = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
}, {
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
}, {
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
}, {
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
/**
* Default data source
*/
export let budgetData: Object[] = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},{
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},{
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
},{
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
Limitations
- We have a limitation while performing the Select All(
ctrl + A
). You can do this only by clicking the Select All button at the top left corner.
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.