documentation(EJ2-1011961): Add feature availability and content refinement

Document-Processing/Excel/Spreadsheet/React/feature-list.md

@@ -9,60 +9,68 @@ documentation: ug
 
 # Feature list in React Spreadsheet component
 
-The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features.
+The following table shows the features available in our Syncfusion EJ2 Spreadsheet.
 
-| **Features** | **Available in EJ1 Spreadsheet** | **Available in EJ2 Spreadsheet** | **Comments** |
-| --- | --- | --- | --- |
-| Ribbon | Yes | Yes | - |
-| Formula bar | Yes | Yes | - |
-| Sheet tab | Yes | Yes | - |
-| Show / Hide gridlines and header | Yes | Yes | - |
-| Scrolling | Partially | Yes | - |
-| Selection | Yes | Yes | - |
-| Editing | Yes | Yes | - |
-| Formulae | Yes | Partially | EJ2 supports limited number of [`most used formulas`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas#supported-formulas)  |
-| Named range | Yes | Partially | EJ2 Spreadsheet Named range supports only in workbook scope |
-| Data Binding | Yes | Yes | - |
-| Formatting | Yes | Yes | - |
-| Context menu | Yes | Yes | - |
-| Keyboard navigation | Yes | Yes | - |
-| Keyboard shortcuts | Yes | Yes | - |
-| Sorting | Yes | Yes | - |
-| Filtering | Yes | Yes | - |
-| Hyperlink | Yes | Yes | - |
-| Undo & redo | Yes | Yes | - |
-| Open and Save | Yes | Yes | - |
-| Resize / Autofit | Yes | Yes | - |
-| Clipboard | Yes | Yes | - |
-| Collaborative editing | No | Yes | - |
-| Wrap text | Yes | Yes | - |
-| Template | No | Yes | - |
-| Merge cells | Yes | Yes | - |
-| Show / Hide rows and columns | Yes | Yes | - |
-| Sheet customizations | Yes | Partially | Move or copy sheet is not supported in EJ2 spreadsheet. |
-| Data Validation | Yes | Yes | - |
-| Table | Yes | No | - |
-| Chart | Yes | Yes | - |
-| Image | Yes | Yes | - |
-| Conditional formatting | Yes | Yes | - |
-| Freeze Pane | Yes | Yes | - |
-| Scaling | No | No | - |
-| Print | Yes | No | - |
-| Grouping | No | No | - |
-| Autofill | Yes | No | - |
-| Auto Sum | Yes | Yes | - |
-| Format painter | Yes | No | - |
-| Cell Style | Yes | Partially | We can only customize the cell style in EJ2 Spreadsheet through API. |
-| Protection | Yes | Partially | Custom encryption is not supported in EJ2 Spreadsheet's protect workbook. |
-| Find and replace | Yes | Yes | - |
-| Drag and Drop | Yes | No | - |
-| Notes | Yes | No | - |
-| Comments | No | No | - |
-| Pivot table | Yes | No | - |
-| Sparklines | Yes | No | - |
-| Form controls | Yes | No | - |
-| Shapes | No | No | - |
-| Clear | Yes | Yes | - |
+| **Features** | **Available in EJ2 Spreadsheet** | **Comments** |
+| --- | --- | --- |
+| Ribbon | Yes | - |
+| Formula bar | Yes | - |
+| Sheet tab | Yes | - |
+| Show / Hide gridlines and header | Yes | - |
+| Scrolling | Yes | - |
+| Selection | Yes | - |
+| Editing | Yes | - |
+| Formulae | Partially | EJ2 supports limited number of [`most used formulas`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas#supported-formulas)  |
+| Named range | Yes | - |
+| Data Binding | Yes | - |
+| Cell Formatting | Yes | - |
+| Number Formatting | Yes | - |
+| Context menu | Yes | - |
+| Keyboard navigation | Yes | - |
+| Keyboard shortcuts | Yes | - |
+| Sorting | Yes | - |
+| Filtering | Yes | - |
+| Hyperlink | Yes | - |
+| Undo & redo | Yes | - |
+| Import | Yes | - |
+| Export | Yes | - |
+| Resize / Autofit | Yes | - |
+| Clipboard | Yes | - |
+| Collaborative editing | No | - |
+| Wrap text | Yes | - |
+| Template | Yes | - |
+| Merge cells | Yes | - |
+| Show / Hide rows and columns | Yes | - |
+| Sheet customizations | Yes | - |
+| Data Validation | Yes | - |
+| Table | No | - |
+| Chart | Yes | - |
+| Image | Yes | - |
+| Conditional formatting | Yes | - |
+| Freeze Pane | Yes | - |
+| Scaling | No | - |
+| Print | Yes | - |
+| Grouping | No | - |
+| Autofill | Yes | - |
+| Auto Sum | Yes | - |
+| Format painter | No | - |
+| Cell Style | Yes | - |
+| Protection | Yes | - |
+| Find and replace | Yes | - |
+| Drag and Drop | Partially | EJ2 spreadsheet supports drag and drop of images and charts |
+| Notes | Yes | - |
+| Comments | Yes | - |
+| Pivot table | No | - |
+| Sparklines | No | - |
+| Form controls | No | - |
+| Shapes | No | - |
+| Clear | Yes | - |
+| Insert / Delete rows, columns and sheets | Yes | - |
+| Sheet Visibility | Yes | - |
+| Ribbon Customization | Yes | - |
+| Theme and style options | Yes | - |
+| Accessibility | Yes | - |
+| Touch-Friendly Interactions | Yes | - |
 
 ## See Also
 

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx

@@ -1,29 +1,26 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 
 function App() {
-  const spreadsheetRef = useRef(null);
+  const spreadsheetRef = React.useRef(null);
 
   // To create plus icon wrapper.
   const createPlusIconWrapper = () => {
-    const wrapperDiv = document.createElement('div');
+    const wrapperDiv = document.createElement("div");
     wrapperDiv.className = 'e-custom-wrapper';
-    const iconSpan = document.createElement('span');
+    const iconSpan = document.createElement("span");
     iconSpan.className = 'e-icons e-plus e-custom-icon';
     wrapperDiv.appendChild(iconSpan);
     return wrapperDiv;
   };
 
-  // Triggers after the component is created
   const handleCreated = () => {
     if (!spreadsheetRef.current) return;
-    // Initialize icons in the cells when the spreadsheet loads.
     spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'A1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'B1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'C1');
     spreadsheetRef.current.resize();
-    // This is to Add a header Ribbon tab with a button to initialize everything on click.
     spreadsheetRef.current.addRibbonTabs([
       {
         header: { text: 'Template' },
@@ -33,7 +30,6 @@ function App() {
             tooltipText: 'Initialize',
             click: () => {
               if (!spreadsheetRef.current) return;
-              // Add the plus icon template to the selected cell
               const sheet = spreadsheetRef.current.getActiveSheet();
               spreadsheetRef.current.updateCell({ template: 'plus-icon' }, sheet.activeCell);
               spreadsheetRef.current.resize();
@@ -44,10 +40,8 @@ function App() {
     ]);
   };
 
-  // Triggers before the cell is appended to DOM
   const handleBeforeCellRender = (args) => {
     if (args.cell && args.cell.template === 'plus-icon') {
-      // Pass the rowIndex to the wrapper to make the click handler reliable.
       const wrapperDiv = createPlusIconWrapper();
       args.element.insertBefore(wrapperDiv, args.element.firstChild);
     }

Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx

@@ -1,29 +1,26 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
 
 function App(): React.ReactElement {
-  const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
 
   // To create plus icon wrapper.
   const createPlusIconWrapper = (): HTMLElement => {
-    const wrapperDiv: HTMLDivElement = document.createElement('div');
+    const wrapperDiv: HTMLDivElement = document.createElement("div");
     wrapperDiv.className = 'e-custom-wrapper';
-    const iconSpan: HTMLSpanElement = document.createElement('span');
+    const iconSpan: HTMLSpanElement = document.createElement("span");
     iconSpan.className = 'e-icons e-plus e-custom-icon';
     wrapperDiv.appendChild(iconSpan);
     return wrapperDiv;
   };
 
-  // Triggers after the component is created
   const handleCreated = (): void => {
     if (!spreadsheetRef.current) return;
-    // Initialize icons in the cells when the spreadsheet loads.
     spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'A1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'B1');
     spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'C1');
     spreadsheetRef.current.resize();
-    // This is to Add a header Ribbon tab with a button to initialize everything on click.
     spreadsheetRef.current.addRibbonTabs([
       {
         header: { text: 'Template' },
@@ -33,9 +30,11 @@ function App(): React.ReactElement {
             tooltipText: 'Initialize',
             click: () => {
               if (!spreadsheetRef.current) return;
-              // Add the plus icon template to the selected cell
               const sheet: any = spreadsheetRef.current.getActiveSheet();
-              spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, (sheet as any).activeCell);
+              spreadsheetRef.current.updateCell(
+                { template: 'plus-icon' } as any,
+                sheet.activeCell
+              );
               spreadsheetRef.current.resize();
             },
           },
@@ -44,10 +43,8 @@ function App(): React.ReactElement {
     ]);
   };
 
-  // Triggers before the cell is appended to DOM
   const handleBeforeCellRender = (args: any) => {
     if (args.cell && args.cell.template === 'plus-icon') {
-      // Pass the rowIndex to the wrapper to make the click handler reliable.
       const wrapperDiv: HTMLElement = createPlusIconWrapper();
       args.element.insertBefore(wrapperDiv, args.element.firstChild);
     }

Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
 function App() {
   let spreadsheet = null;
-  const spreadsheetRef = useRef(null);
+  const spreadsheetRef = React.useRef(null);
 
   const dropDownOptions = [10, 20, 30, 40, 50, 60];
 
@@ -48,14 +48,14 @@ function App() {
   // To render the dropdown list.
   const addDropDownlist = (element, legendOptions) => {
     element.innerHTML = '';
-    const inputEle = document.createElement('input');
+    const inputEle = document.createElement("input");
     element.appendChild(inputEle);
     new DropDownList({
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
       change: (event)=>{
-        spreadsheetRef.current?.updateCell({value: event.value.toString()}, ( spreadsheet?.getActiveSheet()).activeCell);
+        spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet()).activeCell);
       }
     }, inputEle);
   };

Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx

@@ -1,11 +1,11 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
 import { DropDownList } from '@syncfusion/ej2-dropdowns';
 
 function App(): React.ReactElement {
-  let spreadsheet: SpreadsheetComponent | null = null;
-  const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
+  let spreadsheet: SpreadsheetComponent = null;
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
 
   const dropDownOptions: number[] = [10, 20, 30, 40, 50, 60];
 
@@ -48,14 +48,14 @@ function App(): React.ReactElement {
   // To render the dropdown list.
   const addDropDownlist = (element: HTMLElement, legendOptions: number[]): void => {
     element.innerHTML = '';
-    const inputEle: HTMLInputElement = document.createElement('input');
+    const inputEle: HTMLInputElement = document.createElement("input");
     element.appendChild(inputEle);
     new DropDownList({
       placeholder: 'Select a value',
       dataSource: legendOptions,
       cssClass: 'e-dropdown-list',
       change: (event: any)=>{
-        spreadsheetRef.current?.updateCell({value: event.value.toString()}, ( spreadsheet?.getActiveSheet() as any).activeCell);
+        spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet() as any).activeCell);
       }
     }, inputEle);
   };

Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { getDefaultData } from './data';
+import { getDefaultData } from './datasource';
 
 function App() {
   const spreadsheetRef = React.useRef(null);
@@ -16,7 +16,7 @@ function App() {
       if (!spreadsheet) return;
 
       // Get the active sheet's selected range.
-      const selectedRange = spreadsheet.getActiveSheet()?.selectedRange;
+      const selectedRange = spreadsheet.getActiveSheet().selectedRange;
       if (!selectedRange) return;
 
       // Convert the selected range into cell collection.
@@ -54,7 +54,7 @@ function App() {
     endCell = endCell || startCell;
 
     // Get the name of the active sheet.
-    const activeSheetName = spreadsheet.getActiveSheet()?.name || 'Sheet1';
+    const activeSheetName = spreadsheet.getActiveSheet().name;
 
     // Extract column and row numbers from start and end cell references.
     const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || [];

Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import { getDefaultData } from './data';
+import { getDefaultData } from './datasource';
 
 function App(): React.ReactElement {
   const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
@@ -16,7 +16,7 @@ function App(): React.ReactElement {
       if (!spreadsheet) return;
 
       // Get the active sheet's selected range.
-      const selectedRange: string | undefined = spreadsheet.getActiveSheet()?.selectedRange;
+      const selectedRange: string | undefined = spreadsheet.getActiveSheet().selectedRange;
       if (!selectedRange) return;
 
       // Convert the selected range into cell collection.