The context menu provides the following abilities:
Theme is the same as the current spread theme.
Change the filter context menu data result.
Modify the menu view's appearance and structure.
You can use the spread.options.allowContextMenu option to control whether to show the built-in context menu or not.
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 * as ReactDOM from 'react-dom';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const Component = React.Component, useState = React.useState;
export function AppFunc() {
const [spread, setSpread] = useState(null);
let initSpread = function (value) {
setSpread(value);
let sheet = value.getActiveSheet();
sheet.suspendPaint();
let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
let data = [
["Bob", "New York", "1968/6/8", "M", "80", "180"],
["Betty", "New York", "1972/7/3", "F", "72", "168"],
["Cherry", "Washington", "1986/2/2", "F", "58", "161"],
["Gary", "New York", "1964/3/2", "M", "71", "179"],
["Hunk", "Washington", "1972/8/8", "M", "80", "171"],
["Eva", "Washington", "1993/2/15", "F", "71", "180"]
];
sheet.tables.addFromDataSource("table1", 1, 1, data, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.getRange(-1, 1, -1, 6).width(80);
sheet.getRange(2, 3, 6, 1).formatter("mm-dd-yyyy");
let table = sheet.tables.findByName("table1");
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
table.setColumnName(5, dataColumns[5]);
sheet.resumePaint();
}
let allowContextMenu = function ($event) {
let allowContextMenu = $event.target.checked;
spread.options.allowContextMenu = allowContextMenu;
}
let changeSpreadTheme = function ($event) {
var header = document.getElementsByTagName('head')[0];
var target = document.querySelector('link[href*="gc.spread.sheets"]');
var value = $event.target.value;
var href = target.href,
pos = href.indexOf('gc.spread.sheets'),
item = href.substr(0, pos) + value;
header.removeChild(target);
if (item) {
addThemeLink(item);
} else {
spread.refresh();
}
};
let addThemeLink = function (href) {
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.onload = function () {
spread.refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
return (
<div class="sample-tutorial" >
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel
allowContextMenu={(e) => allowContextMenu(e)}
changeSpreadTheme={(e) => changeSpreadTheme(e)}
></Panel>
</div>
);
}
function CheckBoxInput(props) {
const [checked, setChecked] = useState(props.checked);
return (
<input type="checkbox" id={props.id} checked={checked} onChange={(e) => {
setChecked(e.target.checked);
props.onChange(e)
}} />
);
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
let props = this.props;
return (
<div class="options-container">
<div className="option-row">
<p>Right click any cell to bring up its context menu. This menu is fully customizable.</p>
</div>
<div className="option-row">
<CheckBoxInput id="allowContextMenu" checked={true}
onChange={props.allowContextMenu}></CheckBoxInput>
<label htmlFor="allowContextMenu">Show Context Menu</label>
</div>
<div class="option-row">
<label for="currentThemes">Select Theme:</label>
<select id="currentThemes" onChange={props.changeSpreadTheme}>
<optgroup label="SpreadJS">
<option value="gc.spread.sheets.css">SpreadJS</option>
</optgroup>
<optgroup label="Excel2013">
<option value="gc.spread.sheets.excel2013white.css" selected="selected">White</option>
<option value="gc.spread.sheets.excel2013lightGray.css">Light Gray</option>
<option value="gc.spread.sheets.excel2013darkGray.css">Dark Gray</option>
</optgroup>
<optgroup label="Excel2016">
<option value="gc.spread.sheets.excel2016colorful.css">Colorful</option>
<option value="gc.spread.sheets.excel2016darkGray.css">Dark Gray</option>
<option value="gc.spread.sheets.excel2016black.css">Black</option>
</optgroup>
</select>
</div>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const Component = React.Component, useState = React.useState;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.dataSource = dataSource;
this.autoGenerateColumns = false;
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={ spread => this.initSpread(spread) }>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel
allowContextMenu={ (e) => this.allowContextMenu(e) }
changeSpreadTheme={ (e) => this.changeSpreadTheme(e) }
></Panel>
</div>
);
}
initSpread(spread) {
this.spread = spread;
let sheet = spread.getActiveSheet();
sheet.suspendPaint();
let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
let data = [
["Bob", "New York", "1968/6/8", "M", "80", "180"],
["Betty", "New York", "1972/7/3", "F", "72", "168"],
["Cherry", "Washington", "1986/2/2", "F", "58", "161"],
["Gary", "New York", "1964/3/2", "M", "71", "179"],
["Hunk", "Washington", "1972/8/8", "M", "80", "171"],
["Eva", "Washington", "1993/2/15", "F", "71", "180"]
];
sheet.tables.addFromDataSource("table1", 1, 1, data, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.getRange(-1, 1, -1, 6).width(80);
sheet.getRange(2, 3, 6, 1).formatter("mm-dd-yyyy");
let table = sheet.tables.findByName("table1");
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
table.setColumnName(5, dataColumns[5]);
sheet.resumePaint();
}
allowContextMenu($event) {
let spread = this.spread, allowContextMenu = $event.target.checked;
spread.options.allowContextMenu = allowContextMenu;
}
changeSpreadTheme($event) {
let spread = this.spread;
var header = document.getElementsByTagName('head')[0];
var target = document.querySelector('link[href*="gc.spread.sheets"]');
var value = $event.target.value;
var href = target.href,
pos = href.indexOf('gc.spread.sheets'),
item = href.substr(0, pos) + value;
header.removeChild(target);
if (item) {
this.addThemeLink(item);
} else {
spread.refresh();
}
};
addThemeLink(href) {
let spread = this.spread;
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.onload = function () {
spread.refresh();
};
var header = document.getElementsByTagName('head')[0];
header.appendChild(link);
}
}
function CheckBoxInput(props) {
const [checked, setChecked] = useState(props.checked);
return (
<input type="checkbox" id={ props.id } checked={ checked } onChange={ (e) => {
setChecked(e.target.checked);
props.onChange(e)
} }/>
);
}
class Panel extends Component {
constructor(props) {
super(props);
}
render() {
let props = this.props;
return (
<div class="options-container">
<div className="option-row">
<p>Right click any cell to bring up its context menu. This menu is fully customizable.</p>
</div>
<div className="option-row">
<CheckBoxInput id="allowContextMenu" checked={ true }
onChange={ props.allowContextMenu }></CheckBoxInput>
<label htmlFor="allowContextMenu">Show Context Menu</label>
</div>
<div class="option-row">
<label for="currentThemes">Select Theme:</label>
<select id="currentThemes" onChange={ props.changeSpreadTheme }>
<optgroup label="SpreadJS">
<option value="gc.spread.sheets.css">SpreadJS</option>
</optgroup>
<optgroup label="Excel2013">
<option value="gc.spread.sheets.excel2013white.css" selected="selected">White</option>
<option value="gc.spread.sheets.excel2013lightGray.css">Light Gray</option>
<option value="gc.spread.sheets.excel2013darkGray.css">Dark Gray</option>
</optgroup>
<optgroup label="Excel2016">
<option value="gc.spread.sheets.excel2016colorful.css">Colorful</option>
<option value="gc.spread.sheets.excel2016darkGray.css">Dark Gray</option>
<option value="gc.spread.sheets.excel2016black.css">Black</option>
</optgroup>
</select>
</div>
</div>
);
}
}
<!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">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- 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: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
p{
padding:2px 10px;
background-color:#F4F8EB;
}
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);
