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.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="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">
<label>Set the options below to specify how to allow drag header to move.</label>
</div>
<div class="option-row">
<label for="allowDragHeaderToMove">Drag header to move:</label>
<select name="allowDragHeaderToMove" id="allowDragHeaderToMove" v-model="allowDragHeaderToMoveRef">
<option v-for="item of allowDragHederToMoveOptionsRef" :value="item.value">{{ item.text }}</option>
</select>
</div>
</div>
</div>
</template>
<script setup>
import GC from '@mescius/spread-sheets';
import { ref, watch } from "vue";
import "@mescius/spread-sheets-vue";
const spreadRef = ref(null);
const allowDragHederToMoveOptionsRef = ref([{
value: 0,
text: "None"
}, {
value: 1,
text: "Column"
}, {
value: 2,
text: "Row"
}, {
value: 3,
text: "Both"
}]);
const allowDragHeaderToMoveRef = ref(0);
let initSpread = async function (spread) {
spreadRef.value = 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();
}
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;
}
watch(allowDragHeaderToMoveRef, (value) => {
let spread = spreadRef.value;
spread.options.allowDragHeaderToMove = value;
});
</script>
<style scoped>
#app {
height: 100%;
}
.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 {
display: inline-block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
