diff --git a/Document-Processing/Excel/Spreadsheet/React/feature-list.md b/Document-Processing/Excel/Spreadsheet/React/feature-list.md index 597031aa6..3ca8b3eea 100644 --- a/Document-Processing/Excel/Spreadsheet/React/feature-list.md +++ b/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 diff --git a/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx index fd862ef42..52b85cef4 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx +++ b/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); } diff --git a/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx index d35ac181d..009cbfe80 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx +++ b/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(null); + const spreadsheetRef = React.useRef(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); } diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx index de96f37f0..b9a232de8 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx +++ b/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); }; diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx index 1ca9f7434..b751844ad 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx +++ b/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(null); + let spreadsheet: SpreadsheetComponent = null; + const spreadsheetRef = React.useRef(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); }; diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx index 3628cd343..8908b167a 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx +++ b/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) || []; diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx index fdf030f6a..e26308447 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx +++ b/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(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. diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/datasource.jsx new file mode 100644 index 000000000..184714d7b --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/datasource.jsx @@ -0,0 +1,237 @@ +// Minimal sample data. You can replace later with your own. +export function getDefaultData() { + return [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } + ]; +} diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/data.ts b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/datasource.tsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/data.ts rename to Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/datasource.tsx