Handsontable example

HTML

<span style="color: red;">B4 cell  I expect to be 3,000</span>
<div id="hot1"></div>

<hr>
<span style="color: red;">my solution, but I don't know how to show with comma</span>
<div id="hot2"></div>

CSS

</style><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable-pro@latest/dist/handsontable.full.min.css"><link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css"><script src="https://cdn.jsdelivr.net/npm/handsontable-pro@latest/dist/handsontable.full.min.js"></script>

JavaScript

var hotElement1 = document.querySelector('#hot1');
var hotSettings1 = {
  data: [
    ['A1','1,000', '1'],
    ['A2','1,000',  '1'],
    ['A3','1,000',  '1'],
    ['sum', '=SUM(B1:B3)', '=SUM(C1:C3)'],
  ],
  stretchH: 'all',
  width: 806,
  autoWrapRow: true,
  height: 487,
  formulas: true,
  contextMenu: true,
  maxRows: 22,
  rowHeaders: true,
  colHeaders: true,
};
var hot1 = new Handsontable(hotElement1, hotSettings1);

// split line

var hotElement2 = document.querySelector('#hot2');
var hotSettings2 = {
  data: [
    ['1', '1', '1'],
    ['1', '1', '1'],
    ['1', '1', '1'],
    ['=SUM(A1:A3)', '=SUM(B1:B3)', '=SUM(C1:C3)'],
  ],
  stretchH: 'all',
  width: 806,
  autoWrapRow: true,
  height: 487,
  formulas: true,
  contextMenu: true,
  maxRows: 22,
  rowHeaders: true,
  colHeaders: true,
  beforePaste(data, coords) {
    data.forEach((rows, row) => {
      rows.forEach((cell, col) => {
        // replace number with comma
        if (/\d{1,3}(,\d{3})*(.\d+)?/.test(cell)) {
          data[row][col] = cell.replace(/,/g, '')
        }
      })
    })
  },
};
var hot2 = new Handsontable(hotElement2, hotSettings2);