999430: Moved show hide samples

.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?

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<sup>®</sup> licensed software, including this control, is subject to the terms and conditions of Syncfusion<sup>®</sup> [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.

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_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>my-app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

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"
+  }
+}

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 (
+    <div>
+      <SpreadsheetComponent ref={spreadsheetRef} height={550}>
+        <SheetsDirective>
+          <SheetDirective>
+            <RangesDirective>
+              <RangeDirective dataSource={data}></RangeDirective>
+            </RangesDirective>
+            <RowsDirective>
+              {/* Hiding a Row using hidden property */}
+              <RowDirective index={2} hidden={true}></RowDirective>
+              <RowDirective hidden={true}></RowDirective>
+            </RowsDirective>
+            <ColumnsDirective>
+              <ColumnDirective width={150}></ColumnDirective>
+              {/* Hiding a Column using hidden property */}
+              <ColumnDirective width={100} hidden={true}></ColumnDirective>
+              <ColumnDirective width={100} hidden={true}></ColumnDirective>
+              <ColumnDirective width={80}></ColumnDirective>
+              <ColumnDirective width={80}></ColumnDirective>
+              <ColumnDirective width={80}></ColumnDirective>
+              <ColumnDirective width={80}></ColumnDirective>
+              <ColumnDirective width={80}></ColumnDirective>
+            </ColumnsDirective>
+          </SheetDirective>
+          {/* Hiding Sheet using state property */}
+          <SheetDirective name="Very Hidden Sheet" state={'VeryHidden'}>
+            <RangesDirective>
+              <RangeDirective dataSource={data}></RangeDirective>
+            </RangesDirective>
+            <ColumnsDirective>
+              <ColumnDirective width={150}></ColumnDirective>
+              <ColumnDirective width={110}></ColumnDirective>
+              <ColumnDirective width={110}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+            </ColumnsDirective>
+          </SheetDirective>
+          <SheetDirective name="Hidden Sheet" state={'Hidden'}>
+            <RangesDirective>
+              <RangeDirective dataSource={data}></RangeDirective>
+            </RangesDirective>
+            <ColumnsDirective>
+              <ColumnDirective width={150}></ColumnDirective>
+              <ColumnDirective width={110}></ColumnDirective>
+              <ColumnDirective width={110}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+              <ColumnDirective width={85}></ColumnDirective>
+            </ColumnsDirective>
+          </SheetDirective>
+        </SheetsDirective>
+      </SpreadsheetComponent>
+    </div>
+  );
+}
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

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 }
+];

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';

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(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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()],
+})