[Vue.js 3 + Vuetify 3] Data table (Component) 사용법

안녕하세요, 오늘은 Vuetify 3에서 Data table (Component) 사용하는 방법에 대해서 알아보겠습니다.

 

https://vuetifyjs.com/en/components/data-tables

https://vuetifyjs.com/en/components/data-tables/

 

먼저, Data table (Component)에 대한 코드 예시는 다음과 같습니다.

 

<template>
  <v-card
    title="A High School"
    flat
  >
    <template v-slot:text>
      <v-text-field
        v-model="search"
        label="Search"
        prepend-inner-icon="mdi-magnify"
        variant="outlined"
        hide-details
        single-line
      ></v-text-field>
    </template>

    <v-data-table
      :headers="headers"
      :items="students"
      :search="search"
    ></v-data-table>
  </v-card>
</template>

<script>
  export default {
    name : 'App',
    components:{
    },
    data () {
      return {
        search: '',
        headers: [
          { align: 'center', key: 'index', sortable: false, title: 'Index' },
          { align: 'center', key: 'name', title: 'Name' },
          { align: 'center', key: 'id', title: 'Student ID'},
          { align: 'center', key: 'grade', title: 'Grade' },
        ],

        students: [
          {
            index: '1',
            name: 'Name-1',
            id: '2024-1',
            grade: 'A+'
          },

          {
            index: '2',
            name: 'Name-2',
            id: '2023-1',
            grade: 'B-'
          },

          {
            index: '3',
            name: 'Name-3',
            id: '2021-1',
            grade: 'A-'
          },

          {
            index: '4',
            name: 'Name-4',
            id: '2024-2',
            grade: 'B+'
          },

          {
            index: '5',
            name: 'Name-5',
            id: '2024-3',
            grade: 'A+'
          },
        ],
      }
    },
  }
</script>

 

위의 코드 실행 결과는 다음과 같습니다.

 

실행 결과

 

위의 코드에서 header를 구성하는 titles는 다음과 같습니다.

 

1. Index
2. Name
3. Student ID
4. Grade

그리고, 해당 Table의 Items를 구성하는 변수는 students 입니다.

변수 students는 List 이며, 각 원소는 Dictionary로 구성되어 해당 원소는 Titles에 대한 Key-Value 쌍으로 구성됩니다.

 

---

 

이상으로, Vuetify 3에서 Data table (Component)에 대해서 알아보았습니다.

감사드립니다.