From 53cc1883f8faa0dcd92663799967fb735f3160d7 Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Mon, 4 May 2026 20:43:28 +0530
Subject: [PATCH 1/2] 1021957: Contents modified based on readable format and
diataxis.
---
Document-Processing-toc.html | 3 +-
.../React/environment-integration/remix.md | 14 ++++-----
.../Spreadsheet/React/getting-started.md | 30 +++++++++----------
.../Spreadsheet/React/how-to-overview.md | 29 ++++++++++++++++++
.../React/how-to/prevent-actions.md | 2 +-
5 files changed, 53 insertions(+), 25 deletions(-)
create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to-overview.md
diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 26c1bfa6f1..6581313642 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -5515,7 +5515,6 @@
Data Binding
Web Services
@@ -5580,7 +5579,7 @@
Theming and Styling
- How To
+ How To
- Create a object structure
- Changing the active sheet while importing a file
diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md
index 9fc48c109c..de88005646 100644
--- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md
+++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md
@@ -7,13 +7,13 @@ platform: document-processing
documentation: ug
---
-# Getting started with Syncfusion® React Spreadsheet in Remix
+# Getting started with Syncfusion React Spreadsheet in Remix
-This guide provides a step-by-step workflow for integrating Syncfusion® React Spreadsheet into a new Remix application.
+This guide provides a step-by-step workflow for integrating Syncfusion React Spreadsheet into a new Remix application.
## Prerequisites
Ensure the following requirements are met before starting:
-[System requirements for Syncfusion® React Spreadsheet](https://ej2.syncfusion.com/react/documentation/system-requirement)
+[System requirements for Syncfusion React Spreadsheet](https://ej2.syncfusion.com/react/documentation/system-requirement)
## Benefits of using Remix
@@ -61,7 +61,7 @@ Navigate into the project directory with the below command and install the `reac
cd my-react-router-app
```
-## Adding Syncfusion® Spreadsheet package
+## Adding Syncfusion Spreadsheet package
To include the React Spreadsheet component in your project, use the following command:
@@ -88,7 +88,7 @@ Import the Syncfusion® component themes in the `app.css` file as shown below:
## Configure Server-Side Rendering (SSR)
-For Syncfusion® React Spreadsheet to function with Remix server-side rendering (via Vite), update your `vite.config.ts` file as shown:
+For Syncfusion React Spreadsheet to function with Remix server-side rendering (via Vite), update your `vite.config.ts` file as shown:
```js
import { defineConfig } from "vite";
@@ -102,7 +102,7 @@ export default defineConfig({
});
```
-This configuration ensures Syncfusion® modules are properly compiled for SSR compatibility.
+This configuration ensures Syncfusion modules are properly compiled for SSR compatibility.
## Adding Spreadsheet component
@@ -145,4 +145,4 @@ npm run start
## See Also
-* [Getting Started with Syncfusion® React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)
\ No newline at end of file
+* [Getting Started with Syncfusion React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md
index f12c59175a..bd638a7d1b 100644
--- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md
@@ -1,7 +1,7 @@
---
layout: post
title: Getting started with React Spreadsheet component | Syncfusion
-description: Checkout and learn about getting started with the Syncfusion React Spreadsheet component in the Spreadsheet Editor SDK and more details.
+description: Checkout and learn about Getting started with React Spreadsheet component of Syncfusion Essential JS 2 and more details.
control: Getting started
platform: document-processing
documentation: ug
@@ -49,20 +49,18 @@ npm install @syncfusion/ej2-react-spreadsheet --save
Add the following style references to the `src/App.css` file.
```css
-@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';
```
-> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a React project.
-
## Add the Syncfusion® React Spreadsheet component to the application
Now, import the `SpreadsheetComponent` into your `src/App.jsx` or `src/App.tsx` file and render it.
@@ -88,10 +86,12 @@ npm run dev
After the application starts, open the local URL shown in the terminal to view the React Spreadsheet Editor in the browser.
-Use the following live preview to explore the Spreadsheet component.
+The following example shows a basic spreadsheet component.
{% previewsample "/document-processing/code-snippet/spreadsheet/react/getting-started-cs1" %}
+> You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-components/react-spreadsheet) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/default) that shows you how to present and manipulate data.
+
## Video tutorial
To get started quickly with React Spreadsheet, you can watch this video:
@@ -103,4 +103,4 @@ To get started quickly with React Spreadsheet, you can watch this video:
* [Data Binding](./data-binding)
* [Open Excel files](./open-excel-files)
* [Save Excel files](./save-excel-files)
-* [Web Services](./web-services/webservice-overview)
+* [Web Services](./web-services/webservice-overview)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to-overview.md b/Document-Processing/Excel/Spreadsheet/React/how-to-overview.md
new file mode 100644
index 0000000000..30b31da3b0
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to-overview.md
@@ -0,0 +1,29 @@
+---
+layout: post
+title: Overview Section for How‑to Guides in React Spreadsheet | Syncfusion
+description: In this section, you can find answers to frequently asked questions and solutions for common scenarios in the Spreadsheet control.
+platform: document-processing
+control: Spreadsheet
+documentation: ug
+---
+
+# React Spreadsheet – How-to Guides Overview
+
+Explore practical solutions and tips for working with the Syncfusion React Spreadsheet component. The guides below cover a variety of common scenarios, helping you implement, customize, and get the most out of your spreadsheet features.
+
+## How-to Articles
+
+- [How to add custom icons to cells?](./how-to/add-cell-icon)
+- [How to create dynamic cell templates with dropdowns?](./how-to/add-dynamic-cell-template)
+- [How to change the active sheet while importing a file?](./how-to/change-active-sheet)
+- [How to create a JSON object structure for the Spreadsheet?](./how-to/create-a-object-structure)
+- [How to customize the Spreadsheet to look like a grid?](./how-to/customize-spreadsheet-like-grid)
+- [How to find and replace in a selected range?](./how-to/find-replace-in-range)
+- [How to get filtered row data?](./how-to/get-filtered-data)
+- [How to identify which context menu was opened?](./how-to/identify-the-context-menu-opened)
+- [How to paste only values without formatting?](./how-to/paste-only-values-without-formatting)
+- [How to prevent actions without read-only or sheet protection?](./how-to/prevent-actions)
+
+## See Also
+
+- [Getting Started with React Spreadsheet](./getting-started)
diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md
index ceb5913bff..9ddebcc5e4 100644
--- a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md
+++ b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md
@@ -46,7 +46,7 @@ To prevent specific action after preventing the cell editing, you need to use th
This approach ensures that spreadsheet actions such as cut, paste, autofill, formatting, validation, and conditional formatting are prevented for specific cells without protecting the sheet or making the cells read-only.
- > **Note:** In this example, we use column indexes to restrict actions. You can also use row indexes or cell addresses for the same purpose.
+> **Note:** In this example, column indexes are used to restrict actions. You can also apply the same restrictions using row indexes or specific cell addresses. This is a purely component-level customization and, unlike sheet protection, it will not be preserved in the exported file.
The following example demonstrates how to prevent actions such as cut, paste, autofill, formatting, validation, and conditional formatting for specific cells(in the first and third columns) in the spreadsheet without protecting the sheet or making the cells read-only. You can also restrict additional actions by following the same approach.
From 92743bc6ac5f4e910d9e59226e0f20d1b185fb2b Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Mon, 4 May 2026 21:02:25 +0530
Subject: [PATCH 2/2] 1021957: Contents modified based on readable format and
diataxis.
---
.../Spreadsheet/React/getting-started.md | 20 +++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md
index bd638a7d1b..c7529fd2a4 100644
--- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md
@@ -49,16 +49,16 @@ npm install @syncfusion/ej2-react-spreadsheet --save
Add the following style references to the `src/App.css` file.
```css
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';';
```
## Add the Syncfusion® React Spreadsheet component to the application