<template>
  <UTable
    :rows="data"
    :columns="columns"
    :ui="config"
    :sort-button="sortButton"
  >
    <template #repo_name-data="{ row }">
      <ULink :to="'https://github.com/' + row.repo_name" target="_blank">{{ row.repo_name }}</ULink>
    </template>
    <template #repo_url-data="{ row }">
      <ULink :to="row.repo_url" target="_blank">{{ row.repo_url }}</ULink>
    </template>
  </UTable>
</template>
<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const columns = computed(() => {
  const columns = []
  for (const key in props.data[0]) {
    columns.push({
      key,
      label: key,
      sortable: true
    })
  }

  return columns
})
const config = {
  base: 'table-auto',
  td: {
    base: 'max-w-96 whitespace-normal'
  }
}
const sortButton = {
  icon: 'i-heroicons-chevron-up-down-20-solid'
}
</script>