javascripterror-handlinghandsontable

How add a column in table handsontable


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>

https://codepen.io/ViniciusDevelopment/pen/qBzaqzm

https://jsfiddle.net/DevelopmentSagaz/mctf30jd/


Solution

  • 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.

    enter image description here

    In this case you need to create a custom context menu and alter the columns array, like

    cols.push({});
      hot.updateSettings({
        columns: cols
      })