diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
index 62276a3..e21221e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,61 @@
-# syncfusion-react-spreadsheet-show-hide
-A sample demonstrating how to dynamically show or hide rows, columns, and sheets in Syncfusion React Spreadsheet.
+# Syncfusion React Spreadsheet Show or Hide Rows, Columns and Sheets
+
+This Repository provide complete sample demonstrating how to dynamically show or hide rows, columns and sheets in Syncfusion React Spreadsheet.
+
+✨ **Features**
+
+- Hide or show rows and columns using context menu options or built‑in APIs.
+- Control visibility programmatically using methods like hideRow() and hideColumn().
+- Enable predefined layouts by setting hidden properties on rows and columns.
+- Configure sheet visibility using Visible, Hidden, and VeryHidden states.
+- Dynamically toggle visibility based on user actions or custom business logic.
+- Support for UI and programmatic operations.
+
+🧩 **Technologies Used**
+
+- React + Syncfusion Spreadsheet
+
+🚀 **Getting Started**
+
+1. **Clone the Repository**
+
+ ```bash
+ git clone https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-show-hide
+ ```
+
+2. **Install Dependencies**
+
+ Install the Syncfusion React Spreadsheet package as a dependency
+ ```bash
+ npm install @syncfusion/ej2-react-spreadsheet --save
+ ```
+
+5. **Run the Application**
+
+ Run the project and test the endpoints directly from the React app
+
+ ```bash
+ npm run dev
+ ```
+
+## 🔗 Resources
+- https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started
+- https://help.syncfusion.com/document-processing/excel/spreadsheet/react/rows-and-columns#hide-and-show
+- https://help.syncfusion.com/document-processing/excel/spreadsheet/react/worksheet#sheet-visibility
+
+## ✅ Benefits
+- Build cleaner, clutter‑free spreadsheet interfaces.
+- Help users focus on relevant data.
+- Preserve hidden data without deleting it.
+- Easily integrate with role‑based UI or conditional logic.
+
+## 📣 Try It Out
+Clone the repo, run the sample, and explore how to Show or Hide Rows, Columns and Sheets in your React application!
+
+## 📄 License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this control, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=javascript-spreadsheet-npm) for more info.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..4fa125d
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{js,jsx}'],
+ extends: [
+ js.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ parserOptions: {
+ ecmaVersion: 'latest',
+ ecmaFeatures: { jsx: true },
+ sourceType: 'module',
+ },
+ },
+ rules: {
+ 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+ },
+ },
+])
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d625ef0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ my-app
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..488762a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "my-app",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@syncfusion/ej2-react-spreadsheet": "^32.1.25",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0"
+ },
+ "devDependencies": {
+ "@eslint/js": "^9.39.1",
+ "@types/react": "^19.2.5",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^5.1.1",
+ "eslint": "^9.39.1",
+ "eslint-plugin-react-hooks": "^7.0.1",
+ "eslint-plugin-react-refresh": "^0.4.24",
+ "globals": "^16.5.0",
+ "vite": "^7.2.4"
+ }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..3c0700a
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+ SpreadsheetComponent,
+ SheetsDirective,
+ SheetDirective,
+ RangesDirective,
+ RowsDirective,
+ RowDirective,
+} from '@syncfusion/ej2-react-spreadsheet';
+import {
+ RangeDirective,
+ ColumnsDirective,
+ ColumnDirective,
+} from '@syncfusion/ej2-react-spreadsheet';
+import { data } from './datasource';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+ React.useEffect(() => {
+ let spreadsheet = spreadsheetRef.current;
+ if (spreadsheet) {
+ spreadsheet.cellFormat(
+ { fontWeight: 'bold', textAlign: 'center' },
+ 'A1:H1'
+ );
+ // Unhide the 2nd index hidden column
+ spreadsheet.hideColumn(1, 1, false);
+ // Unhide the 3rd index hidden row
+ spreadsheet.hideRow(3, 3, false);
+ // Hiding the 6th index column
+ spreadsheet.hideColumn(6);
+ // Hiding the 8th and 9th index row
+ spreadsheet.hideRow(8, 9);
+ spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
+ }
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+ {/* Hiding a Row using hidden property */}
+
+
+
+
+
+ {/* Hiding a Column using hidden property */}
+
+
+
+
+
+
+
+
+
+ {/* Hiding Sheet using state property */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render();
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/datasource.jsx b/src/datasource.jsx
new file mode 100644
index 0000000..3ada01e
--- /dev/null
+++ b/src/datasource.jsx
@@ -0,0 +1,15 @@
+/**
+ * Hide/show data source
+ */
+export let data = [
+ { 'Item Name': 'Casual Shoes', 'Date': '02/14/2019', 'Time': '11:34:32 AM', 'Quantity': 10, 'Price': 20, 'Amount': '=D2*E2', 'Discount': 1, 'Profit': 10 },
+ { 'Item Name': 'Sports Shoes', 'Date': '06/11/2019', 'Time': '05:56:32 AM', 'Quantity': 20, 'Price': 30, 'Amount': '=D3*E3', 'Discount': 5, 'Profit': 50 },
+ { 'Item Name': 'Formal Shoes', 'Date': '07/27/2019', 'Time': '03:32:44 AM', 'Quantity': 20, 'Price': 15, 'Amount': '=D4*E4', 'Discount': 7, 'Profit': 27 },
+ { 'Item Name': 'Sandals & Floaters', 'Date': '11/21/2019', 'Time': '06:23:54 AM', 'Quantity': 15, 'Price': 20, 'Amount': '=D5*E5', 'Discount': 11, 'Profit': 67 },
+ { 'Item Name': 'Flip- Flops & Slippers', 'Date': '06/23/2019', 'Time': '12:43:59 AM', 'Quantity': 30, 'Price': 10, 'Amount': '=D6*E6', 'Discount': 10, 'Profit': 70 },
+ { 'Item Name': 'Sneakers', 'Date': '07/22/2019', 'Time': '10:55:53 AM', 'Quantity': 40, 'Price': 20, 'Amount': '=D7*E7', 'Discount': 13, 'Profit': 66 },
+ { 'Item Name': 'Running Shoes', 'Date': '02/04/2019', 'Time': '03:44:34 AM', 'Quantity': 20, 'Price': 10, 'Amount': '=D8*E8', 'Discount': 3, 'Profit': 14 },
+ { 'Item Name': 'Loafers', 'Date': '11/30/2019', 'Time': '03:12:52 AM', 'Quantity': 31, 'Price': 10, 'Amount': '=D9*E9', 'Discount': 6, 'Profit': 29 },
+ { 'Item Name': 'Cricket Shoes', 'Date': '07/09/2019', 'Time': '11:32:14 AM', 'Quantity': 41, 'Price': 30, 'Amount': '=D10*E10', 'Discount': 12, 'Profit': 166 },
+ { 'Item Name': 'T-Shirts', 'Date': '10/31/2019', 'Time': '12:01:44 AM', 'Quantity': 50, 'Price': 10, 'Amount': '=D11*E11', 'Discount': 9, 'Profit': 55 }
+];
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..c5f656f
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,10 @@
+@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';
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..b9a1a6d
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+
+
+ ,
+)
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})