How to get the data filled column index in spreadsheet?

 <button className="e-control e-btn" id="btn" role="button"> Get used Columns </button> 
<div id="spreadsheet"></div>

//Initialize Spreadsheet component
let spreadsheet: Spreadsheet = new Spreadsheet({
  sheets: [
    {
      name: 'Car Sales Report',
      ranges: [{ dataSource: (dataSource as any).defaultData }],
      columns: [
        { width: 180 },
        { width: 130 },
        { width: 130 },
        { width: 180 },
        { width: 130 },
        { width: 120 },
        { width: 130 },
      ],
    },
  ],
  created: (): void => {
    //Applies cell and number formatting to specified range of the active sheet
    spreadsheet.cellFormat(
      { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
      'A1:G1'
    );
    spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
  },
});
document.getElementById("btn").onclick = () => {
        var sheet = spreadsheet.getActiveSheet();
        var lastColumn = sheet.usedRange.colIndex;
        var lastRow = sheet.usedRange.rowIndex;
        var activeColums = [];
        var header_collection = spreadsheet.element.getElementsByClassName('e-header-cell');
        for (let i = 0; i <= lastColumn; i++) {
            for (let j = 0; j <= lastRow; j++) {
                let cell = getCell(j, i, sheet);
                if (cell && cell.value) {
                    activeColums.push(i + ',' + header_collection[i].innerText);
                    break;
                }
            }
        }
        console.log(activeColums);
    };
 
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');