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.
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, Column} from '@mescius/spread-sheets-react';
import './styles.css';
const useState = React.useState;
export function AppFunc() {
const [spread, setSpread] = useState(null);
const initSpread = (spread) =>{
setSpread(spread);
let sheet = spread.getActiveSheet();
sheet.setColumnWidth(0, "2*");
sheet.setColumnWidth(2, "*");
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet dataSource={window.dataSource} autoGenerateColumns={false}>
<Column dataField='Film'></Column>
<Column dataField='Genre' width={70}></Column>
<Column dataField='Lead Studio'></Column>
<Column dataField='Audience Score %' width={110}></Column>
<Column dataField='Profitability' width={80}></Column>
<Column dataField='Rating'></Column>
<Column dataField='Worldwide Gross' width={110}></Column>
<Column dataField='Year'></Column>
</Worksheet>
</SpreadSheets>
</div>
<Panel></Panel>
</div>
);
}
function Panel () {
return (
<div class="options-container">
<div className="option-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>
);
}
import * as React from 'react';
import {SpreadSheets, Worksheet, Column} from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.dataSource = dataSource;
this.autoGenerateColumns = false;
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet dataSource={this.dataSource} autoGenerateColumns={this.autoGenerateColumns}>
<Column dataField='Film'></Column>
<Column dataField='Genre' width={70}></Column>
<Column dataField='Lead Studio'></Column>
<Column dataField='Audience Score %' width={110}></Column>
<Column dataField='Profitability' width={80}></Column>
<Column dataField='Rating'></Column>
<Column dataField='Worldwide Gross' width={110}></Column>
<Column dataField='Year'></Column>
</Worksheet>
</SpreadSheets>
</div>
<Panel></Panel>
</div>
);
}
initSpread(spread) {
this.spread = spread;
let sheet = spread.getActiveSheet();
sheet.setColumnWidth(0, "2*");
sheet.setColumnWidth(2, "*");
}
}
function Panel () {
return (
<div class="options-container">
<div className="option-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>
);
}
<!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;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
input {
padding: 4px 6px;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
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/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);
