vuefity로 Data table 만들기

어드민 페이지가 필요한 상황인데 빨리 개발하기 위해 어떤 라이브러리를 쓸지 찾아보다 vuefity를 발견하게되어 vuefity를 통해 Data table을 만들어보았다.

vuefity문서에서 데이터 테이블은 labs라는 출시되기 전 개발중인 탭(?)에 있다.

데이터 테이블을 사용하기 위해선 labsComponents를 import 해줘야한다.

main.js

import "./assets/main.css";

import App from "./App.vue";
import router from "./router";
import { createApp } from "vue";

import * as api from "@/libs/request/api";

import "vuetify/styles";
import "vuetify/dist/vuetify.min.css";
import "@mdi/font/css/materialdesignicons.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import * as labsComponents from "vuetify/labs/components";

const vuetify = createVuetify({
  components: {
    ...components,
    ...labsComponents,
  },
  directives,
  theme: { defaultTheme: "light" },
});

const app = createApp(App);

app.config.globalProperties.$api = api;

app.use(router);
app.use(vuetify);

app.mount("#app");

제공하는 데이터 테이블중 Server side tables를 사용하였고 DataTable을 공통적으로 사용할 수 있도록 구현하였다.

DataTable.vue

<template>
    <v-data-table-server
      v-model:items-per-page="itemsPerPage"
      :headers="headers"
      :items-length="totalItems"
      :items="itemsWithIndex"
      :item-key="'number'"
      :loading="loading"
      class="elevation-1"
      item-value="name"
      @update:options="loadItems"
      @click:row="rowClick"
    >
    </v-data-table-server>
</template>

<script>
export default {
  name: "DataTable",

  props: {
    headers: Array,
    api: Function,
  },

  methods: {
    loadItems({ page, itemsPerPage, sortBy }) {

      this.pageNumber = page;
      this.itemsPerPageNumber = itemsPerPage;

      this.loading = true;
      this.api(
        page - 1,
        itemsPerPage,
        sortBy[0] && `${sortBy[0].key},${sortBy[0].order}`
      ).then((res) => {
        this.serverItems = res.data.content;
        this.totalItems = res.data.totalElements;
        this.loading = false;
      });
    },
  },

  data() {
    return {
      serverItems: [],
      loading: true,
      totalItems: 0,
      page: 0,
      pageNumber: 0,
      itemsPerPage: 20,
      itemsPerPageNumber: 20,
    };
  },
};
</script>

데이터 테이블에 출력할 데이터를 각 컴포넌트에서 props로 전달해준다.

<template>
  <data-table
    style="width: 100%"
    :headers="headers"
    :api="$api.GET_ACADEMY_LIST"
  ></data-table>
</template>

<script>
import DataTable from "@/components/common/DataTable.vue";

export default {
  name: "AcademyList",

  components: { DataTable },

  data() {
    return {
      headers: [
        {
          title: "번호",
          align: "start",
          sortable: false,
          key: "number",
        },
        { title: "상호명", align: "center", key: "name", sortable: false },
        { title: "아카데미 ID", align: "center", key: "id" },
        { title: "생성자", align: "center", key: "constructor" },
        { title: "최고관리자 계정", align: "center", key: "adminEmail" },
        {
          title: "최초생성일",
          align: "center",
          key: "createdAt",
          sortable: false,
        },
        {
          title: "서비스 이용상태",
          align: "center",
          key: "plan",
          sortable: false,
        },
        {
          title: "멤버 수",
          align: "center",
          key: "memberSize",
          sortable: false,
        },
      ],
      items: null,
    };
  },
};
</script>