Dynamic sizing, or proportional sizing, is used to make sure that columns and rows completely fill the viewport. When the viewport size is changed or the user adds/deletes/resizes any column or row, the columns/rows that have star sizing applied to them will automatically resize to fill the viewport.
This type of sizing can be used in conjunction with numbers to define a weighted proportion. For example, a column with a star size of "3" would fill 3 times that of a standard "" sized column in the viewport.
Use the setRowHeight and setColumnWidth methods to set the dynamic size.
Use the getRowHeight and getColumnWidth methods can get the actual size and the setting value.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet :dataSource="dataSourceRef" :autoGenerateColumns='autoGenerateColumns'>
<gc-column :dataField="'Film'" :width=160></gc-column>
<gc-column :dataField="'Genre'" :width=70></gc-column>
<gc-column :dataField="'Lead Studio'" :width=90></gc-column>
<gc-column :dataField="'Audience Score %'" :width=110></gc-column>
<gc-column :dataField="'Profitability'" :width=80></gc-column>
<gc-column :dataField="'Rating'"></gc-column>
<gc-column :dataField="'Worldwide Gross'" :width=110></gc-column>
<gc-column :dataField="'Year'"></gc-column>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="options-row">
<p>
The column "Film" and "Lead Studio" has been set to dynamic size. <br />
Change the browser size or resize the column or hide the column to see how the dynamic size works.
</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from "vue";
import "@mescius/spread-sheets-vue";
const spreadRef = ref(null);
const dataSourceRef = ref(dataSource);
const autoGenerateColumns = ref(true);
let initSpread = function (spread) {
spreadRef.value = spread;
let sheet = spread.getActiveSheet();
sheet.setColumnWidth(0, "2*");
sheet.setColumnWidth(2, "*");
}
</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;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
display: inline-block;
}
input[type="text"] {
width: 160px;
}
label {
display: inline-block;
margin-bottom: 6px;
width: 200px;
}
select {
width: 120px;
height: 35px;
}
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 src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></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);
