[Vuetify] 사용자 관리 테이블 구성 가이드

Vue 3 + Vuetify + vue-facing-decorator 환경에서 v-data-table을 활용한 사용자 목록 테이블 구성 방법을 정리합니다.

1. headers 선언

Vuetify 3에서는 text 대신 title을 사용해야 합니다.

headers = [
  { title: 'ID', value: 'id', sortable: true },
  { title: '사용자명', value: 'fullKoreanName', sortable: true },
  { title: '사용자 상태', value: 'userStatusCommonCode.displayValue', sortable: false },
  { title: '전화번호', value: 'phone', sortable: true },
  { title: '이메일', value: 'email', sortable: true },
  { title: '생성일자', value: 'createdAt', sortable: true },
  { title: '마지막 로그인 일자', value: 'lastLoginAt', sortable: true },
];

---

2. v-data-table 템플릿 구성

<v-data-table
  :headers="headers"
  :items="users"
  :items-per-page="paginationDto.limit"
  item-value="id"
  density="compact"
  class="elevation-1"
  hide-default-footer
  show-headers
  @click:row="selectUser"
>
  <!-- 사용자 상태 -->
  <template #item["userStatusCommonCode.displayValue"]="{ item }">
    {{ item.userStatusCommonCode?.displayValue }}
  </template>

  <!-- 날짜 포맷 -->
  <template #item.createdAt="{ item }">
    {{ dateUtils.formatDateNoHours(item.createdAt) }}
  </template>
  <template #item.lastLoginAt="{ item }">
    {{ dateUtils.formatDateNoHours(item.lastLoginAt) }}
  </template>
</v-data-table>

---

3. v-pagination 연동

<v-pagination
  v-model="currentPage"
  :length="pageCount"
  @update:model-value="onPageChange"
  class="mt-4"
/>

---

주요 체크포인트

항목설명

headers의 키	Vuetify 3에서는 title 사용 필수 (text ❌)
deep key (userStatusCommonCode.displayValue)	슬롯으로 수동 렌더링 필요
헤더 출력 안될 경우	모든 컬럼에 #item.x 슬롯을 지정하면 기본 헤더 출력이 무시될 수 있음
정렬	sortable: true를 정확한 필드에만 지정

---

✨ 정리

• title + value는 Vuetify 3 테이블의 핵심 구조입니다.
• 모든 deep value(a.b)는 슬롯으로 커버해야 하며, 일반 필드는 기본 렌더링에 맡기는 것이 유지보수에 유리합니다.
• Vuetify 3에서는 slot 커스터마이징이 헤더 표시 방식에 영향을 주므로 꼭 필요한 것만 커스터마이징하세요.

title을 text로 썻다가 30분 고생해서 적어두는 글....