Drag Header To Move Rows or Columns

SpreadJS allows you to move rows or columns by drag row or column headers. First select the row or column headers, then drag the selected row or column headers to move the rows or columns: Users can specifies how to allow drag header to move through the following API: The available options in GC.Spread.Sheets.AllowDragHeaderToMove: none: Specifies that no drag header to move allowed. column: Specifies that only the column header allow to move. row: Specifies that only the row header allow to move. both: Specifies that both column and row header allow to move.

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 { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const useState = React.useState;
export function AppFunc() {
const [spread, setSpread] = useState(null);
const initSpread = async (spread) => {
setSpread(spread);
const loadingTip = addLoadingTip();
const res = await fetch('$DEMOROOT$/en/sample/features/worksheet/drag-header-to-move/spread.json');
await spread.fromJSON(await res.json());
spread.options.allowDragHeaderToMove = GC.Spread.Sheets.AllowDragHeaderToMove.none;
loadingTip.remove();
}
const dragHeaderToMoveChange = ($event) => {
spread.options.allowDragHeaderToMove = $event.target.value;
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<PanelFunc
dragHeaderToMoveChange={(e) => dragHeaderToMoveChange(e)}
></PanelFunc>
</div>
);
}
function addLoadingTip() {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.inset = '0';
div.style.display = 'flex';
div.style.alignItems = 'center';
div.style.justifyContent = 'center';
div.style.background = 'white';
div.style.zIndex = '100';
div.textContent = 'Loading data from server ...';
document.body.appendChild(div);
return div;
}
function SelectInput(props) {
const [value, setValue] = useState(props.value);
const renderSelectOptions = (options) => {
let optionElems = [];
for (let i = 0; i < options.length; i++) {
optionElems.push(<option value={options[i].value}>{options[i].text}</option>);
}
return optionElems;
}
return (
<select
id={props.id}
className={props.className}
value={value}
name={props.name}
onChange={(e) => {
setValue(e.target.value);
props.onChange(e);
}}
>
{renderSelectOptions(props.options)}
</select>
);
}
function PanelFunc(props) {
const allowDragHederToMoveOptions = [{
value: 0,
text: "None"
}, {
value: 1,
text: "Column"
}, {
value: 2,
text: "Row"
}, {
value: 3,
text: "Both"
}];
return (
<div className="options-container">
<div class="option-row">
<p>First select the row or column headers, then drag the selected row or column headers to move the rows or columns.</p>
</div>
<hr />
<div class="option-row">
<p>Set the options below to specify how to allow drag header to move.</p>
</div>
<div class="option-row">
<label htmlFor="allowDragHeaderToMove">Drag header to move:</label>
<SelectInput id="allowDragHeaderToMove" value={0} onChange={props.dragHeaderToMoveChange}
options={allowDragHederToMoveOptions}></SelectInput>
</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;
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>
<Panel
dragHeaderToMoveChange={(e) => this.dragHeaderToMoveChange(e)}
></Panel>
</div>
);
}
async initSpread(spread) {
this.spread = spread;
const loadingTip = addLoadingTip();
const res = await fetch('$DEMOROOT$/en/sample/features/worksheet/drag-header-to-move/spread.json');
await spread.fromJSON(await res.json());
spread.options.allowDragHeaderToMove = GC.Spread.Sheets.AllowDragHeaderToMove.none;
loadingTip.remove();
}
dragHeaderToMoveChange($event) {
const spread = this.spread;
spread.options.allowDragHeaderToMove = $event.target.value;
}
}
function addLoadingTip() {
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.inset = '0';
div.style.display = 'flex';
div.style.alignItems = 'center';
div.style.justifyContent = 'center';
div.style.background = 'white';
div.style.zIndex = '100';
div.textContent = 'Loading data from server ...';
document.body.appendChild(div);
return div;
}
function SelectInput(props) {
const [value, setValue] = useState(props.value);
function renderSelectOptions(options) {
let optionElems = [];
for (let i = 0; i < options.length; i++) {
optionElems.push(<option value={options[i].value}>{options[i].text}</option>);
}
return optionElems;
}
return (
<select
id={props.id}
className={props.className}
value={value}
name={props.name}
onChange={(e) => {
setValue(e.target.value);
props.onChange(e);
}}
>
{renderSelectOptions(props.options)}
</select>
);
}
class Panel extends Component {
render() {
const self = this, props = self.props;
const allowDragHederToMoveOptions = [{
value: 0,
text: "None"
}, {
value: 1,
text: "Column"
}, {
value: 2,
text: "Row"
}, {
value: 3,
text: "Both"
}];
return (
<div className="options-container">
<div class="option-row">
<p>First select the row or column headers, then drag the selected row or column headers to move the rows or columns.</p>
</div>
<hr/>
<div class="option-row">
<p>Set the options below to specify how to allow drag header to move.</p>
</div>
<div class="option-row">
<label htmlFor="allowDragHeaderToMove">Drag header to move:</label>
<SelectInput id="allowDragHeaderToMove" value={0} onChange={props.dragHeaderToMoveChange}
options={allowDragHederToMoveOptions}></SelectInput>
</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;
}
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;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
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/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);

Feedback