The front end is similar to the excel framework handsontable

Homepage resources can be downloaded for free handsontable-v6.2.2

Look at the result

code first

 <div id="example"></div>
    var handsonId = 'example';
    initHandsonTable(handsonId);

    function initHandsonTable(handsonId) {
    
    
        var container = document.getElementById(handsonId);
        hot = new Handsontable(container, {
    
    
            width: 900,
            height: 640,
            // colWidths: 130, // 单元格宽
            // rowHeights: 30, // 单元格高
            minRows: 50, // 初始化行
            minCols: 11, // 初始化列
            rowHeaders: true, // 显示行号
            colHeaders: true, // 显示列号
            contextMenu: true, // 右击显示菜单
            language: 'zh-CN', // 语言
            manualColumnResize: true, // 列拉伸
            manualRowResize: true, // 行拉伸
            currentRowClassName: 'currentRow', // 行自动增宽
            currentColClassName: 'currentCol', // 列自动增高
            fixedColumnsLeft: 0, // 移动设备自动启用移动编辑和选择模式
            fixedRowsTop: 0,  // 移动设备自动启用移动编辑和选择模式
            mergeCells: [ // 合并单元格
                {
    
    row: 0, col: 0, rowspan: 1, colspan: 7}
            ],
            className: "htMiddle htCenter", // 单元格元素垂直居中
        });
        // 表头赋值
        setData(hot);

        function setData(hot) {
    
    
            hot.setDataAtCell(0, 0, 'handsontable');
        }

        // 刷新
        hot.render();
    }

If the data format is different from the one provided by the official website, hot.setDataAtCell() can be used for assignment;

For more gameplay, refer to handsontable