<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'

const fields = ref([
  { key: 'hawkId', label: 'Hawk ID', sortable: true },
  { key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center' },
  { key: 'firstName', label: 'First Name', sortable: true },
  { key: 'lastName', label: 'Last Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true, class: 'whitespace-nowrap' },
  { key: 'hireDate', label: 'Hire Date', sortable: true, class: 'text-center whitespace-nowrap' },
])
const items = ref([
  { "id": 3167,"hawkId": "ckunkler4", "univId": "00580573", "firstName": "Cyrillus", "lastName": "Kunkler", "fullName": "Cyrillus Kunkler", "email": "cyrillus-kunkler@uiowa.edu", "hireDate": "06/30/1990", "retired": false,"inactive": false },
  { "id": 7032,"hawkId": "jcooper11", "univId": "00549444", "firstName": "John", "lastName": "Cooper", "fullName": "John Cooper", "email": "john-cooper@uiowa.edu", "hireDate": "05/09/1990", "retired": false,"inactive": false },
  { "id": 1717,"hawkId": "scooper3", "univId": "01133454", "firstName": "Steve", "lastName": "Cooper", "fullName": "Steve Cooper", "email": "steve-cooper@uiowa.edu", "hireDate": "01/09/2010", "retired": false,"inactive": false },
  { "id": 2701,"hawkId": "beyden1", "univId": "00120802", "firstName": "Beaufort", "lastName": "Eyden", "fullName": "Beaufort Eyden", "email": "beaufort-eyden@uiowa.edu", "hireDate": "06/05/1998", "retired": false,"inactive": true },
  { "id": 9380,"hawkId": "fstokey2", "univId": "00341804", "firstName": "Franky", "lastName": "Stokey", "fullName": "Franky Stokey", "email": "franky-stokey@uiowa.edu", "hireDate": "06/11/1993", "retired": false,"inactive": true },
])
</script>

<template>
  <div>
    <AisTable bordered
              :fields="fields"
              :items="items"
              :sort-by="['lastName', '-firstName']"
    ></AisTable>
  </div>
</template>