Pages Missing Components

[Darren_Murphy]

This one is quite complicated, I talked a bit about how it is generated below:

How would you describe a helper table?

@erwblo - I saw Bob Petitto mention something about golf last night… … which reminded me of one of my most “extreme” uses of a Helper Table. I have a Golf App that tracks scores in PGA Tour events, pulling in scores via an API every 5 minutes when an event is on. When the scores hit my App, they go into a table that looks like so: [Screen Shot 2023-01-30 at 10.14.12 AM] GolferID should be obvious, Raw is a comma separated list of their scores - 72 holes for a 4 round tournament. I use a 7…

There are actually 3 separate tables there, all dynamically generated. But it takes more than 100 computed columns to do it. Here is what the generated HTML looks like for the first one:

<table class="scorecard">
  <thead>
    <tr>
      <th colspan="11">Scorecard</th>
    </tr>
    <tr>
      <th></th>
      <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td class="parRow">Par</td>
      <td class="parRow">4</td><td class="parRow">5</td><td class="parRow">4</td><td class="parRow">3</td><td class="parRow">5</td><td class="parRow">4</td><td class="parRow">3</td><td class="parRow">4</td><td class="parRow">4</td>
      <td class="parRow">36</td>       
    </tr>
    <tr>
   <td>R1</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="par">3</div></td><td><div class="birdie">4</div></td><td><div class="bogie">5</div></td><td><div class="par">3</div></td><td><div class="par">4</div></td><td><div class="birdie">3</div></td>
  <td>34</td>       
</tr><tr>
   <td>R2</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="bogie">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="par">3</div></td><td><div class="par">4</div></td><td><div class="birdie">3</div></td>
  <td>34</td>       
</tr><tr>
   <td>R3</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="eagle">2</div></td><td><div class="par">3</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="birdie">2</div></td><td><div class="birdie">3</div></td><td><div class="par">4</div></td>
  <td>30</td>       
</tr><tr>
   <td>R4</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="par">3</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="bogie">4</div></td><td><div class="par">4</div></td><td><div class="par">4</div></td>
  <td>35</td>       
</tr>
  </tbody>
</table>

And the CSS that it uses:

<pre><span><style>
table.scorecard {
  font-family: Arial, Helvetica, sans-serif;
  border: 3px solid #a9a9a9;
  background-color: #1c4587;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
}
  
table.scorecard td, table.scorecard th {
  border: 1px solid #fff;
  padding: 3px 2px;
}
table.scorecard tbody td {
  font-size: 12px;
  color: #fff;
  height: 25px;
}
table.scorecard tbody tr:nth-child(even) {
  background: #0B6FA4;
}
table.scorecard thead {
  background: #1c4587;
}
table.scorecard td.parRow {
  font-size: 13px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  height: 20px;
}

table.scorecard thead th {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-left: 1px solid #fff;
}

table.scorecard td:first-child {
  background: #000;
  font-weight: bold;
}

table.scorecard td:last-child {
  background: #000;
  font-weight: bold;
}

table.scorecard tfoot {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #A40808;
}

.eagle  {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 4px double #fff;
  color: #fff;
  font: 12px Arial, sans-serif;
}

.birdie {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  color: #fff;
  padding-top: 1px;
  font: 12px Arial, sans-serif;
}

.bogie {
  border-radius: 0%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  color: #fff;
  padding-top: 2px;
  font: 12px Arial, sans-serif;
}

.double {
  border-radius: 0%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 4px double #fff;
  color: #fff;
  font: 12px Arial, sans-serif;
}

table.summary {
  font-family: Arial, Helvetica, sans-serif;
  border: 3px solid #a9a9a9;
  background-color: #1c4587;
  width: 90%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
}
  
table.summary td, table.summary th {
  border: 1px solid #fff;
  padding: 3px 2px;
}
table.summary tbody td {
  font-size: 12px;
  color: #fff;
  height: 25px;
}
table.summary tbody tr:nth-child(even) {
  background: #0B6FA4;
}
table.summary thead {
  background: #1c4587;
}
table.summary td.subheader {
  font-size: 13px;
  font-weight: bold;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  height: 15px;
}

table.summary thead th {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-left: 1px solid #fff;
}

table.summary td:first-child {
  background: #000;
  font-weight: bold;
}

table.summary tfoot {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #228b22;
}

Note that this sort of approach only works with Classic Apps. With new Glide Apps, unless you are on a Business or Enterprise plan, all the styling would need to be done inline.