How to prevent users from entering duplicate values on the same row in a React Spreadsheet?

This article explains how to restrict users from entering duplicate values in the same row in a React Spreadsheet. Get the active sheet and the used range of the spreadsheet during the actionBegin event. Iterate through the rows that are being edited to check if the currently edited value is already present in the row’s cells using the getCell method. Use the closeEdit method to cancel the current edit action.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
 SpreadsheetComponent,
 SheetsDirective,
 SheetDirective,
 ColumnsDirective,
 RangesDirective,
 RangeDirective,
 ColumnDirective,
 getCellIndexes,
 getCell,
} from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';

function App() {
 let spreadsheet;
 const onCreated = () => {
   spreadsheet.cellFormat(
     { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
     'A1:F1'
   );
 };
 const actionBegin = (args) => {
   // Get the active sheet.
   let sheet = spreadsheet.getActiveSheet();
   // Get the active cell.
   let cell = getCellIndexes(sheet.activeCell);
   // Collection to store the cell value.
   let address = [cell[0], 0, cell[0], sheet.usedRange.colIndex];
   // For column iteration.
   for (let j = address[1]; j <= address[3]; j++) {
     // get the edited cell model.
     let cellModel = getCell(cell[0], j, sheet);

     let cellValue =
       cellModel && cellModel.value ? cellModel.value.toString() : '';
     // Condition to check whether the current edited value already available in any of the cell in this iteration.
     if (cellValue === args.args.eventArgs.value) {
       // Cancels the current edit action.
       args.args.eventArgs.cancel = true;
       // Close the editing state.
       spreadsheet.closeEdit();
       break;
     }
   }
 };
 return (
   <SpreadsheetComponent
     ref={(ssObj) => {
       spreadsheet = ssObj;
     }}
     created={onCreated}
     actionBegin={actionBegin}
   >
     <SheetsDirective>
       <SheetDirective name="Car Sales Report">
         <RangesDirective>
           <RangeDirective dataSource={defaultData}></RangeDirective>
         </RangesDirective>
         <ColumnsDirective>
           <ColumnDirective width={180}></ColumnDirective>
           <ColumnDirective width={130}></ColumnDirective>
           <ColumnDirective width={130}></ColumnDirective>
           <ColumnDirective width={180}></ColumnDirective>
           <ColumnDirective width={130}></ColumnDirective>
           <ColumnDirective width={120}></ColumnDirective>
         </ColumnsDirective>
       </SheetDirective>
     </SheetsDirective>
   </SpreadsheetComponent>
 );
}
export default App;

const root = createRoot(document.getElementById('sample'));
root.render(<App />);

Refer to the working sample for additional details and implementation:: Sample

Output:

Conclusion

We hope you enjoyed learning about how to prevent users from entering duplicate values on the same row in a React spreadsheet.

You can refer to our React Spreadsheet’s feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Spreadsheet example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our React Spreadsheet and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!