<template>
  <div class="kole-fixtable-wrap">
    <table class="kole-fixtable">
      <thead>
        <tr>
          <th
            v-for="c in columns"
            :key="c.key"
            :class="fixCls(c)"
            :style="{ minWidth: c.w + 'px' }"
          >{{ c.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in data" :key="i">
          <td
            v-for="c in columns"
            :key="c.key"
            :class="fixCls(c)"
            :style="{ minWidth: c.w + 'px' }"
          >{{ row[c.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'KoleFixedColumnTable',
  props: {
    data: { type: Array, default: () => [] },
    columns: { type: Array, default: () => [] }
  },
  methods: {
    fixCls(c) {
      return c.fixed ? 'kole-fixed kole-fixed-' + c.fixed : '';
    }
  }
};
</script>

<style src="./FixedColumnTable.css"></style>
