diff --git a/src/components/HistoricalBuildingDataTable.vue b/src/components/HistoricalBuildingDataTable.vue
new file mode 100644
index 00000000..4f1e0bd1
--- /dev/null
+++ b/src/components/HistoricalBuildingDataTable.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="historical-table-cont">
+    <table class="historical-data">
+      <thead>
+        <tr>
+          <th scope="col">
+            Year
+          </th>
+          <th v-if="renderedColumns.includes('GrossFloorArea')" scope="col">
+            Floor Area <span class="unit">sqft</span>
+          </th>
+          <th v-if="renderedColumns.includes('ChicagoEnergyRating')" scope="col">
+            Chicago Energy<br> Rating
+          </th>
+          <th v-if="renderedColumns.includes('ENERGYSTARScore')" scope="col">
+            Energy Star<br> Score
+          </th>
+          <th scope="col">
+            GHG Intensity <span class="unit">kg CO<sub>2</sub>e / sqft</span>
+          </th>
+          <th scope="col">
+            Source EUI <span class="unit">kBtu / sqft</span>
+          </th>
+
+          <th scope="col">
+            Electricity Use <span class="unit">kBtu</span>
+          </th>
+          <th scope="col">
+            Natural Gas Use <span class="unit">kBtu</span>
+          </th>
+          <th v-if="renderedColumns.includes('DistrictSteamUse')" scope="col">
+            District Steam Use <span class="unit">kBtu</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="benchmark in historicBenchmarks"
+          :key="benchmark.DataYear"
+        >
+          <td>{{ benchmark.DataYear }}</td>
+          <td  v-if="renderedColumns.includes('GrossFloorArea')">
+            {{ benchmark.GrossFloorArea | optionalInt }}
+          </td>
+          <td v-if="renderedColumns.includes('ChicagoEnergyRating')">
+            {{ benchmark.ChicagoEnergyRating || '-' }}
+          </td>
+          <td v-if="renderedColumns.includes('ENERGYSTARScore')">
+            {{ benchmark.ENERGYSTARScore || '-' }}
+          </td>
+          <td>{{ benchmark.GHGIntensity }}</td>
+          <td>{{ benchmark.SourceEUI }}</td>
+
+          <!-- Round big numbers -->
+          <td>{{ benchmark.ElectricityUse | optionalInt }}</td>
+          <td>{{ benchmark.NaturalGasUse | optionalInt }}</td>
+          <td v-if="renderedColumns.includes('DistrictSteamUse')">
+            {{ benchmark.DistrictSteamUse | optionalInt }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import {IHistoricData} from '../common-functions.vue';
+
+/**
+ * A component that given an array of a building's benchmarking renders
+ * a table showing columns of data with values (skipping any columns that
+ * never had a value, like if a building never had an Energy star score)
+ */
+@Component({
+  filters: {
+    /**
+     * Round and process an optional float to a locale string
+     *
+     * Ex: null -> '-', '12345.67' -> '12,345'
+     */
+     optionalInt(value: string) {
+      if (!value) {
+        return '-';
+      }
+
+      return parseInt(value).toLocaleString();
+    },
+  }
+})
+export default class BuildingImage extends Vue {
+  @Prop({required: true}) historicBenchmarks!: Array<IHistoricData>;
+
+  renderedColumns: Array<string> = [];
+
+  getRenderedColumns(): Array<string> {
+    if (this.historicBenchmarks.length === 0) {
+      return [];
+    }
+
+    const allColKeys: Array<string> = Object.keys(this.historicBenchmarks[0]);
+    const emptyColKeys = allColKeys.filter((colKey: string) => {
+      // A column is empty if it's all empty string or '0', so skip it if so. Some columns switch
+      // between both, like Natural Gas Use on Merch Mart, which we also want to ignore
+      return !this.historicBenchmarks.every((datum) => {
+        return (datum as any)[colKey] === '' || (datum as any)[colKey] === '0.0';
+      });
+    });
+
+    return emptyColKeys;
+  }
+
+  created(): void {
+    // const emptyColumns =
+    console.log('historicBenchmarks', this.historicBenchmarks);
+    this.renderedColumns = this.getRenderedColumns();
+    console.log('renderedColumns', this.renderedColumns);
+  }
+}
+</script>
+
+<style lang="scss">
+.historical-table-cont {
+  max-width: 100%;
+  overflow-x: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+table.historical-data {
+  border: solid 0.125rem $grey;
+  border-radius: $brd-rad-small;
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 62.5rem; // 1000px
+
+  .unit {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: normal;
+  }
+
+  th, td {
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+  }
+
+  thead {
+    tr { background-color: $grey; }
+
+    th {
+      line-height: 1.25;
+      font-size: 0.825rem;
+    }
+  }
+
+  tbody tr:nth-of-type(even) { background-color: $grey-light; }
+}
+</style>
diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue
index f96367b4..a8ec5ce5 100644
--- a/src/templates/BuildingDetails.vue
+++ b/src/templates/BuildingDetails.vue
@@ -309,60 +309,7 @@ query ($id: ID!, $ID: String) {
 
       <h2>Historical Data</h2>
 
-      <div class="historical-table-cont">
-        <table class="historical-data">
-          <thead>
-            <tr>
-              <th scope="col">
-                Year
-              </th>
-              <th scope="col">
-                Floor Area <span class="unit">sqft</span>
-              </th>
-              <th scope="col">
-                Chicago Energy<br> Rating
-              </th>
-              <th scope="col">
-                Energy Star<br> Score
-              </th>
-              <th scope="col">
-                GHG Intensity <span class="unit">kg CO<sub>2</sub>e / sqft</span>
-              </th>
-              <th scope="col">
-                Source EUI <span class="unit">kBtu / sqft</span>
-              </th>
-
-              <th scope="col">
-                Electricity Use <span class="unit">kBtu</span>
-              </th>
-              <th scope="col">
-                Natural Gas Use <span class="unit">kBtu</span>
-              </th>
-              <th scope="col">
-                District Steam Use <span class="unit">kBtu</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="benchmark in historicData"
-              :key="benchmark.DataYear"
-            >
-              <td>{{ benchmark.DataYear }}</td>
-              <td>{{ benchmark.GrossFloorArea | optionalInt }}</td>
-              <td>{{ benchmark.ChicagoEnergyRating || '-' }}</td>
-              <td>{{ benchmark.ENERGYSTARScore || '-' }}</td>
-              <td>{{ benchmark.GHGIntensity }}</td>
-              <td>{{ benchmark.SourceEUI }}</td>
-
-              <!-- Round big numbers -->
-              <td>{{ benchmark.ElectricityUse | optionalInt }}</td>
-              <td>{{ benchmark.NaturalGasUse | optionalInt }}</td>
-              <td>{{ benchmark.DistrictSteamUse | optionalInt }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <HistoricalBuildingDataTable :historic-benchmarks="historicData" />
 
       <p class="constrained">
         <strong>* Note on Rankings:</strong> Rankings and medians are among <em>included</em>
@@ -479,13 +426,14 @@ query ($id: ID!, $ID: String) {
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { LatestDataYear } from '../constants/globals.vue';
 import BuildingImage from '~/components/BuildingImage.vue';
 import DataSourceFootnote from '~/components/DataSourceFootnote.vue';
+import HistoricalBuildingDataTable from '~/components/HistoricalBuildingDataTable.vue';
 import NewTabIcon from '~/components/NewTabIcon.vue';
 import OverallRankEmoji from '~/components/OverallRankEmoji.vue';
 import OwnerLogo from '~/components/OwnerLogo.vue';
 import StatTile from '~/components/StatTile.vue';
-import { LatestDataYear } from '../constants/globals.vue';
 
 // This simple JSON is a lot easier to just use directly than going through GraphQL and it's
 // tiny
@@ -511,24 +459,12 @@ import {
     OverallRankEmoji,
     OwnerLogo,
     StatTile,
+    HistoricalBuildingDataTable,
   },
   filters: {
     titlecase(value: string) {
       return value.toLowerCase().replace(/(?:^|\s|-)\S/g, (x) => x.toUpperCase());
     },
-
-    /**
-     * Round and process an optional float to a locale string
-     *
-     * Ex: null -> '-', '12345.67' -> '12,345'
-     */
-    optionalInt(value: string) {
-      if (!value) {
-        return '-';
-      }
-
-      return parseInt(value).toLocaleString();
-    },
   },
 })
 export default class BuildingDetails  extends Vue {
@@ -734,43 +670,6 @@ export default class BuildingDetails  extends Vue {
     .stat-tile { min-width: 18rem; }
   }
 
-  .historical-table-cont {
-    max-width: 100%;
-    overflow-x: auto;
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
-  table.historical-data {
-    border: solid 0.125rem $grey;
-    border-radius: $brd-rad-small;
-    border-collapse: collapse;
-    width: 100%;
-    min-width: 62.5rem; // 1000px
-
-    .unit {
-      display: block;
-      font-size: 0.75rem;
-      font-weight: normal;
-    }
-
-    th, td {
-      padding: 0.5rem 0.75rem;
-      text-align: left;
-    }
-
-    thead {
-      tr { background-color: $grey; }
-
-      th {
-        line-height: 1.25;
-        font-size: 0.825rem;
-      }
-    }
-
-    tbody tr:nth-of-type(even) { background-color: $grey-light; }
-  }
-
   ul {
     margin-top: 0.5rem;