SpendTable Vue component

js/components/tables/spend_table.js

@@ -0,0 +1,45 @@
+import { set } from 'vue/dist/vue'
+import { formatDollars } from '../../lib/dollars'
+
+export default {
+  name: 'spend-table',
+
+  props: {
+    projects: Object,
+    workspace: Object,
+    environments: Object,
+    currentMonthIndex: String,
+    prevMonthIndex: String,
+    twoMonthsAgoIndex: String
+  },
+
+  data: function () {
+    return {
+      projectsState: this.projects
+    }
+  },
+
+  created: function () {
+    Object.keys(this.projects).forEach(project => {
+      set(this.projectsState[project], 'isVisible', false)
+    })
+  },
+
+  methods: {
+    toggle: function (e, projectName) {
+      this.projectsState = Object.assign(this.projectsState, {
+        [projectName]: {
+          isVisible: !this.projectsState[projectName].isVisible
+        }
+      })
+    },
+
+    formatDollars: function (value) {
+      return formatDollars(value, false)
+    },
+
+    round: function (value) {
+      return Math.round(value)
+    }
+  }
+}

js/index.js

@@ -16,6 +16,7 @@ import NewProject from './components/forms/new_project'
 import Modal from './mixins/modal'
 import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
+import SpendTable from './components/tables/spend_table'
 
 Vue.use(VTooltip)
 
@@ -33,7 +34,8 @@ const app = new Vue({
     financial,
     NewProject,
     selector,
-    BudgetChart
+    BudgetChart,
+    SpendTable
   },
   mounted: function() {
     const modalOpen = document.querySelector("#modalOpen")