<template>
  <table>
    <thead v-if="showHead">
    <tr><th>{{title}}&nbsp;</th></tr>
    </thead>
    <tbody>
    <tr v-for="row in data"><td :style="eval(cellStyleJs,row[name])">{{row[name]}}</td></tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name:"TableColumn",
  data() {
    return {

    }
  },
  methods: {
    eval(str,data){
      let res;
      if (str){
        res = eval(str);
      }else if (this.cellStyleFunction) {
        res = this.cellStyleFunction(data);
      }
      return res;
    }
  },
  props:{
    name: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    showHead: {
      type: Boolean,
    },
    data: {
      type: Array,
    },
    cellStyleJs: {
      type: String,
    },
    cellStyleFunction:{
      type: Function
    },
  }

}
</script>
<style scoped>
table{
  color: white;
}
th{
  color: white;
  font-size: 12px;
  font-weight: normal;
}
table,th,td,tr,thead{
  padding: 0;
  margin: 0;
  border: none;
}
tr{
  width: 100%;
}


</style>
