From 63c31a09fd0a828b14aa6caa363e0e33e03a278a Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Thu, 27 Aug 2026 13:00:58 +0530 Subject: [PATCH 1/5] 1047683: Update Getting Started documentation of Spreadsheet for theme improvements across all EJ2 platforms --- .../Spreadsheet/Angular/getting-started.md | 27 +++++++------- .../Javascript-ES5/getting-started.md | 36 +++++++++---------- .../Javascript-ES6/getting-started.md | 26 +++++++------- .../create-react-app.md | 27 +++++++------- .../nextjs-getting-started.md | 27 +++++++------- .../React/environment-integration/preact.md | 27 +++++++------- .../React/environment-integration/remix.md | 27 +++++++------- .../environment-integration/sharepoint.md | 28 ++++++++------- .../Spreadsheet/React/getting-started.md | 27 +++++++------- .../Excel/Spreadsheet/Vue/getting-started.md | 26 +++++++------- .../Spreadsheet/Vue/vue-3-getting-started.md | 26 +++++++------- 11 files changed, 158 insertions(+), 146 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 7f84faac9e..9afa9a8c1a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -141,24 +141,25 @@ Before initializing the Syncfusion Angular Spreadsheet component, generate a Syn - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in an Angular Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#angular) -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/styles.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `src/styles.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-angular-spreadsheet/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview) for information about the available themes and the different ways to include theme styles in an Angular application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project. ## Add the Syncfusion® Angular Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md index 63385fc7c0..7c89e53a47 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -109,27 +109,27 @@ Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAM - + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index 4266d7a64b..8e5829db3f 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -59,29 +59,29 @@ Before initializing any Syncfusion components, generate a Syncfusion license key - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in a JavaScript-ES6 Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#javascript-es6--typescript) -## Add CSS references +## Import the required CSS styles -Add the following style references for the Spreadsheet component and its dependent components. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `src/styles/styles.css` file: {% tabs %} {% highlight css tabtitle="~/src/styles/styles.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-spreadsheet/styles/tailwind3.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a TypeScript application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. +N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project. ## Add the Syncfusion® Spreadsheet Component to the Application diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index cf9e46e4c9..9fef27d796 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -65,24 +65,25 @@ or yarn add @syncfusion/ej2-react-spreadsheet ``` -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component style references to the `src/App.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `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-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> 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 diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md index 4ef8741a8a..c2e468672a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md @@ -99,28 +99,29 @@ yarn add @syncfusion/ej2-react-spreadsheet {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -Add the following Spreadsheet and dependent component style references to the `src/app/globals.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `src/app/globals.css` file: {% tabs %} {% highlight css tabtitle="globals.css" %} -@import '@syncfusion/ej2-base/styles/tailwind3.css'; -@import '@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Next.js application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> 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 Next.js project. ## Add Syncfusion® React component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index daa40e3a8d..4d9724f6af 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -100,24 +100,25 @@ or yarn add @syncfusion/ej2-react-spreadsheet ``` -## Add CSS reference +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/style.css` file. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `src/style.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 '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> 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 Preact project. ## Adding Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md index 0f562b50cc..dc16653b5f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md @@ -69,24 +69,25 @@ To include the React Spreadsheet component in your project, use the following co npm install @syncfusion/ej2-react-spreadsheet ``` -## Adding CSS reference +## Import the required CSS styles -Import the Syncfusion® component themes in the `app.css` file as shown below: +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `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-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> 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 Remix project. ## Configure Server-Side Rendering (SSR) diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md index 2f977f0d52..bfd5fb8ccf 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md @@ -55,23 +55,25 @@ To install the React Spreadsheet component package, use the following command: npm install @syncfusion/ej2-react-spreadsheet --save ``` -## Add CSS reference -Add the following Spreadsheet and dependent component styles to `~/src/webparts/app/components/App.tsx` file. +## Import the required CSS styles + +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `~/src/webparts/app/components/App.tsx` file: ```ts -require('@syncfusion/ej2-base/styles/tailwind3.css'); -require('@syncfusion/ej2-inputs/styles/tailwind3.css'); -require('@syncfusion/ej2-buttons/styles/tailwind3.css'); -require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css'); -require('@syncfusion/ej2-lists/styles/tailwind3.css'); -require('@syncfusion/ej2-navigations/styles/tailwind3.css'); -require('@syncfusion/ej2-popups/styles/tailwind3.css'); -require('@syncfusion/ej2-dropdowns/styles/tailwind3.css'); -require('@syncfusion/ej2-grids/styles/tailwind3.css'); -require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'); +require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'); ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> 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 SharePoint project. ## Add Spreadsheet Component diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index 7d522018ac..041b2b2a56 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -139,24 +139,25 @@ Before initializing the Syncfusion React Spreadsheet component, generate a Syncf - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in a React Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#reactjs) -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/index.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `src/index.css` file: ```css -@import '@syncfusion/ej2-base/styles/tailwind3.css'; -@import '@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> 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 diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md index dc12b0f383..43190747eb 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md @@ -49,27 +49,29 @@ Before initializing the Syncfusion Vue Spreadsheet control, generate a Syncfusio - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in a Vue Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#vuejs) -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component style references in the **\** section. Replace the existing content with the theme import code below. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/vue/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference in the **\** section: {% tabs %} {% highlight css tabtitle="~/src/App.vue" %} -@import "@syncfusion/ej2-base/styles/tailwind3.css"; -@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-grids/styles/tailwind3.css"; -@import "@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css"; +@import "@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Vue application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue 2 project. ## Add the Vue Spreadsheet component to the application diff --git a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md index 0aac6b73e9..d5596363c2 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md @@ -118,27 +118,29 @@ Install the [Vue Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/e npm install @syncfusion/ej2-vue-spreadsheet ``` -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/style.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/vue/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required Spreadsheet theme style reference to `src/style.css` file: {% tabs %} {% highlight html tabtitle="style.css" %} -@import "@syncfusion/ej2-base/styles/tailwind3.css"; -@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-grids/styles/tailwind3.css"; -@import "@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css"; +@import "@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Vue application. +N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. + +N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue 3 project. ## Add the Vue Spreadsheet component to the application From f0a5990ae252d0b495bc8c168e460b7b6df6898c Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Thu, 27 Aug 2026 13:07:16 +0530 Subject: [PATCH 2/5] 1047683: Update Getting Started documentation of Spreadsheet for theme improvements across all EJ2 platforms --- .../React/environment-integration/create-react-app.md | 2 +- .../Excel/Spreadsheet/React/environment-integration/preact.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index 9fef27d796..e59c9ffb26 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -78,7 +78,7 @@ npm install @syncfusion/ej2-tailwind3-theme Add the required Spreadsheet theme style reference to `src/App.css` file: ```css -@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index 4d9724f6af..b34e5535b6 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -113,7 +113,7 @@ npm install @syncfusion/ej2-tailwind3-theme Add the required Spreadsheet theme style reference to `src/style.css` file: ```css -@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. From dcd18db500f72b3d5fe168c468977c05e35e2590 Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Thu, 27 Aug 2026 14:43:08 +0530 Subject: [PATCH 3/5] 1047683: Update Getting Started documentation of Spreadsheet for theme improvements across all EJ2 platforms --- .../Excel/Spreadsheet/Angular/getting-started.md | 8 ++------ .../Excel/Spreadsheet/Javascript-ES6/getting-started.md | 4 ---- .../React/environment-integration/create-react-app.md | 4 ---- .../environment-integration/nextjs-getting-started.md | 8 ++------ .../Spreadsheet/React/environment-integration/preact.md | 4 ---- .../Spreadsheet/React/environment-integration/remix.md | 6 +----- .../React/environment-integration/sharepoint.md | 4 ---- .../Excel/Spreadsheet/React/getting-started.md | 8 ++------ .../Excel/Spreadsheet/Vue/getting-started.md | 8 ++------ .../Excel/Spreadsheet/Vue/vue-3-getting-started.md | 8 ++------ 10 files changed, 11 insertions(+), 51 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 9afa9a8c1a..85fe51383a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -125,13 +125,13 @@ cd spreadsheet-app The [Angular Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet) package uses the Ivy-based Angular library distribution [format](https://angular.dev/tools/libraries/angular-package-format) and is compatible with `Angular 12` and above. Use the following command to install the package: ``` -npm install @syncfusion/ej2-angular-spreadsheet +npm install @syncfusion/ej2-angular-spreadsheet --save ``` For `Angular versions below 12`, use the legacy `ngcc` package instead: ``` -npm install @syncfusion/ej2-angular-spreadsheet@ngcc +npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save ``` ## Register a Syncfusion License Key @@ -157,10 +157,6 @@ Add the required Spreadsheet theme style reference to `src/styles.css` file: @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project. - ## Add the Syncfusion® Angular Spreadsheet component Import and render the `Spreadsheet` in `src/app/app.ts`. Replace the existing content with the following code. diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index 8e5829db3f..2aa92388f6 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -79,10 +79,6 @@ Add the required Spreadsheet theme style reference to `src/styles/styles.css` fi {% endhighlight %} {% endtabs %} -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project. - ## Add the Syncfusion® Spreadsheet Component to the Application Add a container element for the Spreadsheet component to the `index.html` file, and then initialize the component in the `app.ts` file. diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index e59c9ffb26..163bcb6d6f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -81,10 +81,6 @@ Add the required Spreadsheet theme style reference to `src/App.css` file: @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> 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 Now, import the `SpreadsheetComponent` into `src/App.js` file and replace the existing code with the following: diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md index c2e468672a..b0fed6f50a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md @@ -89,7 +89,7 @@ Here, the [React Spreadsheet component](https://www.syncfusion.com/spreadsheet-e {% tabs %} {% highlight bash tabtitle="NPM" %} -npm install @syncfusion/ej2-react-spreadsheet +npm install @syncfusion/ej2-react-spreadsheet --save {% endhighlight %} {% highlight bash tabtitle="YARN" %} @@ -114,15 +114,11 @@ Add the required Spreadsheet theme style reference to `src/app/globals.css` file {% tabs %} {% highlight css tabtitle="globals.css" %} -@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> 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 Next.js project. - ## Add Syncfusion® React component Follow the below steps to add the [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) component to the Next.js project: diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index b34e5535b6..188086383f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -116,10 +116,6 @@ Add the required Spreadsheet theme style reference to `src/style.css` file: @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> 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 Preact project. - ## Adding Spreadsheet component Add the React Spreadsheet component in `src/index.js` file using the following code: diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md index dc16653b5f..df12d05b31 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md @@ -66,7 +66,7 @@ cd my-react-router-app To include the React Spreadsheet component in your project, use the following command: ```bash -npm install @syncfusion/ej2-react-spreadsheet +npm install @syncfusion/ej2-react-spreadsheet --save ``` ## Import the required CSS styles @@ -85,10 +85,6 @@ Add the required Spreadsheet theme style reference to `app.css` file: @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> 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 Remix project. - ## 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: diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md index bfd5fb8ccf..574f177bfa 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md @@ -71,10 +71,6 @@ Add the required Spreadsheet theme style reference to `~/src/webparts/app/compon require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'); ``` -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> 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 SharePoint project. - ## Add Spreadsheet Component Add the following code in the `App.tsx` file inside the ~/src/webparts/app/components folder to render the spreadsheet. diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index 041b2b2a56..77e9b9accf 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -129,7 +129,7 @@ cd spreadsheet-app Install the [Syncfusion® React Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-react-spreadsheet) package from npm using the following command: ``` -npm install @syncfusion/ej2-react-spreadsheet +npm install @syncfusion/ej2-react-spreadsheet --save ``` ## Register a Syncfusion License Key @@ -152,13 +152,9 @@ npm install @syncfusion/ej2-tailwind3-theme Add the required Spreadsheet theme style reference to `src/index.css` file: ```css -@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> 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 Import and render the `SpreadsheetComponent` in `src/App.jsx` or `src/App.tsx`. Replace the existing content with the following code. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md index 43190747eb..fc6a4b062d 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md @@ -39,7 +39,7 @@ cd quickstart Install the [Vue Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/ej2-vue-spreadsheet) package from npm using the following command: ``` -npm install @syncfusion/ej2-vue-spreadsheet +npm install @syncfusion/ej2-vue-spreadsheet --save ``` ## Register a Syncfusion License Key @@ -64,15 +64,11 @@ Add the required Spreadsheet theme style reference in the **\** section: {% tabs %} {% highlight css tabtitle="~/src/App.vue" %} -@import "@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue 2 project. - ## Add the Vue Spreadsheet component to the application Import and register the [Vue Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) component directives in the `script` section of **src/App.vue** by replacing the existing code with the following code. Then, define the component in the `template` section. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md index d5596363c2..9cd6d23ae6 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md @@ -115,7 +115,7 @@ cd spreadsheet-app Install the [Vue Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/ej2-vue-spreadsheet) package from npm using the following command: ``` -npm install @syncfusion/ej2-vue-spreadsheet +npm install @syncfusion/ej2-vue-spreadsheet --save ``` ## Import the required CSS styles @@ -133,15 +133,11 @@ Add the required Spreadsheet theme style reference to `src/style.css` file: {% tabs %} {% highlight html tabtitle="style.css" %} -@import "@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -N> The `index.css` file automatically includes all required dependent component styles for the Spreadsheet. You do not need to import individual dependency styles such as Base, Inputs, Buttons, SplitButtons, Lists, Navigations, Popups, Dropdowns, Grids separately. - -N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue 3 project. - ## Add the Vue Spreadsheet component to the application Import and register the [Vue Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) component directives in the `script` section of **src/App.vue**. If you use the `Composition API`, add the `setup` attribute to the `script` tag. Then, define the component in the `template` section. From ca4c2a8e4234f3fc73f0ee444bdc57a8108466bf Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Thu, 27 Aug 2026 14:58:04 +0530 Subject: [PATCH 4/5] 1047683: Update Getting Started documentation of Spreadsheet for theme improvements across all EJ2 platforms --- .../Excel/Spreadsheet/Angular/getting-started.md | 2 +- .../Excel/Spreadsheet/Javascript-ES6/getting-started.md | 2 +- .../React/environment-integration/create-react-app.md | 2 +- .../React/environment-integration/nextjs-getting-started.md | 2 +- .../Excel/Spreadsheet/React/environment-integration/preact.md | 2 +- .../Excel/Spreadsheet/React/environment-integration/remix.md | 2 +- .../Spreadsheet/React/environment-integration/sharepoint.md | 2 +- Document-Processing/Excel/Spreadsheet/React/getting-started.md | 2 +- Document-Processing/Excel/Spreadsheet/Vue/getting-started.md | 2 +- .../Excel/Spreadsheet/Vue/vue-3-getting-started.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 85fe51383a..5ed7badca8 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -151,7 +151,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/styles.css` file: +Add the required Spreadsheet theme style reference to `src/styles.css` file. Replace the existing content with the theme import code below. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index 2aa92388f6..950093f168 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -69,7 +69,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/styles/styles.css` file: +Add the required Spreadsheet theme style reference to `src/styles/styles.css` file. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="~/src/styles/styles.css" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index 163bcb6d6f..db2feae3e4 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -75,7 +75,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/App.css` file: +Add the required Spreadsheet theme style reference to `src/App.css` file. Replace the existing content with the theme import code below. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md index b0fed6f50a..c75d7d05ae 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md @@ -109,7 +109,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/app/globals.css` file: +Add the required Spreadsheet theme style reference to `src/app/globals.css` file. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="globals.css" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index 188086383f..fc41279017 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -110,7 +110,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/style.css` file: +Add the required Spreadsheet theme style reference to `src/style.css` file. Replace the existing content with the theme import code below. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md index df12d05b31..082200f5ca 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md @@ -79,7 +79,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `app.css` file: +Add the required Spreadsheet theme style reference to `app.css` file. Replace the existing content with the theme import code below. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md index 574f177bfa..252c958ddb 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md @@ -65,7 +65,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `~/src/webparts/app/components/App.tsx` file: +Add the required Spreadsheet theme style reference to `~/src/webparts/app/components/App.tsx` file. Replace the existing content with the theme import code below. ```ts require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'); diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index 77e9b9accf..8e6611aaa0 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -149,7 +149,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/index.css` file: +Add the required Spreadsheet theme style reference to `src/index.css` file. Replace the existing content with the theme import code below. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md index fc6a4b062d..2257113faf 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md @@ -59,7 +59,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference in the **\** section: +Add the required Spreadsheet theme style reference in the **\** section. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="~/src/App.vue" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md index 9cd6d23ae6..8214d5c397 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md @@ -128,7 +128,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/style.css` file: +Add the required Spreadsheet theme style reference to `src/style.css` file. Replace the existing content with the theme import code below. {% tabs %} {% highlight html tabtitle="style.css" %} From 2d6bf0896f00bf8f1f21df305a7b915efe4f523f Mon Sep 17 00:00:00 2001 From: RahulRavikumar Date: Thu, 27 Aug 2026 15:35:35 +0530 Subject: [PATCH 5/5] 1047683: Removed unwanted changes --- .../Excel/Spreadsheet/Javascript-ES6/getting-started.md | 2 +- .../Excel/Spreadsheet/React/environment-integration/preact.md | 2 +- .../Excel/Spreadsheet/React/environment-integration/remix.md | 2 +- .../Spreadsheet/React/environment-integration/sharepoint.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index 950093f168..3c95e7793a 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -69,7 +69,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/styles/styles.css` file. Replace the existing content with the theme import code below. +Add the required Spreadsheet theme style reference to `src/styles/styles.css` file. {% tabs %} {% highlight css tabtitle="~/src/styles/styles.css" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index fc41279017..96c5220e9a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -110,7 +110,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `src/style.css` file. Replace the existing content with the theme import code below. +Add the required Spreadsheet theme style reference to `src/style.css` file. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md index 082200f5ca..5803061b65 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md @@ -79,7 +79,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `app.css` file. Replace the existing content with the theme import code below. +Add the required Spreadsheet theme style reference to `app.css` file. ```css @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md index 252c958ddb..97c2094170 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md @@ -65,7 +65,7 @@ This guide uses the `Tailwind 3` theme as an example, sourced from the theme pac npm install @syncfusion/ej2-tailwind3-theme ``` -Add the required Spreadsheet theme style reference to `~/src/webparts/app/components/App.tsx` file. Replace the existing content with the theme import code below. +Add the required Spreadsheet theme style reference to `~/src/webparts/app/components/App.tsx` file. ```ts require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css');