Handontableが5つ以上の列を表示しない

Question

私はcolHeadersプロパティを使用してヘッダーを設定しました。私は5つの以上の列 コードのデータを貼り付けるまで だけ最初の5つが表示されている：

var dataPrePop =["1","2","3","4","5","6","7","8"] 
var container = document.getElementById('example'); 
var hot = new Handsontable(container, { 
    colHeaders: dataPrePop, 
    contextMenu: true 
}); 

完全なソースコード -

var dataPrePop = ["1", "2", "3", "4", "5", "6", "7", "8"] 
 

 
var container = document.getElementById('example'); 
 

 
var hot = new Handsontable(container, { 
 
    colHeaders: dataPrePop, 
 
    //minSpareCols: 1, 
 
    //minSpareRows: 1, 
 
    //rowHeaders: true, 
 
    //colHeaders: true, 
 
    contextMenu: true 
 
});

body { 
 
    margin: 20px 30px; 
 
    font-size: 13px; 
 
    font-family: 'Open Sans', Helvetica, Arial; 
 
} 
 

 
a { 
 
    color: #34A9DC; 
 
    text-decoration: none; 
 
} 
 

 
p { 
 
    margin: 5px 0 20px; 
 
} 
 

 
h2 { 
 
    margin: 20px 0 0; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
}

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" /> 
 
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script> 
 
<h2>Handsontable Basic Example (100x10)</h2> 
 
<p> 
 
    Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable. 
 
</p> 
 

 
<div id="example"></div>

jsfiddle

Answer 1

私はこれと思うあなたのために動作します -

したい場合は、minCols

minCols: 8 // -- this will do your job 

はあなたのための作業のサンプルを作成しています設定することができます。 2の方法は、以下のサンプルでdata

を使用しなければならない

var dataPrePop = ["1", "2", "3", "4", "5", "6", "7", "8"] 
 

 
var container = document.getElementById('example'); 
 

 
var hot = new Handsontable(container, { 
 
    colHeaders: dataPrePop, 
 
    minCols: 8, 
 
    //minSpareCols: 1, 
 
    //minSpareRows: 1, 
 
    //rowHeaders: true, 
 
    //colHeaders: true, 
 
    contextMenu: true 
 
});

body { 
 
    margin: 20px 30px; 
 
    font-size: 13px; 
 
    font-family: 'Open Sans', Helvetica, Arial; 
 
} 
 

 
a { 
 
    color: #34A9DC; 
 
    text-decoration: none; 
 
} 
 

 
p { 
 
    margin: 5px 0 20px; 
 
} 
 

 
h2 { 
 
    margin: 20px 0 0; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
}

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" /> 
 
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script> 
 
<h2>Handsontable Basic Example (100x10)</h2> 
 
<p> 
 
    Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable. 
 
</p> 
 

 
<div id="example"></div>

＃createSpreadsheetData(5, 8)は、テーブルの列と行の数を扱います。

var dataPrePop = Handsontable.helper.createSpreadsheetData(5, 8); 
 

 
var container = document.getElementById('example'); 
 

 
var hot = new Handsontable(container, { 
 
    data: dataPrePop, 
 
    //minSpareCols: 1, 
 
    //minSpareRows: 1, 
 
    //rowHeaders: true, 
 
    //colHeaders: true, 
 
    contextMenu: true 
 
});

body { 
 
    margin: 20px 30px; 
 
    font-size: 13px; 
 
    font-family: 'Open Sans', Helvetica, Arial; 
 
} 
 

 
a { 
 
    color: #34A9DC; 
 
    text-decoration: none; 
 
} 
 

 
p { 
 
    margin: 5px 0 20px; 
 
} 
 

 
h2 { 
 
    margin: 20px 0 0; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
}

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" /> 
 
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script> 
 
<h2>Handsontable Basic Example (100x10)</h2> 
 
<p> 
 
    Head to <a href="https://handsontable.com" target="_blank">handsontable.com</a> to learn more about Handsontable. 
 
</p> 
 

 
<div id="example"></div>

は、私は、これは参考になりました願っています。