<template>
  <v-data-table
    class="elevation-1"
    no-data-text="Nenhum dado foi encontrado"
    v-bind="$attrs"
    :headers="[]"
    items-per-page-text="Itens por página"
    :page-text="`1 de ${list.length}`"
  >
  </v-data-table>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { ZCDataTableHeader } from '../types';

const props = defineProps({
  slots: {
    type: Object,
  },
  headers: {
    type: Array<ZCDataTableHeader>,
    default() {
      return [];
    },
  },
  items: {
    type: Array,
    default() {
      return [];
    },
  },
});

const list = ref<any[]>(props.items);

watch(props.items, (newVal) => {
  list.value = newVal
});
</script>

<style scoped>
.v-data-table__td.v-data-table-column--align-start.v-data-table__th.v-data-table__th {
  background-color: #769fdb !important;
  color: #fff;
  font-weight: 700;
}

.v-data-table__td.v-data-table-column--align-center.v-data-table__th.v-data-table__th {
  background-color: #769fdb !important;
  color: #fff;
  font-weight: 700;
}
.v-data-table__td.v-data-table-column--align-end.v-data-table__th.v-data-table__th {
  background-color: #769fdb !important;
  color: #fff;
  font-weight: 700;
}

.v-data-table-footer {
  background-color: #769fdb !important;
  color: #fff;
  font-weight: 700;
}
</style>
