Asynchronous and synchronous problems in bootstrap-table callback function

Question

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
// link Jquery & Web3.js
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="owner" data-formatter="ownerFormatter">Owner Address</th>
      <th data-field="balance" data-formatter="balanceFormatter">Balance</th>
    </tr>
  </thead>
</table>

<script>
  function ownerFormatter(value, row) {
    return '<span>'+value+'</span>';
  }

  async function balanceFormatter(value, row) {
    let wallet_address = row['owner'];
    let sss_balance = 0;
    //window.abi_json is defined elsewhere
    let MyContract = new web3.eth.Contract(window.abi_json,'0xC3028FbC1742a16A5D69dE1B334cbce28f5d7EB3');
    //According to the WEB3 document to read the balance of a certain currency online, console.log(sss_balance) can print the balance normally
    sss_balance = await MyContract.methods.balanceOf(wallet_address).call();
    //return balance
    return sss_balance;
  }
</script>

I want to make a table that lists user wallets and their balances in a certain currency on the Binance Smart Chain. The wallet addresses are all in data1.json, and the balance needs to be obtained from the chain in real time . The above balanceFormatter can print sss_balance normally in the function body, but can't return a normal floating point value. I know the reason for the error is that async can only return promise objects. Too bad