SpreadJS allows you to add a row or column through a self-defined button to the worksheet.
It could show or hide the add row or column button:
And it could specify the width, height, style and tooltip for the button, the add row button option only support the height property, the add column button only support the width property, and it just support some simple properties of the style like foreColor, backColor, hAlign, vAlign, backgroundImage, backgroundImageLayout to paint on the worksheet.
If it's necessary to self define the actions of the buttons, it could specify the command to each button:
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';
const useState = React.useState;
export function AppFunc() {
const [columnBtnVisible, setColumnBtnVisible] = useState(true);
const [rowBtnVisible, setRowBtnVisible] = useState(true);
const [columnBtnWidth, setColumnBtnWidth] = useState(62);
const [rowBtnHeight, setRowBtnHeight] = useState(20);
const [columnBtnTooltip, setColumnBtnTooltip] = useState("");
const [rowBtnTooltip, setRowBtnTooltip] = useState("");
const [columnBtnBackColor, setColumnBtnBackColor] = useState("");
const [rowBtnBackColor, setRowBtnBackColor] = useState("");
const [spread, setSpread] = useState(null);
const initSpread = (spread) => {
setSpread(spread);
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.addRowButtonOption.visible = true;
sheet.options.addColumnButtonOption.visible = true;
sheet.setRowCount(10);
sheet.setColumnCount(10);
sheet.resumePaint();
// Define the command
const addRowCommand = sheet.options.addRowButtonOption.command;
spread.commandManager().register('clickRowButtonToDo', {
canUndo: false,
execute: function (context, options) {
// the self-defined command
options.cmd = addRowCommand;
spread.commandManager().execute(options);
}
});
sheet.options.addRowButtonOption.command = 'clickRowButtonToDo';
const addColumnCommand = sheet.options.addColumnButtonOption.command;
spread.commandManager().register('clickColumnButtonToDo', {
canUndo: false,
execute: function (context, options) {
// the self-defined command
options.cmd = addColumnCommand;
spread.commandManager().execute(options);
}
});
sheet.options.addColumnButtonOption.command = 'clickColumnButtonToDo';
}
const _setColumnBtnVisible = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.visible = $event.target.checked;
spread.repaint();
setColumnBtnVisible($event.target.checked);
}
const _setRowBtnVisible = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.visible = $event.target.checked;
spread.repaint();
setRowBtnVisible($event.target.checked);
}
const _setColumnBtnWidth = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.width = parseInt($event.target.value);
spread.repaint();
setColumnBtnWidth(parseInt($event.target.value));
}
const _setRowBtnHeight = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.height = parseInt($event.target.value);
spread.repaint();
setRowBtnHeight(parseInt($event.target.value));
}
const _setColumnBtnTooltip = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.tooltip = $event.target.value;
spread.repaint();
setColumnBtnTooltip($event.target.value);
}
const _setRowBtnTooltip = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.tooltip = $event.target.value;
spread.repaint();
setRowBtnTooltip($event.target.value);
}
const _setColumnBtnBackColor = ($event) => {
let sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = $event.target.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addColumnButtonOption.style = style;
spread.repaint();
setColumnBtnBackColor($event.target.value);
}
const _setRowBtnBackColor = ($event) => {
let sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = $event.target.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addRowButtonOption.style = style;
spread.repaint();
setRowBtnBackColor($event.target.value);
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
<div class="options-container">
<label>Set the options below to show the add column/row button.</label>
<div class="option-row">
<input type="checkbox" id="columnBtnVisible" checked={columnBtnVisible} onChange={(e) => _setColumnBtnVisible(e)} />
<label class="checkbox-label" for="columnBtnVisible">Add Column Button Visible</label>
</div>
<div class="option-row">
<input type="checkbox" id="rowBtnVisible" checked={rowBtnVisible} onChange={(e) => _setRowBtnVisible(e)} />
<label class="checkbox-label" for="rowBtnVisible">Add Row Button Visible</label>
</div>
<hr />
<div class="option-row">
<label >Set the width/height to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnWidth">Add Column Button Width</label>
<input type="number" value={columnBtnWidth} id="columnBtnWidth" onChange={(e) => _setColumnBtnWidth(e)} />
<label for="rowBtnHeight">Add Row Button Height</label>
<input type="number" value={rowBtnHeight} id="rowBtnHeight" onChange={(e) => _setRowBtnHeight(e)} />
</div>
<hr />
<div class="option-row">
<label >Set the tooltip to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnTooltip">Add Column Button Tooltip</label>
<input type="text" value={columnBtnTooltip} id="columnBtnTooltip" onChange={(e) => _setColumnBtnTooltip(e)} />
<label for="rowBtnTooltip">Add Row Button Tooltip</label>
<input type="text" value={rowBtnTooltip} id="rowBtnTooltip" onChange={(e) => _setRowBtnTooltip(e)} />
</div>
<hr />
<div class="option-row">
<label >Set the back color to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnBackColor">Add Column Button Back Color</label>
<input type="color" value={columnBtnBackColor} id="columnBtnBackColor" onChange={(e) => _setColumnBtnBackColor(e)} />
<label for="rowBtnBackColor">Add Row Button Back Color</label>
<input type="color" value={rowBtnBackColor} id="rowBtnBackColor" onChange={(e) => _setRowBtnBackColor(e)} />
</div>
</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);
this.spread = null;
this.state = {
columnBtnVisible: true,
rowBtnVisible: true,
columnBtnWidth: 62,
rowBtnHeight: 20,
columnBtnTooltip: "",
rowBtnTooltip: "",
columnBtnBackColor: "",
rowBtnBackColor: ""
};
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
<div class="options-container">
<label>Set the options below to show the add column/row button.</label>
<div class="option-row">
<input type="checkbox" id="columnBtnVisible" checked={this.state.columnBtnVisible} onChange={(e) => this.columnBtnVisible(e)} />
<label class="checkbox-label" for="columnBtnVisible">Add Column Button Visible</label>
</div>
<div class="option-row">
<input type="checkbox" id="rowBtnVisible" checked={this.state.rowBtnVisible} onChange={(e) => this.rowBtnVisible(e)} />
<label class="checkbox-label" for="rowBtnVisible">Add Row Button Visible</label>
</div>
<hr />
<div class="option-row">
<label >Set the width/height to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnWidth">Add Column Button Width</label>
<input type="number" value={this.state.columnBtnWidth} id="columnBtnWidth" onChange={(e) => this.columnBtnWidth(e)} />
<label for="rowBtnHeight">Add Row Button Height</label>
<input type="number" value={this.state.rowBtnHeight} id="rowBtnHeight" onChange={(e) => this.rowBtnHeight(e)} />
</div>
<hr />
<div class="option-row">
<label >Set the tooltip to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnTooltip">Add Column Button Tooltip</label>
<input type="text" value={this.state.columnBtnTooltip} id="columnBtnTooltip" onChange={(e) => this.columnBtnTooltip(e)} />
<label for="rowBtnTooltip">Add Row Button Tooltip</label>
<input type="text" value={this.state.rowBtnTooltip} id="rowBtnTooltip" onChange={(e) => this.rowBtnTooltip(e)} />
</div>
<hr />
<div class="option-row">
<label >Set the back color to the add column/row button.</label>
</div>
<div class="option-row">
<label for="columnBtnBackColor">Add Column Button Back Color</label>
<input type="color" value={this.state.columnBtnBackColor} id="columnBtnBackColor" onChange={(e) => this.columnBtnBackColor(e)} />
<label for="rowBtnBackColor">Add Row Button Back Color</label>
<input type="color" value={this.state.rowBtnBackColor} id="rowBtnBackColor" onChange={(e) => this.rowBtnBackColor(e)} />
</div>
</div>
</div>
);
}
initSpread(spread) {
this.spread = spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.addRowButtonOption.visible = true;
sheet.options.addColumnButtonOption.visible = true;
sheet.setRowCount(10);
sheet.setColumnCount(10);
sheet.resumePaint();
// Define the command
const addRowCommand = sheet.options.addRowButtonOption.command;
spread.commandManager().register('clickRowButtonToDo', {
canUndo: false,
execute: function (context, options) {
// the self-defined command
options.cmd = addRowCommand;
spread.commandManager().execute(options);
}
});
sheet.options.addRowButtonOption.command = 'clickRowButtonToDo';
const addColumnCommand = sheet.options.addColumnButtonOption.command;
spread.commandManager().register('clickColumnButtonToDo', {
canUndo: false,
execute: function (context, options) {
// the self-defined command
options.cmd = addColumnCommand;
spread.commandManager().execute(options);
}
});
sheet.options.addColumnButtonOption.command = 'clickColumnButtonToDo';
}
columnBtnVisible($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.visible = $event.target.checked;
spread.repaint();
this.setState({ columnBtnVisible: $event.target.checked });
}
rowBtnVisible($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.visible = $event.target.checked;
spread.repaint();
this.setState({ rowBtnVisible: $event.target.checked });
}
columnBtnWidth($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.width = parseInt($event.target.value);
spread.repaint();
this.setState({ columnBtnWidth: parseInt($event.target.value) });
}
rowBtnHeight($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.height = parseInt($event.target.value);
spread.repaint();
this.setState({ rowBtnHeight: parseInt($event.target.value) });
}
columnBtnTooltip($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addColumnButtonOption.tooltip = $event.target.value;
spread.repaint();
this.setState({ columnBtnTooltip: $event.target.value });
}
rowBtnTooltip($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
sheet.options.addRowButtonOption.tooltip = $event.target.value;
spread.repaint();
this.setState({ rowBtnTooltip: $event.target.value });
}
columnBtnBackColor($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = $event.target.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addColumnButtonOption.style = style;
spread.repaint();
this.setState({ columnBtnBackColor: $event.target.value });
}
rowBtnBackColor($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.backColor = $event.target.value;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.options.addRowButtonOption.style = style;
spread.repaint();
this.setState({ rowBtnBackColor: $event.target.value });
}
}
<!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;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
}
label {
margin-bottom: 6px;
display: block;
margin-top: 10px;
}
.checkbox-label {
display: inline;
}
input[type=button] {
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(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);
