<template>
  <div class="mt-4">
    <div class="overflow-x-auto mb-2">
      <table class="table responsive bg-white mb-0">
        <thead>
          <tr>
            <th v-for="(column, idx) in gridColumns" :key="idx" :class="column.header_class">
              {{ column.title }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, ridx) in gridData" :key="ridx">
            <td v-for="(column, cidx) in gridColumns" :key="cidx" :class="column.item_class">
              {{ row[column.field_name] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="small" v-if="gridFootnotes !== 0">
      <div v-for="(footnote, idx) in gridFootnotes" :key="idx">
        {{ footnote.content }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Campaignreporttable',
  props: ['gridColumns', 'gridData', 'gridFootnotes'],
}
</script>
