Introduction
To create a NameBox, add a host DIV element and bind it to the Spread instance, as shown in the following example:
NameBox will update value automatically with UI behavior, you can also use refresh() to refresh name box value manually.
You can use dispose() to remove the NameBox.
Name Box Options
You can control the name box by following options:
GC.Spread.Sheets.NameBox.INameBoxOptions
Set Name Box Options as follow:
set when creating a name box.
set the option with a name box instance.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import { useState } from 'react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
import '@mescius/spread-sheets-slicers';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
export function AppFunc() {
const [spread, setSpread] = useState(null);
const [nameBox, setNameBox] = useState(null);
const [state, setState] = useState({
enableAddCustomName: true,
enableNavigateToRange: true,
showCustomNameList: true,
dropDownMaxHeight: 500
});
const initSpread = (spread) => {
setSpread(spread);
var sheet = spread.getSheet(0);
initTable(spread);
initSlicer(sheet);
initChart(sheet);
spread.addCustomName("workBookName1", "Sheet1!A2:D4", 0, 0, "");
spread.addCustomName("workBookName2", "Sheet2!B3:E6", 0, 0, "");
sheet.addCustomName("sheet1Name1", "C2:D3", 0, 0, "");
sheet.addCustomName("sheet1Name2", "B4:E10", 0, 0, "");
spread.getSheet(1).addCustomName('sheet2Name1', "D4:G6", 0, 0, "");
var nameBox = new GC.Spread.Sheets.NameBox.NameBox('nameBox', spread);
setNameBox(nameBox);
}
const initTable = (spread) => {
var dataSource = [
[
"salesman",
"product",
"date",
"amount",
"price",
"sales"
],
[
"Colleen Lee",
"desk",
new Date("2020-10-08T16:00:00.000Z"),
5,
199,
995
],
[
"Joe Mercer",
"pen",
new Date("2020-09-15T16:00:00.000Z"),
2,
5,
10
],
[
"Alicia Schmidt",
"pencil",
new Date("2021-06-22T16:00:00.000Z"),
6,
1.5,
9
],
[
"John Walsh",
"chair",
new Date("2021-07-19T16:00:00.000Z"),
7,
68,
476
],
[
"David Hale",
"notebook",
new Date("2021-01-13T16:00:00.000Z"),
7,
3.2,
22.4
],
[
"Gordon Jones",
"desk",
new Date("2021-03-12T16:00:00.000Z"),
9,
199,
1791
],
[
"Colleen Lee",
"pen",
new Date("2021-03-06T16:00:00.000Z"),
4,
5,
20
],
[
"Colleen Lee",
"pencil",
new Date("2020-09-02T16:00:00.000Z"),
10,
1.5,
15
],
[
"Joe Mercer",
"chair",
new Date("2020-08-09T16:00:00.000Z"),
3,
68,
204
],
[
"Alicia Schmidt",
"notebook",
new Date("2021-02-08T16:00:00.000Z"),
9,
3.2,
28.8
],
[
"John Walsh",
"desk",
new Date("2021-07-03T16:00:00.000Z"),
7,
199,
1393
],
[
"David Hale",
"pen",
new Date("2021-06-27T16:00:00.000Z"),
8,
5,
40
],
[
"Gordon Jones",
"pencil",
new Date("2020-10-10T16:00:00.000Z"),
2,
1.5,
3
],
[
"Colleen Lee",
"chair",
new Date("2021-03-04T16:00:00.000Z"),
2,
68,
136
],
[
"Colleen Lee",
"notebook",
new Date("2021-02-21T16:00:00.000Z"),
11,
3.2,
35.2
],
[
"Joe Mercer",
"desk",
new Date("2021-06-03T16:00:00.000Z"),
6,
199,
1194
]
];
var sheet1 = spread.sheets[0];
sheet1.setArray(0, 0, dataSource);
var table = sheet1.tables.add("table1", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
var sheet2 = spread.sheets[1];
sheet2.setArray(0, 0, dataSource);
var table2 = sheet2.tables.add("table2", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
//setColumnWidth: sheet1
sheet1.setColumnWidth(0, 90);
sheet1.setColumnWidth(1, 80);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 70);
//setColumWidth: sheet2
sheet2.setColumnWidth(0, 90);
sheet2.setColumnWidth(1, 80);
sheet2.setColumnWidth(2, 130);
sheet2.setColumnWidth(3, 70);
}
const initSlicer = (sheet) => {
var slicer_name = sheet.slicers.add("salesman", "table1", "Salesman", GC.Spread.Sheets.Slicers.SlicerStyles.light3(), GC.Spread.Sheets.Slicers.SlicerType.table);
slicer_name.startRow(0);
slicer_name.startColumn(7);
slicer_name.startColumnOffset(0);
}
const initChart = (sheet) => {
var chart = sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.line, 100, 400, 400, 300, 'C1:D17')
}
const changeProperty = (pn, value) => {
nameBox.options[pn] = value;
let data = {...state};
data[pn] = value;
setState(data);
}
return <div class="sample-tutorial">
<div class="sample-container">
<div id='ss'>
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
</div>
<div class="sample-options">
<div class="options-container">
<h3>Name Box Container</h3>
<div id="nameBox"></div><br />
<h3>Name Box Options</h3>
<div class="option-row">
<input type="checkbox" id="enableAddCustomName" checked={state.enableAddCustomName} onChange={e => changeProperty(e.target.id, !!e.target.checked)} />
<label for="enableAddCustomName">Enable Add Custom Name</label>
</div>
<div class="option-row">
<input type="checkbox" id="enableNavigateToRange" checked={state.enableNavigateToRange} onChange={e => changeProperty(e.target.id, !!e.target.checked)} />
<label for="enableNavigateToRange">Enable Navigate to Range</label>
</div>
<div class="option-row">
<input type="checkbox" id="showCustomNameList" checked={state.showCustomNameList} onChange={e => changeProperty(e.target.id, !!e.target.checked)} />
<label for="showCustomNameList">Show Custom Name List</label>
</div>
<div class="option-row"><br />
Drop Down Max Height:
<input type="number" id="dropDownMaxHeight" min="0" step="1" value={state.dropDownMaxHeight} onChange={e => changeProperty(e.target.id, +e.target.value)} />
</div>
</div>
</div>
</div>;
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
import '@mescius/spread-sheets-slicers';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
enableAddCustomName: true,
enableNavigateToRange: true,
showCustomNameList: true,
dropDownMaxHeight: 500
}
}
render() {
return <div class="sample-tutorial">
<div class="sample-container">
<div id='ss'>
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
</div>
<div class="sample-options">
<div class="options-container">
<h3>Name Box Container</h3>
<div id="nameBox"></div><br />
<h3>Name Box Options</h3>
<div class="option-row">
<input type="checkbox" id="enableAddCustomName" checked={this.state.enableAddCustomName} onChange={e => this.changeProperty(e.target.id, !!e.target.checked)} />
<label for="enableAddCustomName">Enable Add Custom Name</label>
</div>
<div class="option-row">
<input type="checkbox" id="enableNavigateToRange" checked={this.state.enableNavigateToRange} onChange={e => this.changeProperty(e.target.id, !!e.target.checked)} />
<label for="enableNavigateToRange">Enable Navigate to Range</label>
</div>
<div class="option-row">
<input type="checkbox" id="showCustomNameList" checked={this.state.showCustomNameList} onChange={e => this.changeProperty(e.target.id, !!e.target.checked)} />
<label for="showCustomNameList">Show Custom Name List</label>
</div>
<div class="option-row"><br />
Drop Down Max Height:
<input type="number" id="dropDownMaxHeight" min="0" step="1" value={this.state.dropDownMaxHeight} onChange={e => this.changeProperty(e.target.id, +e.target.value)} />
</div>
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
var sheet = spread.getSheet(0);
this.initTable(spread);
this.initSlicer(sheet);
this.initChart(sheet);
spread.addCustomName("workBookName1", "Sheet1!A2:D4", 0, 0, "");
spread.addCustomName("workBookName2", "Sheet2!B3:E6", 0, 0, "");
sheet.addCustomName("sheet1Name1", "C2:D3", 0, 0, "");
sheet.addCustomName("sheet1Name2", "B4:E10", 0, 0, "");
spread.getSheet(1).addCustomName('sheet2Name1', "D4:G6", 0, 0, "");
var nameBox = new GC.Spread.Sheets.NameBox.NameBox('nameBox', spread);
this.nameBox = nameBox;
}
initTable(spread) {
var dataSource = [
[
"salesman",
"product",
"date",
"amount",
"price",
"sales"
],
[
"Colleen Lee",
"desk",
new Date("2020-10-08T16:00:00.000Z"),
5,
199,
995
],
[
"Joe Mercer",
"pen",
new Date("2020-09-15T16:00:00.000Z"),
2,
5,
10
],
[
"Alicia Schmidt",
"pencil",
new Date("2021-06-22T16:00:00.000Z"),
6,
1.5,
9
],
[
"John Walsh",
"chair",
new Date("2021-07-19T16:00:00.000Z"),
7,
68,
476
],
[
"David Hale",
"notebook",
new Date("2021-01-13T16:00:00.000Z"),
7,
3.2,
22.4
],
[
"Gordon Jones",
"desk",
new Date("2021-03-12T16:00:00.000Z"),
9,
199,
1791
],
[
"Colleen Lee",
"pen",
new Date("2021-03-06T16:00:00.000Z"),
4,
5,
20
],
[
"Colleen Lee",
"pencil",
new Date("2020-09-02T16:00:00.000Z"),
10,
1.5,
15
],
[
"Joe Mercer",
"chair",
new Date("2020-08-09T16:00:00.000Z"),
3,
68,
204
],
[
"Alicia Schmidt",
"notebook",
new Date("2021-02-08T16:00:00.000Z"),
9,
3.2,
28.8
],
[
"John Walsh",
"desk",
new Date("2021-07-03T16:00:00.000Z"),
7,
199,
1393
],
[
"David Hale",
"pen",
new Date("2021-06-27T16:00:00.000Z"),
8,
5,
40
],
[
"Gordon Jones",
"pencil",
new Date("2020-10-10T16:00:00.000Z"),
2,
1.5,
3
],
[
"Colleen Lee",
"chair",
new Date("2021-03-04T16:00:00.000Z"),
2,
68,
136
],
[
"Colleen Lee",
"notebook",
new Date("2021-02-21T16:00:00.000Z"),
11,
3.2,
35.2
],
[
"Joe Mercer",
"desk",
new Date("2021-06-03T16:00:00.000Z"),
6,
199,
1194
]
];
var sheet1 = spread.sheets[0];
sheet1.setArray(0, 0, dataSource);
var table = sheet1.tables.add("table1", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
var sheet2 = spread.sheets[1];
sheet2.setArray(0, 0, dataSource);
var table2 = sheet2.tables.add("table2", 0, 0, 17, 6, GC.Spread.Sheets.Tables.TableThemes.light9);
//setColumnWidth: sheet1
sheet1.setColumnWidth(0, 90);
sheet1.setColumnWidth(1, 80);
sheet1.setColumnWidth(2, 130);
sheet1.setColumnWidth(3, 70);
//setColumWidth: sheet2
sheet2.setColumnWidth(0, 90);
sheet2.setColumnWidth(1, 80);
sheet2.setColumnWidth(2, 130);
sheet2.setColumnWidth(3, 70);
}
initSlicer(sheet) {
var slicer_name = sheet.slicers.add("salesman", "table1", "Salesman", GC.Spread.Sheets.Slicers.SlicerStyles.light3(), GC.Spread.Sheets.Slicers.SlicerType.table);
slicer_name.startRow(0);
slicer_name.startColumn(7);
slicer_name.startColumnOffset(0);
}
initChart(sheet) {
var chart = sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.line, 100, 400, 400, 300, 'C1:D17')
}
changeProperty(pn, value) {
this.nameBox.options[pn] = value;
let data = {};
data[pn] = value;
this.setState(data);
}
}
<!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-options {
width: 260px;
height: 100%;
}
.sample-tutorial {
position: relative;
height: 98vh;
overflow: hidden;
display: flex;
}
.sample-container {
width: calc(100% - 280px);
height: 100%;
}
.options-container {
width: 100%;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#ss {
height: 100%;
}
#nameBox {
width: 80%;
height: 25px;
}
label {
display: inline-block;
}
p {
font-size: 12px;
font-weight: bold;
}
h3 {
white-space: nowrap;
}
#dropDownMaxHeight {
width: 40px;
}
(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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/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/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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);
