<div id="app">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <label>Show All Macros</label>
      <input type="checkbox" v-model="showDetailView" style="margin-left: 10px;" />
    </div>
    <div class="row">
      <div>
        <table id="table" class="table">
          <thead>
            <tr>
              <td v-for="h in tableHeaders" :key="h.value">{{h.text}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in rows" :key="row.name">
              <td v-for="header in headers">
                {{ row[header.value] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

#table thead {
  background-color: #abcdef;
}
label {
  font-size: 20px;
  color: tomato;
}

new Vue({
  el: "#app",
  computed: {
    tableHeaders() {
      if (!this.showDetailView) {
        return this.headers.filter((h) =>
          this.defaultHeaders.includes(h.value)
        );
      } else {
        return this.headers;
      }
    },
    rows() {
      if (this.showDetailView) {
        //console.log("should return all foods", this.foods);
        return this.foods;
      } else {
        let data = this.foods.map((f) => {
          let obj = {};
          this.defaultHeaders.forEach((key) => (obj[key] = f[key]));
          return obj;
        });
        console.log(" data :", data);
        return data;
      }
    }
  },
  data() {
    return {
      showDetailView: false,
      defaultHeaders: ["name", "calories", "protein"],
      headers: [
        {
          text: "Food (100g serving)",
          value: "name"
        },
        {
          text: "Calories",
          value: "calories"
        },
        {
          text: "Protein (g)",
          value: "protein"
        },
        {
          text: "Fat (g)",
          value: "fat"
        },
        {
          text: "Carbs (g)",
          value: "carb"
        },

        {
          text: "Fiber (g)",
          value: "fiber"
        }
      ],
      foods: [
        {
          name: "Chicken",
          carb: 0,
          fat: 14,
          protein: 27,
          fiber: 0,
          calories: 234
        },
        {
          name: "Egg",
          carb: 0,
          fat: 14,
          protein: 27,
          fiber: 0,
          calories: 234
        },

        {
          name: "Oats",
          carb: 66.27,
          fat: 6.9,
          protein: 16.89,
          fiber: 10.6,
          calories: 394.74
        },

        {
          name: "Sprouts",
          carb: 5.94,
          fat: 0.18,
          protein: 3.04,
          fiber: 1.8,
          calories: 37.54
        },
        {
          name: "White rice",
          carb: 44.08,
          fat: 0.44,
          protein: 4.2,
          fiber: 0.6,
          calories: 197.08
        },
        {
          name: "Toor dal",
          carb: 26.18,
          fat: 6.32,
          protein: 10.36,
          fiber: 8.7,
          calories: 203.04
        },
        {
          name: "Curd",
          carb: 3.45,
          fat: 4.2,
          protein: 11.75,
          fiber: 0,
          calories: 98.6
        },
        {
          name: "Soya chunks",
          carb: 15,
          fat: 0,
          protein: 24,
          fiber: 2,
          calories: 156
        },
        {
          name: "Tofu",
          carb: 1.9,
          fat: 5,
          protein: 16,
          fiber: 1,
          calories: 116.6
        },
        {
          name: "Prawn",
          carb: 2,
          fat: 0,
          protein: 24,
          fiber: 1,
          calories: 104
        },

        {
          name: "Fish",
          carb: 0,
          fat: 12,
          protein: 22,
          fiber: 1,
          calories: 196
        },
        {
          name: "Egg White",
          carb: 0.7,
          fat: 0,
          protein: 4,
          fiber: 0,
          calories: 18.8
        },
        {
          name: "Crab",
          carb: 0,
          fat: 0.7,
          protein: 18,
          fiber: 0,
          calories: 78.3
        },
        {
          name: "Sweet Potato",
          carb: 20,
          fat: 0.1,
          protein: 1.6,
          fiber: 3,
          calories: 87.3
        },
        {
          name: "Yam",
          carb: 28,
          fat: 0.2,
          protein: 1.5,
          fiber: 4.1,
          calories: 119.8
        },
        {
          name: "Carrot",
          carb: 10,
          fat: 0.2,
          protein: 1,
          fiber: 2.8,
          calories: 45.8
        }
      ]
    };
  }
});