Introduction
Split resizing allows the user to change the width of two adjacent columns or rows as a splitter between the two. For example, resizing column A would also resize column B but keep the other columns the same size, preventing important data from being moved out of the visible area when resizing other rows/columns.
This feature is useful when creating precise report layouts and need to make small adjustments without impacting the overall layout.
You can set the ResizeMode to split to enable this feature for both rows and columns.
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 { useState } from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
export function AppFunc() {
const [spread, setSpread] = useState(null);
const initSpread = (spread) => {
setSpread(spread);
}
const changeRowResizeMode = (e) => {
let selectElement = e.target;
spread.options.rowResizeMode = parseInt(selectElement.options[selectElement.selectedIndex].value, 10);
}
const changeColumnResizeMode = (e) => {
let selectElement = e.target;
spread.options.columnResizeMode = parseInt(selectElement.options[selectElement.selectedIndex].value, 10);
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<p>Change the Resize Mode to Split to enable this feature. </p>
<p>For example, set Column Resize Mode to split. Now change the width of column A. Column B will automatically resize while the remaining columns will stay the same size.</p>
<label htmlFor="columnResizeMode">Column Resize Mode</label>
<select id="columnResizeMode" onChange={e => changeColumnResizeMode(e)}>
<option value={0}>normal</option>
<option value={1}>split</option>
</select>
</div>
<div className="option-row">
<label htmlFor="rowResizeMode">Row Resize Mode</label>
<select id="rowResizeMode" onChange={e => changeRowResizeMode(e)}>
<option value={0}>normal</option>
<option value={1}>split</option>
</select>
</div>
</div>
</div>;
}
import * as React from 'react';
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;
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<p>Change the Resize Mode to Split to enable this feature. </p>
<p>For example, set Column Resize Mode to split. Now change the width of column A. Column B will automatically resize while the remaining columns will stay the same size.</p>
<label htmlFor="columnResizeMode">Column Resize Mode</label>
<select id="columnResizeMode" onChange={e => this.changeColumnResizeMode(e)}>
<option value={0}>normal</option>
<option value={1}>split</option>
</select>
</div>
<div className="option-row">
<label htmlFor="rowResizeMode">Row Resize Mode</label>
<select id="rowResizeMode" onChange={e => this.changeRowResizeMode(e)}>
<option value={0}>normal</option>
<option value={1}>split</option>
</select>
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
let sheet = spread.getActiveSheet();
}
changeRowResizeMode(e) {
let spread = this.spread;
let selectElement = e.target;
spread.options.rowResizeMode = parseInt(selectElement.options[selectElement.selectedIndex].value, 10);
}
changeColumnResizeMode(e) {
let spread = this.spread;
let selectElement = e.target;
spread.options.columnResizeMode = parseInt(selectElement.options[selectElement.selectedIndex].value, 10);
}
}
<!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: 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;
padding: 5px;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=number] {
width: 40px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
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);
