From 24842223d3e1e337e9b59f3f480ab6be5a8e8de3 Mon Sep 17 00:00:00 2001 From: parthasarathy4998 Date: Thu, 29 Jan 2026 17:03:09 +0530 Subject: [PATCH 1/2] 999430: Moved show hide samples --- .gitignore | 24 ++++++++++ README.md | 63 +++++++++++++++++++++++++- eslint.config.js | 29 ++++++++++++ index.html | 13 ++++++ package.json | 28 ++++++++++++ public/vite.svg | 1 + src/App.jsx | 103 +++++++++++++++++++++++++++++++++++++++++++ src/assets/react.svg | 1 + src/datasource.jsx | 15 +++++++ src/index.css | 10 +++++ src/main.jsx | 10 +++++ vite.config.js | 7 +++ 12 files changed, 302 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 eslint.config.js create mode 100644 index.html create mode 100644 package.json create mode 100644 public/vite.svg create mode 100644 src/App.jsx create mode 100644 src/assets/react.svg create mode 100644 src/datasource.jsx create mode 100644 src/index.css create mode 100644 src/main.jsx create mode 100644 vite.config.js 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..6cdb4ed 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 implement sheet protection, workbook protection, and read-only cells 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()], +}) From 38532222bcf09c098997e04f37c5039263fdc72e Mon Sep 17 00:00:00 2001 From: parthasarathy4998 Date: Thu, 29 Jan 2026 17:34:51 +0530 Subject: [PATCH 2/2] 999430: Updated readme content --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6cdb4ed..e21221e 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ This Repository provide complete sample demonstrating how to dynamically show or - Easily integrate with role‑based UI or conditional logic. ## 📣 Try It Out -Clone the repo, run the sample, and explore how to implement sheet protection, workbook protection, and read-only cells in your React application! +Clone the repo, run the sample, and explore how to Show or Hide Rows, Columns and Sheets in your React application! ## 📄 License and copyright