PrimeVue

```vue
<template>
  <div class="p-grid">
    <div class="p-col-12">
      <h2>Customer Dashboard</h2>
      <DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll">
        <Column field="id" header="ID"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="email" header="Email"></Column>
        <Column field="status" header="Status">
          <template #body="slotProps">
            <Tag :value="slotProps.data.status" :severity="getStatusSeverity(slotProps.data.status)" />
          </template>
        </Column>
      </DataTable>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customers: [
        { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
        { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' }
      ]
    }
  },
  methods: {
    getStatusSeverity(status) {
      return status === 'Active' ? 'success' : 'danger';
    }
  }
}
</script>
```