<script setup lang="ts" generic="T extends Record<string, unknown>">
export interface DataTableColumn {
  key: string;
  label: string;
  align?: "left" | "right";
}

defineProps<{ columns: DataTableColumn[]; rows: T[]; rowKey: (row: T) => string; emptyText?: string }>();
</script>

<template>
  <div class="data-table-wrap">
    <table v-if="rows.length" class="data-table crud-table">
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key" :data-align="column.align || 'left'">{{ column.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="rowKey(row)">
          <td v-for="column in columns" :key="column.key" :data-align="column.align || 'left'" :data-label="column.label">
            <slot :name="`cell-${column.key}`" :row="row">
              {{ row[column.key] }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-else class="muted-box">{{ emptyText || "暂无记录。" }}</p>
  </div>
</template>
