JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://apis.google.com/js/api.js"></script>
<div id="tbl">
  <table>
    <caption>Sales volume</caption>
  </table>
</div>

CSS

html, body, #tbl {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
  background-color: #cecece;
}

th {
  height: 70px;
}

tr {
  height: 35px;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

caption {
  padding: 20px;
  color: #495366;
  text-align: left;
  letter-spacing: 1px;
}

JavaScript

const start = () => {
  // Initialize the JavaScript client library
  gapi.client.init({
    'apiKey': '{GOOGLE_API_KEY}',
    'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  }).then(() => {
    return gapi.client.sheets.spreadsheets.values.get({
      spreadsheetId: '{SPREADSHEET_ID}',
      range: '{SHEET_NAME}!{DATA_RANGE}', // for example: List 1!A1:B6
    })
  }).then((response) => {
    // Parse the response data
    const loadedData = response.result.values;

    // populate HTML table with data
    const table = document.getElementsByTagName('table')[0];
    
    // add column headers
    const columnHeaders = document.createElement('tr');
    columnHeaders.innerHTML = `<th>${loadedData[0][0]}</th>
<th>${loadedData[0][1]}</th>`;
    table.appendChild(columnHeaders);

    // add table data rows
    for (let i = 1; i < loadedData.length; i++) {
      const tableRow = document.createElement('tr');
      tableRow.innerHTML = `<td>${loadedData[i][0]}</td>
<td>${loadedData[i][1]}</td>`;
      table.appendChild(tableRow);
    }
  }).catch((err) => {
  	console.log(err.error.message);
  });
};

// Load the JavaScript client library
gapi.load('client', start);