Handsontable添加列报错：无法创建新列问题咨询

报错信息 #

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.

问题原因 #

代码中通过columns配置项固定了列的数量和属性，Handsontable会将这种配置认定为固定列结构，即便数据源是数组，也不允许动态新增列。

解决方案 #

移除固定的columns配置，将列属性逻辑统一放到cells函数中处理，让Handsontable基于数组数据源动态适配列数量：

• 删除columns配置块
• 在cells函数中添加第一列的只读判断
• 保留原有的行类型判断逻辑，同时将日期列的配置整合到cells中

修改后的完整代码 #

<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
            },
            cells: function(row, col) {
                var cellProperties = {};
                // 第一列设置为只读
                if (col === 0) {
                    cellProperties.readOnly = true;
                }
                // 第一行设置为日期类型，其他行文本类型
                if (row === 0) {
                    cellProperties.type = 'date';
                    cellProperties.dateFormat = 'DD/MM/YYYY';
                    cellProperties.correctFormat = true;
                    cellProperties.defaultDate = moment().format('DD/MM/YYYY');
                    cellProperties.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
                        }
                    };
                } 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>

内容的提问来源于stack exchange，提问作者ViniciusDevelopment