Delete in React Spreadsheet
10 Jul 202623 minutes to read
Delete support provides an option for deleting the rows and columns in the spreadsheet. Use allowDelete property to enable or disable the delete option in Spreadsheet.
The rows and columns can be deleted dynamically in the following ways,
- Using
deletemethod, you can delete the loaded rows and columns. - Using context menu, you can delete the selected rows and columns.
The following code example shows the delete operation of rows and columns in the spreadsheet.
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 { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
const onCreated = () => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// deleting the rows from 8th to 10th index. To delete row, the third argument of enum type is passed as 'Row', the last argument specifies the sheet name or index in which the delete operation will perform. By default,active sheet will be considered. It is applicable only for model type Row and Column.
spreadsheet.delete(8, 10, 'Row', 0); // startIndex, endIndex, Row, sheet index
// deleting the 2nd and 5th indexed columns
spreadsheet.delete(2, 2, 'Column', 'Sheet2');
spreadsheet.delete(5, 5, 'Column');
spreadsheet.delete(0, 0, "Sheet"); // delete the first sheet. sheet index starts from 0
// Applies style formatting after deleted the rows and columns
spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A8');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:G8');
}
};
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} created={onCreated} showRibbon={false} showFormulaBar={false} allowDelete={true} >
<SheetsDirective>
<SheetDirective name={"Sheet1"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Sheet2"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></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 } 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);
const onCreated = (): void => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// deleting the rows from 8th to 10th index. To delete row, the third argument of enum type is passed as 'Row', the last argument specifies the sheet name or index in which the delete operation will perform. By default,active sheet will be considered. It is applicable only for model type Row and Column.
spreadsheet.delete(8, 10, 'Row', 0); // startIndex, endIndex, Row, sheet index
// deleting the 2nd and 5th indexed columns
spreadsheet.delete(2, 2, 'Column', 'Sheet2');
spreadsheet.delete(5, 5, 'Column');
spreadsheet.delete(0, 0, "Sheet"); // delete the first sheet. sheet index starts from 0
// Applies style formatting after deleted the rows and columns
spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A8');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:G8');
}
};
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} created={onCreated} showRibbon={false} showFormulaBar={false} allowDelete={true} >
<SheetsDirective>
<SheetDirective name={"Sheet1"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Sheet2"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Delete row column data source
*/
export let data = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': true
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': true
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': false
},
{
'Product Id': 8, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
},
{
'Product Id': 9, 'Product Name': 'Northwoods Cranberry Sauce', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 12 oz jars', 'Unit Price': 40.00, 'Units In Stock': 6, 'Discontinued': false
},
{
'Product Id': 10, 'Product Name': 'Mishi Kobe Niku', 'Supplier Id': 4, 'Quantity Per Unit': '18 - 500 g pkgs.', 'Unit Price': 97.00, 'Units In Stock': 29, 'Discontinued': true
}
];/**
* Delete row column data source
*/
export let data: Object[] = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': true
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': true
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': false
},
{
'Product Id': 8, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
},
{
'Product Id': 9, 'Product Name': 'Northwoods Cranberry Sauce', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 12 oz jars', 'Unit Price': 40.00, 'Units In Stock': 6, 'Discontinued': false
},
{
'Product Id': 10, 'Product Name': 'Mishi Kobe Niku', 'Supplier Id': 4, 'Quantity Per Unit': '18 - 500 g pkgs.', 'Unit Price': 97.00, 'Units In Stock': 29, 'Discontinued': true
}];Limitations of delete
The following features have some limitations in Insert/Delete:
- Delete row/column between the filter applied cells.