Skip to content

Commit bfac041

Browse files
sridhar-alagirisamysridhar-alagirisamy
authored
Merge pull request #2356 from syncfusion-content/EJ2-1011961-ug
documentation(EJ2-1011961): Add feature availability and content refinement
2 parents d086138 + f69c4c5 commit bfac041

9 files changed

Lines changed: 324 additions & 88 deletions

File tree

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

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,60 +9,68 @@ documentation: ug
99

1010
# Feature list in React Spreadsheet component
1111

12-
The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features.
12+
The following table shows the features available in our Syncfusion EJ2 Spreadsheet.
1313

14-
| **Features** | **Available in EJ1 Spreadsheet** | **Available in EJ2 Spreadsheet** | **Comments** |
15-
| --- | --- | --- | --- |
16-
| Ribbon | Yes | Yes | - |
17-
| Formula bar | Yes | Yes | - |
18-
| Sheet tab | Yes | Yes | - |
19-
| Show / Hide gridlines and header | Yes | Yes | - |
20-
| Scrolling | Partially | Yes | - |
21-
| Selection | Yes | Yes | - |
22-
| Editing | Yes | Yes | - |
23-
| Formulae | Yes | Partially | EJ2 supports limited number of [`most used formulas`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas#supported-formulas) |
24-
| Named range | Yes | Partially | EJ2 Spreadsheet Named range supports only in workbook scope |
25-
| Data Binding | Yes | Yes | - |
26-
| Formatting | Yes | Yes | - |
27-
| Context menu | Yes | Yes | - |
28-
| Keyboard navigation | Yes | Yes | - |
29-
| Keyboard shortcuts | Yes | Yes | - |
30-
| Sorting | Yes | Yes | - |
31-
| Filtering | Yes | Yes | - |
32-
| Hyperlink | Yes | Yes | - |
33-
| Undo & redo | Yes | Yes | - |
34-
| Open and Save | Yes | Yes | - |
35-
| Resize / Autofit | Yes | Yes | - |
36-
| Clipboard | Yes | Yes | - |
37-
| Collaborative editing | No | Yes | - |
38-
| Wrap text | Yes | Yes | - |
39-
| Template | No | Yes | - |
40-
| Merge cells | Yes | Yes | - |
41-
| Show / Hide rows and columns | Yes | Yes | - |
42-
| Sheet customizations | Yes | Partially | Move or copy sheet is not supported in EJ2 spreadsheet. |
43-
| Data Validation | Yes | Yes | - |
44-
| Table | Yes | No | - |
45-
| Chart | Yes | Yes | - |
46-
| Image | Yes | Yes | - |
47-
| Conditional formatting | Yes | Yes | - |
48-
| Freeze Pane | Yes | Yes | - |
49-
| Scaling | No | No | - |
50-
| Print | Yes | No | - |
51-
| Grouping | No | No | - |
52-
| Autofill | Yes | No | - |
53-
| Auto Sum | Yes | Yes | - |
54-
| Format painter | Yes | No | - |
55-
| Cell Style | Yes | Partially | We can only customize the cell style in EJ2 Spreadsheet through API. |
56-
| Protection | Yes | Partially | Custom encryption is not supported in EJ2 Spreadsheet's protect workbook. |
57-
| Find and replace | Yes | Yes | - |
58-
| Drag and Drop | Yes | No | - |
59-
| Notes | Yes | No | - |
60-
| Comments | No | No | - |
61-
| Pivot table | Yes | No | - |
62-
| Sparklines | Yes | No | - |
63-
| Form controls | Yes | No | - |
64-
| Shapes | No | No | - |
65-
| Clear | Yes | Yes | - |
14+
| **Features** | **Available in EJ2 Spreadsheet** | **Comments** |
15+
| --- | --- | --- |
16+
| Ribbon | Yes | - |
17+
| Formula bar | Yes | - |
18+
| Sheet tab | Yes | - |
19+
| Show / Hide gridlines and header | Yes | - |
20+
| Scrolling | Yes | - |
21+
| Selection | Yes | - |
22+
| Editing | Yes | - |
23+
| Formulae | Partially | EJ2 supports limited number of [`most used formulas`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas#supported-formulas) |
24+
| Named range | Yes | - |
25+
| Data Binding | Yes | - |
26+
| Cell Formatting | Yes | - |
27+
| Number Formatting | Yes | - |
28+
| Context menu | Yes | - |
29+
| Keyboard navigation | Yes | - |
30+
| Keyboard shortcuts | Yes | - |
31+
| Sorting | Yes | - |
32+
| Filtering | Yes | - |
33+
| Hyperlink | Yes | - |
34+
| Undo & redo | Yes | - |
35+
| Import | Yes | - |
36+
| Export | Yes | - |
37+
| Resize / Autofit | Yes | - |
38+
| Clipboard | Yes | - |
39+
| Collaborative editing | No | - |
40+
| Wrap text | Yes | - |
41+
| Template | Yes | - |
42+
| Merge cells | Yes | - |
43+
| Show / Hide rows and columns | Yes | - |
44+
| Sheet customizations | Yes | - |
45+
| Data Validation | Yes | - |
46+
| Table | No | - |
47+
| Chart | Yes | - |
48+
| Image | Yes | - |
49+
| Conditional formatting | Yes | - |
50+
| Freeze Pane | Yes | - |
51+
| Scaling | No | - |
52+
| Print | Yes | - |
53+
| Grouping | No | - |
54+
| Autofill | Yes | - |
55+
| Auto Sum | Yes | - |
56+
| Format painter | No | - |
57+
| Cell Style | Yes | - |
58+
| Protection | Yes | - |
59+
| Find and replace | Yes | - |
60+
| Drag and Drop | Partially | EJ2 spreadsheet supports drag and drop of images and charts |
61+
| Notes | Yes | - |
62+
| Comments | Yes | - |
63+
| Pivot table | No | - |
64+
| Sparklines | No | - |
65+
| Form controls | No | - |
66+
| Shapes | No | - |
67+
| Clear | Yes | - |
68+
| Insert / Delete rows, columns and sheets | Yes | - |
69+
| Sheet Visibility | Yes | - |
70+
| Ribbon Customization | Yes | - |
71+
| Theme and style options | Yes | - |
72+
| Accessibility | Yes | - |
73+
| Touch-Friendly Interactions | Yes | - |
6674

6775
## See Also
6876

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
1-
import React, { useRef } from 'react';
1+
import * as React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
44

55
function App() {
6-
const spreadsheetRef = useRef(null);
6+
const spreadsheetRef = React.useRef(null);
77

88
// To create plus icon wrapper.
99
const createPlusIconWrapper = () => {
10-
const wrapperDiv = document.createElement('div');
10+
const wrapperDiv = document.createElement("div");
1111
wrapperDiv.className = 'e-custom-wrapper';
12-
const iconSpan = document.createElement('span');
12+
const iconSpan = document.createElement("span");
1313
iconSpan.className = 'e-icons e-plus e-custom-icon';
1414
wrapperDiv.appendChild(iconSpan);
1515
return wrapperDiv;
1616
};
1717

18-
// Triggers after the component is created
1918
const handleCreated = () => {
2019
if (!spreadsheetRef.current) return;
21-
// Initialize icons in the cells when the spreadsheet loads.
2220
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'A1');
2321
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'B1');
2422
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'C1');
2523
spreadsheetRef.current.resize();
26-
// This is to Add a header Ribbon tab with a button to initialize everything on click.
2724
spreadsheetRef.current.addRibbonTabs([
2825
{
2926
header: { text: 'Template' },
@@ -33,7 +30,6 @@ function App() {
3330
tooltipText: 'Initialize',
3431
click: () => {
3532
if (!spreadsheetRef.current) return;
36-
// Add the plus icon template to the selected cell
3733
const sheet = spreadsheetRef.current.getActiveSheet();
3834
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, sheet.activeCell);
3935
spreadsheetRef.current.resize();
@@ -44,10 +40,8 @@ function App() {
4440
]);
4541
};
4642

47-
// Triggers before the cell is appended to DOM
4843
const handleBeforeCellRender = (args) => {
4944
if (args.cell && args.cell.template === 'plus-icon') {
50-
// Pass the rowIndex to the wrapper to make the click handler reliable.
5145
const wrapperDiv = createPlusIconWrapper();
5246
args.element.insertBefore(wrapperDiv, args.element.firstChild);
5347
}

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
1-
import React, { useRef } from 'react';
1+
import * as React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
44

55
function App(): React.ReactElement {
6-
const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
6+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
77

88
// To create plus icon wrapper.
99
const createPlusIconWrapper = (): HTMLElement => {
10-
const wrapperDiv: HTMLDivElement = document.createElement('div');
10+
const wrapperDiv: HTMLDivElement = document.createElement("div");
1111
wrapperDiv.className = 'e-custom-wrapper';
12-
const iconSpan: HTMLSpanElement = document.createElement('span');
12+
const iconSpan: HTMLSpanElement = document.createElement("span");
1313
iconSpan.className = 'e-icons e-plus e-custom-icon';
1414
wrapperDiv.appendChild(iconSpan);
1515
return wrapperDiv;
1616
};
1717

18-
// Triggers after the component is created
1918
const handleCreated = (): void => {
2019
if (!spreadsheetRef.current) return;
21-
// Initialize icons in the cells when the spreadsheet loads.
2220
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'A1');
2321
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'B1');
2422
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'C1');
2523
spreadsheetRef.current.resize();
26-
// This is to Add a header Ribbon tab with a button to initialize everything on click.
2724
spreadsheetRef.current.addRibbonTabs([
2825
{
2926
header: { text: 'Template' },
@@ -33,9 +30,11 @@ function App(): React.ReactElement {
3330
tooltipText: 'Initialize',
3431
click: () => {
3532
if (!spreadsheetRef.current) return;
36-
// Add the plus icon template to the selected cell
3733
const sheet: any = spreadsheetRef.current.getActiveSheet();
38-
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, (sheet as any).activeCell);
34+
spreadsheetRef.current.updateCell(
35+
{ template: 'plus-icon' } as any,
36+
sheet.activeCell
37+
);
3938
spreadsheetRef.current.resize();
4039
},
4140
},
@@ -44,10 +43,8 @@ function App(): React.ReactElement {
4443
]);
4544
};
4645

47-
// Triggers before the cell is appended to DOM
4846
const handleBeforeCellRender = (args: any) => {
4947
if (args.cell && args.cell.template === 'plus-icon') {
50-
// Pass the rowIndex to the wrapper to make the click handler reliable.
5148
const wrapperDiv: HTMLElement = createPlusIconWrapper();
5249
args.element.insertBefore(wrapperDiv, args.element.firstChild);
5350
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { useRef } from 'react';
1+
import * as React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
44
import { DropDownList } from '@syncfusion/ej2-dropdowns';
55

66
function App() {
77
let spreadsheet = null;
8-
const spreadsheetRef = useRef(null);
8+
const spreadsheetRef = React.useRef(null);
99

1010
const dropDownOptions = [10, 20, 30, 40, 50, 60];
1111

@@ -48,14 +48,14 @@ function App() {
4848
// To render the dropdown list.
4949
const addDropDownlist = (element, legendOptions) => {
5050
element.innerHTML = '';
51-
const inputEle = document.createElement('input');
51+
const inputEle = document.createElement("input");
5252
element.appendChild(inputEle);
5353
new DropDownList({
5454
placeholder: 'Select a value',
5555
dataSource: legendOptions,
5656
cssClass: 'e-dropdown-list',
5757
change: (event)=>{
58-
spreadsheetRef.current?.updateCell({value: event.value.toString()}, ( spreadsheet?.getActiveSheet()).activeCell);
58+
spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet()).activeCell);
5959
}
6060
}, inputEle);
6161
};

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { useRef } from 'react';
1+
import * as React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
44
import { DropDownList } from '@syncfusion/ej2-dropdowns';
55

66
function App(): React.ReactElement {
7-
let spreadsheet: SpreadsheetComponent | null = null;
8-
const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
7+
let spreadsheet: SpreadsheetComponent = null;
8+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
99

1010
const dropDownOptions: number[] = [10, 20, 30, 40, 50, 60];
1111

@@ -48,14 +48,14 @@ function App(): React.ReactElement {
4848
// To render the dropdown list.
4949
const addDropDownlist = (element: HTMLElement, legendOptions: number[]): void => {
5050
element.innerHTML = '';
51-
const inputEle: HTMLInputElement = document.createElement('input');
51+
const inputEle: HTMLInputElement = document.createElement("input");
5252
element.appendChild(inputEle);
5353
new DropDownList({
5454
placeholder: 'Select a value',
5555
dataSource: legendOptions,
5656
cssClass: 'e-dropdown-list',
5757
change: (event: any)=>{
58-
spreadsheetRef.current?.updateCell({value: event.value.toString()}, ( spreadsheet?.getActiveSheet() as any).activeCell);
58+
spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet() as any).activeCell);
5959
}
6060
}, inputEle);
6161
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
4-
import { getDefaultData } from './data';
4+
import { getDefaultData } from './datasource';
55

66
function App() {
77
const spreadsheetRef = React.useRef(null);
@@ -16,7 +16,7 @@ function App() {
1616
if (!spreadsheet) return;
1717

1818
// Get the active sheet's selected range.
19-
const selectedRange = spreadsheet.getActiveSheet()?.selectedRange;
19+
const selectedRange = spreadsheet.getActiveSheet().selectedRange;
2020
if (!selectedRange) return;
2121

2222
// Convert the selected range into cell collection.
@@ -54,7 +54,7 @@ function App() {
5454
endCell = endCell || startCell;
5555

5656
// Get the name of the active sheet.
57-
const activeSheetName = spreadsheet.getActiveSheet()?.name || 'Sheet1';
57+
const activeSheetName = spreadsheet.getActiveSheet().name;
5858

5959
// Extract column and row numbers from start and end cell references.
6060
const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || [];

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
4-
import { getDefaultData } from './data';
4+
import { getDefaultData } from './datasource';
55

66
function App(): React.ReactElement {
77
const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
@@ -16,7 +16,7 @@ function App(): React.ReactElement {
1616
if (!spreadsheet) return;
1717

1818
// Get the active sheet's selected range.
19-
const selectedRange: string | undefined = spreadsheet.getActiveSheet()?.selectedRange;
19+
const selectedRange: string | undefined = spreadsheet.getActiveSheet().selectedRange;
2020
if (!selectedRange) return;
2121

2222
// Convert the selected range into cell collection.

0 commit comments

Comments
 (0)