I’m getting an error message when trying to add a new column to the end of my handsontable table
Error: Cannot create new column. When data source in an object, you can only have as much columns as defined in first data row, data schema or in the ‘columns’ setting.If you want to be able to add new columns, you have to use array datasource.
<!--
Error: Cannot create new column. When data source is an object, you can only have as many columns as defined in the first data row, data schema, or in the 'columns' setting.
If you want to be able to add new columns, you have to use an array data source.
-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<div class="mt-3">
<h2 id="dadoslab">Laboratory Data</h2>
<button type="button" class="m-3 btn btn-primary" id="add-test">Add test</button>
<div class="container">
<div id="exam-table-container"></div>
</div>
<button type="button" class="m-3 btn btn-primary" id="add-test-2">Add test</button>
<input type="hidden" name="handsontable_data" id="handsontable_data">
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById('exam-table-container');
// Initial data definition as a two-dimensional array
const data = [
['test Date'],
['test'],
];
// Handsontable initialization
const hot = new Handsontable(container, {
data: data,
colHeaders: function (colIndex) {
if (colIndex === 0) {
return 'Exam'; // Header for the first column
}
return `Exam ${colIndex}`; // Dynamic headers for other columns
},
columns: [
{ readOnly: true },
{
type: 'date',
dateFormat: 'DD/MM/YYYY',
correctFormat: true,
defaultDate: moment().format('DD/MM/YYYY'),
datePickerConfig: {
firstDay: 1, // Monday
showWeekNumber: true,
i18n: {
previousMonth: 'Previous month',
nextMonth: 'Next month',
months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
weekdaysShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
},
disableDayFn: function(date) {
return date.getDay() === 0 || date.getDay() === 6; // Disable Sunday and Saturday
}
}
}
],
cells: function(row, col) {
var cellProperties = {};
if (row === 0) {
cellProperties.type = 'date';
} else {
cellProperties.type = 'text';
}
return cellProperties;
},
rowHeaders: true,
stretchH: 'all',
width: '100%',
height: 'auto',
contextMenu: true,
});
// Add a new column when the button is clicked
document.getElementById('add-test').addEventListener('click', function() {
hot.alter('insert_col_end');
});
document.getElementById('add-test-2').addEventListener('click', function() {
hot.alter('insert_col_end');
});
});
</script>
When you use a columns
or object-based dataset, adding columns via the context menu option is blocked. This happens because, underneath, Handsontable uses the later()
method.
In this case you need to create a custom context menu and alter the columns array, like
cols.push({});
hot.updateSettings({
columns: cols
})