In this sample, you can see that long text is cut off within cells. You can resize the width or height of columns and rows with the autoFitColumn and autoFitRow methods. You can also set wordWrap on cells with multiline content.
You can also select multiple columns or rows or the entire sheet and double-click on one selected column or row to apply AutoFit to all the selected columns or rows.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
// set style
sheet.setSelection(0,0,10,3);
// set text
const multilineData = [
[
"Alpha beta gamma\ndelta epsilon zeta\neta theta iota\nkappa lambda mu",
"Quick brown fox\njumps over\nthe lazy dog\nspreadjs demo",
"Apple banana\norange mango\npear peach\nplum cherry"
],
[
"Line one here\nline two longer text\nline three end",
"Random words\nwith multiple\nline breaks\ninside cell",
"First row of text\nsecond row\nthird row\nfourth row"
],
[
"Sun moon stars\ngalaxy universe\nblack hole\nsupernova pulsar",
"Dog cat bird\nfish rabbit\nhamster snake\nparrot lizard",
"Programming\nJavaScript\nC++\nPython Rust\nGo"
],
[
"SpreadJS demo\nmultiline cell\nwrap text test\nalignment check",
"North east\nsouth west\ncenter middle\ndirection flow",
"Alpha numeric\nsymbols & signs\nrandom text\nunicode chars"
],
[
"One two three\nfour five six\nseven eight nine\nten eleven",
"Row with\ntaller text\nthat wraps\nin cell",
"Test data\ndemo content\nexample usage\npractice sample"
],
[
"Overlapping\nmultiline\ntesting row\nwrapped content",
"Red green blue\nyellow cyan magenta\nblack white gray",
"East west\nnorth south\ncompass points\nmap directions"
],
[
"Final example\nlast row\nending text\nspreadjs autofit",
"This is a\nvery long line\nthat should\nwrap inside cell",
"Dynamic content\nrandom words\nfiller text\nlonger sample"
],
[
"Table data\nrow eight\ncolumn one\nmulti line text",
"Sample values\nspreadsheet demo\nrich text\nalignment mode",
"Autofit row\nautofit column\nwrap toggle\nword wrap"
],
[
"Testing justify\nalignment demo\nword wrap case",
"Paragraph one\nparagraph two\nparagraph three",
"East side\nwest side\nnorth area\nsouth block"
],
[
"Demo finished\nlast row\nwith content\nspreadjs showcase",
"Final test cell\nend of data\nmultiline wrap",
"Goodbye row\nlast sample\ntesting done"
]
];
sheet.setArray(0, 0, multilineData);
sheet.resumePaint();
document.getElementById('autofit-column').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
for (let c = startCol; c < endCol; c++) {
sheet.autoFitColumn(c);
}
});
sheet.resumePaint();
};
document.getElementById('autofit-row').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
for (let r = startRow; r < endRow; r++) {
sheet.autoFitRow(r);
}
});
sheet.resumePaint();
};
document.getElementById('wrap').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
let cellStyle = sheet.getStyle(r, c) || new GC.Spread.Sheets.Style();
let currentWrap = cellStyle.wordWrap || false;
cellStyle.wordWrap = !currentWrap;
sheet.setStyle(r, c, cellStyle);
}
}
});
sheet.resumePaint();
};
document.getElementById('toggle-wrap-autoFit').onclick = function () {
const selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
selections.forEach(sel => {
const startRow = sel.row;
const endRow = sel.row + sel.rowCount;
const startCol = sel.col;
const endCol = sel.col + sel.colCount;
// toggle wrap
for (let r = startRow; r < endRow; r++) {
for (let c = startCol; c < endCol; c++) {
let cellStyle = sheet.getStyle(r, c) || new GC.Spread.Sheets.Style();
let currentWrap = cellStyle.wordWrap || false;
cellStyle.wordWrap = !currentWrap;
sheet.setStyle(r, c, cellStyle);
}
}
// autofit col
for (let c = startCol; c < endCol; c++) {
sheet.autoFitColumn(c);
}
// autofit row
for (let r = startRow; r < endRow; r++) {
sheet.autoFitRow(r);
}
});
sheet.resumePaint();
};
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script
src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<input type="button" value="AutoFit Column Width" id="autofit-column" />
<input type="button" value="AutoFit Row Height" id="autofit-row" />
<input type="button" value="Toggle Wrap" id="wrap" />
<input type="button" value="Toggle Wrap & AutoFit" id="toggle-wrap-autoFit" />
</div>
</div>
</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 {
display: block;
width: 150px;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input {
padding: 4px 6px;
margin-bottom: 6px;
margin-right: 5px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
