leaderboard:

get leaderboardTable(){
        // create table element
        var t = document.createElement("table");
        t.className = "table scores";
        //create table header
        var header = document.createElement("tr");
        var th1 = document.createElement("th");
        th1.innerText = "Name";
        header.append(th1);
        var th2 = document.createElement("th");
        th2.innerText = "Score";
        header.append(th2);
        t.append(header);

        this.table = t;

        return t;
    }

originally from settingscontrol.js:

get levelTable(){
        // create table element
        var t = document.createElement("table");
        t.className = "table levels";
        //create table header
        var header = document.createElement("tr");
        var th1 = document.createElement("th");
        th1.innerText = "#";
        header.append(th1);
        var th2 = document.createElement("th");
        th2.innerText = "Level Tag";
        header.append(th2);
        t.append(header);

        // Create table rows/data
        for(let i = 0, count = 1; i < GameEnv.levels.length; i++){
            if (GameEnv.levels[i].passive) //skip passive levels
                continue; 
            // add level to table
            var row = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.innerText = String(count++); //human counter
            row.append(td1);
            // place level name in button   
            var td2 = document.createElement("td");
            td2.innerText = GameEnv.levels[i].tag;
            row.append(td2);
            // listen for row click
            row.addEventListener("click",()=>{ // when player clicks on the row
                //transition to selected level
                GameControl.transitionToLevel(GameEnv.levels[i]); // resize event is triggered in transitionToLevel
            })
            // add level row to table
            t.append(row);
        }

        return t; //returns <table> element
    }

here’s our designed SASS:

.leaderboardDropDown {
  @include dark-mode-color; // use the dark mode color scheme
  border: none; // remove setting as sidebar collapse leaves residue line
  position: fixed;
  z-index: 3; // Position on Top of other elements, as well as ID buttons above
  // left: 0; // set the sidebar to be on the left side of the page
  top: 0; // calculated to be below the header and submenu 
  padding-top: 5px; 
  padding-bottom: 5px;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */
  // following are changed by JavaScript
  width: 0px;
  padding-left: 0px; 
  padding-right: 0px; 
  height: 75%;
  scroll-behavior: auto;

}
$dt-leaderboard: #b385eb;

.table.scores, th, tr, td {
  text-align: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.table.scores {
  th {
    background-color: #5f3692;
  }
  tr {
    td {
      border: 1px solid mix($dt-leaderboard, black, 50%);
      &:nth-child(odd) {
        background-color: $dt-leaderboard; // Background color for odd rows
      }
      &:nth-child(even) {
        background-color: mix($dt-leaderboard, gray, 60%); // Background color for even rows
      }
    }
  }
}

/// Table class
/// @description Key style is to present game levels and make it responsive with hover highlighting.
.table.levels {
  tr {
    cursor: pointer; // Change the cursor to a pointer when it hovers over a row
    td {
      border: 1px solid $dt-blue; // from dracula-highlight.scss
    }
    &:hover { // Change the background when a row is hovered over
      background-color: $dt-blue; // from dracula-highlight.scss

      td {
        background-color: inherit; // Make the background color of the td elements the same as the tr element
      }
    }
  }
}