Spread provides several types of line styles to help you customize the sheet's border line and grid lines, such as thin, dotted, double, and so on. For example, the following lines change the left and right border lines of the indicated range to the dotted line style.
Spread provides two kinds of diagonal border line. The diagonal border line includes diagonal down and diagonal up.
diagonalDown
diagonalUp
For example,The following set the diagonal border line for cells
You can add or remove gridlines or set the color with the following code:
You can set the option SheetAreaOffset to move the whole sheet rendering area have some offset from the host left/top point.There will be enough space to show all things (just like left/top border and left/top selection) perfectly.
The sheetAreaOffset default value is {left:0,top:0}.
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 { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const useState = React.useState, spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
export function AppFunc() {
const [state, setState] = useState({ isGridLinePanel: true });
const [spread, setSpread] = useState(null);
const initSpread = (spread) => {
setSpread(spread);
spread.addSheet(1);
initSheetBorderAndGridLine(spread);
initSheetAreaSheet(spread);
let gridlineSheet = spread.getSheet(0);
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (e, args) {
let isGridLinePanel;
if (args.newSheet === gridlineSheet) {
isGridLinePanel = true;
} else {
isGridLinePanel = false;
}
setState({ isGridLinePanel: isGridLinePanel });
});
}
const initSheetBorderAndGridLine = (spread) => {
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
let lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin);
let range = sheet.getRange(7, 1, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double));
range = sheet.getRange(7, 4, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium));
range = sheet.getRange(7, 7, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed));
range = sheet.getRange(7, 10, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true });
range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin));
range = sheet.getRange(11, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true });
range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 7, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true });
range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double));
range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick));
range = sheet.getRange(11, 10, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true });
range = sheet.getRange(17, 1, 2, 5);
range.setBorder(lineBorder1, { outline: true });
range = sheet.getRange(17, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true });
range = sheet.getRange(17, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true });
range = sheet.getRange(16, 7, 7, 4);
range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), {
left: true,
bottom: true
});
range = sheet.getRange(15, 8, 7, 4);
range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), {
top: true,
right: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), {
left: true,
bottom: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), {
top: true,
right: true
});
range = sheet.getRange(16, 9, 5, 2);
range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), {
left: true,
bottom: true
});
range = sheet.getRange(17, 8, 5, 2);
range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), {
top: true,
right: true
});
sheet.addSpan(17, 9, 2, 1);
range = sheet.getRange(17, 9, 2, 1);
range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true });
sheet.setArray(1, 3, [
['Gender', 'Phone Number', 'Address'],
['woman', '021-432668', 'Chester Road'],
['man', '021-432238', 'Gertt Road'],
['man', '021-432533', 'Jnyliner Road'],
['man', '021-432125', 'Approach Road']
]);
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(1, 2, style, 3);
sheet.setText(1, 2, ' Info Name', spreadNS.SheetArea.viewport);
let cell = sheet.getCell(1, 2);
cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport);
sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport);
sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport);
sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport);
sheet.setRowHeight(1, 30);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
range = sheet.getRange(1, 2, 5, 4);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true });
sheet.resumePaint();
}
const initSheetAreaSheet = (spread) => {
let sheet = spread.getSheet(1);
sheet.suspendPaint();
sheet.name('SheetAreaOffset');
let data = sheetAreaJSON;
sheet.fromJSON(data);
sheet.options.colHeaderVisible = false;
sheet.options.rowHeaderVisible = false;
sheet.options.sheetAreaOffset = {
left: 2,
top: 2
};
let range = sheet.getRange(0, 0, 3, 10);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), {
left: true,
bottom: true,
top: true,
right: true
});
sheet.resumePaint();
}
const setGridline = ($event) => {
let sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = $event.target.checked;
sheet.options.gridline.showVerticalGridline = $event.target.checked;
sheet.resumePaint();
}
const setHeaderVisible = ($event) => {
let sheet = spread.getActiveSheet();
sheet.options.rowHeaderVisible = $event.target.checked;
sheet.options.colHeaderVisible = $event.target.checked;
}
const setOffset = (position) => {
let sheet = spread.getActiveSheet();
let left = position.left,
top = position.top;
sheet.options.sheetAreaOffset = {
left: parseInt(left, 10),
top: parseInt(top, 10)
}
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel
isGridLinePanel={state.isGridLinePanel}
setGridline={(e) => setGridline(e)}
setHeaderVisible={(e) => setHeaderVisible(e)}
setOffset={(position) => setOffset(position)}
></Panel>
</div>
);
}
function TextInput(props) {
const [value, setValue] = useState(props.value);
return (
<input type="number" value={value} onChange={(e) => {
setValue(e.target.value);
props.onChange(e)
}} />
);
}
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);
}} />
);
}
function Panel(props) {
const [left, setLeft] = useState("");
const [top, setTop] = useState("");
if (props.isGridLinePanel) {
return (<div className="options-container">
<div className="options-row">
<CheckBoxInput id="showGridLine" checked={false} onChange={props.setGridline}></CheckBoxInput>
<label htmlFor="showGridLine">ShowGridLine</label>
</div>
</div>);
} else {
return (<div className="options-container">
<div className="options-row">
<CheckBoxInput id="headerVisible" checked={false} onChange={props.setHeaderVisible}></CheckBoxInput>
<label htmlFor="headerVisible">HeaderVisible</label>
</div>
<div className="options-row">
<label htmlFor="left">left:</label>
<TextInput id="left" value={left} onChange={(e) => setLeft(e.target.value)}></TextInput>
</div>
<div className="options-row">
<label htmlFor="top">top:</label>
<TextInput id="top" value={top} onChange={(e) => setTop(e.target.value)}></TextInput>
</div>
<div className="options-row">
<input type="button" value="Set Sheet Area Offset" onClick={() => props.setOffset({ left, top })} />
</div>
</div>);
}
}
import * as React from 'react';
import {SpreadSheets, Worksheet} from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const Component = React.Component, useState = React.useState, spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
isGridLinePanel: true
};
}
initSpread(spread) {
let self = this;
self.spread = spread;
spread.addSheet(1);
this.initSheetBorderAndGridLine();
this.initSheetAreaSheet();
let gridlineSheet = spread.getSheet(0);
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) {
let isGridLinePanel;
if (args.newSheet === gridlineSheet) {
isGridLinePanel = true;
} else {
isGridLinePanel = false;
}
self.setState({isGridLinePanel: isGridLinePanel});
});
}
initSheetBorderAndGridLine() {
let spread = this.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
let lineBorder1 = new spreadNS.LineBorder('blue', spreadNS.LineStyle.thin);
let range = sheet.getRange(7, 1, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderLeft(new spreadNS.LineBorder('red', spreadNS.LineStyle.double));
range = sheet.getRange(7, 4, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderTop(new spreadNS.LineBorder('green', spreadNS.LineStyle.medium));
range = sheet.getRange(7, 7, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderRight(new spreadNS.LineBorder('black', spreadNS.LineStyle.dashed));
range = sheet.getRange(7, 10, 2, 2);
range.setBorder(lineBorder1, { outline: true });
range.borderBottom(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thick), { all: true });
range.diagonalUp(new spreadNS.LineBorder('orange', spreadNS.LineStyle.thin));
range = sheet.getRange(11, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.hair), { all: true });
range.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
range = sheet.getRange(11, 7, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.mediumDashed), { all: true });
range.diagonalUp(new spreadNS.LineBorder('plum', spreadNS.LineStyle.double));
range.diagonalDown(new spreadNS.LineBorder('brown', spreadNS.LineStyle.thick));
range = sheet.getRange(11, 10, 2, 2);
range.setBorder(new spreadNS.LineBorder('orange', spreadNS.LineStyle.dashDot), { all: true });
range = sheet.getRange(17, 1, 2, 5);
range.setBorder(lineBorder1, { outline: true });
range = sheet.getRange(17, 1, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.slantedDashDot), { inside: true });
range = sheet.getRange(17, 4, 2, 2);
range.setBorder(new spreadNS.LineBorder('brown', spreadNS.LineStyle.mediumDashed), { inside: true });
range = sheet.getRange(16, 7, 7, 4);
range.setBorder(new spreadNS.LineBorder('plum', spreadNS.LineStyle.thick), {
left: true,
bottom: true
});
range = sheet.getRange(15, 8, 7, 4);
range.setBorder(new spreadNS.LineBorder('royalblue', spreadNS.LineStyle.slantedDashDot), {
top: true,
right: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('tomato', spreadNS.LineStyle.dashDot), {
left: true,
bottom: true
});
range = sheet.getRange(16, 8, 6, 3);
range.setBorder(new spreadNS.LineBorder('palegreen', spreadNS.LineStyle.mediumDashed), {
top: true,
right: true
});
range = sheet.getRange(16, 9, 5, 2);
range.setBorder(new spreadNS.LineBorder('violet', spreadNS.LineStyle.dotted), {
left: true,
bottom: true
});
range = sheet.getRange(17, 8, 5, 2);
range.setBorder(new spreadNS.LineBorder('skyblue', spreadNS.LineStyle.hair), {
top: true,
right: true
});
sheet.addSpan(17, 9, 2, 1);
range = sheet.getRange(17, 9, 2, 1);
range.setBorder(new spreadNS.LineBorder('purple', spreadNS.LineStyle.thin), { all: true });
sheet.setArray(1, 3, [
[ 'Gender', 'Phone Number', 'Address' ],
[ 'woman', '021-432668', 'Chester Road' ],
[ 'man', '021-432238', 'Gertt Road' ],
[ 'man', '021-432533', 'Jnyliner Road' ],
[ 'man', '021-432125', 'Approach Road' ]
]);
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(1, 2, style, 3);
sheet.setText(1, 2, ' Info Name', spreadNS.SheetArea.viewport);
let cell = sheet.getCell(1, 2);
cell.diagonalDown(new spreadNS.LineBorder('purple', spreadNS.LineStyle.dotted));
sheet.setStyle(1, 3, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 4, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1, 5, style, GC.Spread.Sheets.SheetArea.viewport);
sheet.setText(2, 2, 'John', spreadNS.SheetArea.viewport);
sheet.setText(3, 2, 'linda', spreadNS.SheetArea.viewport);
sheet.setText(4, 2, 'henry', spreadNS.SheetArea.viewport);
sheet.setText(5, 2, 'smith', spreadNS.SheetArea.viewport);
sheet.setRowHeight(1, 30);
sheet.setColumnWidth(4, 120);
sheet.setColumnWidth(5, 120);
range = sheet.getRange(1, 2, 5, 4);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.thin), { all: true });
sheet.resumePaint();
}
initSheetAreaSheet() {
let sheet = this.spread.getSheet(1);
sheet.suspendPaint();
sheet.name('SheetAreaOffset');
let data = sheetAreaJSON;
sheet.fromJSON(data);
sheet.options.colHeaderVisible = false;
sheet.options.rowHeaderVisible = false;
sheet.options.sheetAreaOffset = {
left: 2,
top: 2
};
let range = sheet.getRange(0, 0, 3, 10);
range.setBorder(new spreadNS.LineBorder('black', spreadNS.LineStyle.double), {
left: true,
bottom: true,
top: true,
right: true
});
sheet.resumePaint();
}
setGridline ($event) {
let sheet = this.spread.getActiveSheet();
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = $event.target.checked;
sheet.options.gridline.showVerticalGridline = $event.target.checked;
sheet.resumePaint();
}
setHeaderVisible ($event) {
let sheet = this.spread.getActiveSheet();
sheet.options.rowHeaderVisible = $event.target.checked;
sheet.options.colHeaderVisible = $event.target.checked;
}
setOffset (position) {
let sheet = this.spread.getActiveSheet();
let left = position.left,
top = position.top;
sheet.options.sheetAreaOffset = {
left: parseInt(left, 10),
top: parseInt(top, 10)
}
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<Panel
isGridLinePanel={this.state.isGridLinePanel}
setGridline={(e) => this.setGridline(e)}
setHeaderVisible={(e) => this.setHeaderVisible(e)}
setOffset={(position) => this.setOffset (position)}
></Panel>
</div>
);
}
}
function TextInput(props) {
const [value, setValue] = useState(props.value);
return (
<input type="number" value={value} onChange={(e) => {
setValue(e.target.value);
props.onChange(e)
}}/>
);
}
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);
this.left = "";
this.top = "";
}
render () {
let props = this.props, panel;
if (props.isGridLinePanel) {
panel = (
<div className="options-container">
<div className="options-row">
<CheckBoxInput id="showGridLine" checked={false} onChange={props.setGridline}></CheckBoxInput>
<label htmlFor="showGridLine">ShowGridLine</label>
</div>
</div>
);
} else {
panel = (
<div className="options-container">
<div className="options-row">
<CheckBoxInput id="headerVisible" checked={false} onChange={props.setHeaderVisible}></CheckBoxInput>
<label htmlFor="headerVisible">HeaderVisible</label>
</div>
<div className="options-row">
<label htmlFor="left">left:</label>
<TextInput id="left" value={this.left} onChange={(e) => {this.left = e.target.value;}}></TextInput>
</div>
<div className="options-row">
<label htmlFor="top">top:</label>
<TextInput id="top" value={this.top} onChange={(e) => {this.top = e.target.value;}}></TextInput>
</div>
<div className="options-row">
<input type="button" value="Set Sheet Area Offset" onClick={() => {let position = {left:this.left, top:this.top};props.setOffset(position);}}/>
</div>
</div>
);
}
return panel;
}
}
<!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/sheetAreaData.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
width: 40px;
display: inline-block;
margin-bottom: 6px;
}
(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/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);
