vuetify data Table example

역시 업무에서 제일 많이 쓰이는 것은 table 입니다. 
data table 의 예제는 아래와 같습니다. 일단 화면단에 배치하는 것만 vuetify 에 있는 것을 사용하였습니다. 
화면단 소스 : 

<v-data-table
    dense
    :headers="headers"
    :items="detailList"
    item-key="name"
    class="elevation-1 "
></v-data-table>

script 소스 : 

detailList: [
  {
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    age: 1,

  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    age: 26,
  },
  {
    name: 'Eclair',
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    age: 30,
  },
  {
    name: 'Cupcake',
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    age: 31,
  },
  {
    name: 'Gingerbread',
    calories: 356,
    fat: 16.0,
    carbs: 49,
    protein: 3.9,
    age: 22,
  },
  {
    name: 'Jelly bean',
    calories: 375,
    fat: 0.0,
    carbs: 94,
    protein: 0.0,
    age: 21,
  },
  {
    name: 'Lollipop',
    calories: 392,
    fat: 0.2,
    carbs: 98,
    protein: 0,
    age: 41,
  },
  {
    name: 'Honeycomb',
    calories: 408,
    fat: 3.2,
    carbs: 87,
    protein: 6.5,
    age: 51,
  },
  {
    name: 'Donut',
    calories: 452,
    fat: 25.0,
    carbs: 51,
    protein: 4.9,
    age:56,
  },
  {
    name: 'KitKat',
    calories: 518,
    fat: 26.0,
    carbs: 65,
    protein: 7,
    age:60,
  },
],
headers: [
  {
    text: '품목명',
    align: 'start',
    sortable: false,
    value: 'name',
  },
  { text: '분류명', value: 'calories' },
  { text: '등록일시', value: 'fat' , },
  { text: '등록자', value: 'carbs' },
  { text: '사용여부', value: 'protein' },
  { text: '나이', value: 'age', align: ' d-none' },
],

오늘도 하나 배운것을 정리해서 포스팅을 했네요.