Context Menu

Use the context menu to insert or delete table rows or columns. Select a cell in the table then right click the mouse. Select the Insert or Delete menu items to insert or delete rows and columns.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
Description
app.jsx
app-func.jsx
app-class.jsx
index.html
styles.css
Copy to CodeMine

Users can easily insert and delete table rows and columns using the built-in ContextMenu

Users can easily insert and delete table rows and columns using the built-in ContextMenu
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; export function AppFunc() { const initSpread = (spread) => { spread.suspendPaint(); let sheet = spread.getActiveSheet(); let spreadNS = GC.Spread.Sheets; sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.light1); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.getCell(1, 1).text("First Name"); sheet.getCell(1, 2).text("Last Name"); sheet.getCell(1, 3).text("Score"); sheet.getCell(1, 4).text("Position"); sheet.getCell(2, 1).text("Alexa"); sheet.getCell(2, 2).text("Wilder"); sheet.getCell(2, 3).text("90"); sheet.getCell(2, 4).text("Web Developer"); sheet.getCell(3, 1).text("Victor"); sheet.getCell(3, 2).text("Wooten"); sheet.getCell(3, 3).text("70"); sheet.getCell(3, 4).text(".NET Developer"); sheet.getCell(4, 1).text("Ifeoma"); sheet.getCell(4, 2).text("Mays"); sheet.getCell(4, 3).text("85"); sheet.getCell(4, 4).text("Sales Manager"); spread.resumePaint(); } return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)}> </SpreadSheets> </div> </div> ); }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; const Component = React.Component; export class App extends Component { constructor(props) { super(props); } render() { return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}> </SpreadSheets> </div> </div> ); } initSpread(spread) { this.spread = spread; spread.suspendPaint(); let sheet = spread.getActiveSheet(); let spreadNS = GC.Spread.Sheets; sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.light1); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.getCell(1, 1).text("First Name"); sheet.getCell(1, 2).text("Last Name"); sheet.getCell(1, 3).text("Score"); sheet.getCell(1, 4).text("Position"); sheet.getCell(2, 1).text("Alexa"); sheet.getCell(2, 2).text("Wilder"); sheet.getCell(2, 3).text("90"); sheet.getCell(2, 4).text("Web Developer"); sheet.getCell(3, 1).text("Victor"); sheet.getCell(3, 2).text("Wooten"); sheet.getCell(3, 3).text("70"); sheet.getCell(3, 4).text(".NET Developer"); sheet.getCell(4, 1).text("Ifeoma"); sheet.getCell(4, 2).text("Mays"); sheet.getCell(4, 3).text("85"); sheet.getCell(4, 4).text("Sales Manager"); spread.resumePaint(); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width:100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);