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

This knowledge base explains you how to restrict users from entering duplicate values on the same row in a React Spreadsheet. Get the active sheet and used range of the spreadsheet on the actionBegin event. Iterate through the rows that begin editing to see if the current edited value is available in the row cells using the getCell method. And uses 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 />);

Stackblitz Sample: https://stackblitz.com/edit/react-zwmkrf-4vy2xg?file=index.js

Output:

Conclusion
I 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, Direct-Trac, or feedback portal. We are always happy to assist you!