Vue3] data-grid _ tabulator 테마 변경

 

tabulatot는 Vue 프로젝트 내에서 data table을 만들수 있도록 지원하는 무료 라이브러리입니다. tabulator는 vue2와 vue3를 모두 지원하고 있고, 해당 글은 vue3를 기준으로 작성되었습니다. 이번 글에서는 tabulator의 테마를 변경하는 법을 알아보겠습니다.

https://tabulator.info/docs/5.4/theme

Tabulator - Themes

 

tabulator 홈페이지에서 왼쪽 메뉴를 클릭하면 지원하는 테마가 나옵니다.

 

테마는 <script>에 import해도 되고, <style>에 import해도 됩니다.

방법① style에 적용

방법② script에 적용

 

예시 

<template>
  <div class="report">
    <div class="container">
      <h1>일일/주간/월간 보고서</h1>
     </div>
  </div>
</template>

<script>
import {TabulatorFull as Tabulator} from 'tabulator-tables'; 
import 'tabulator-tables/dist/css/tabulator_site.min.css';



export default {
  data(){
    return {
      tabulator: null, //variable to hold your table
      tableData: [
        {name: "Oli Bob", age: "12"},
        {name: "Mary May", age: "1"},
        {name: "Mike", age: "3"}
      ], 
    }
  },
  mounted() {
      this.tabulator = new Tabulator(this.$refs.table, {
        data: this.tableData, 
        reactiveData:true, 
        columns: [
          { title: "Name", field: "name", width: 150 },
          { title: "Age", field: "age", width: 150 },
        ], //define table columns
      });
  }, 
}
</script>
<style scoped>
/* @import '~tabulator-tables/dist/css/tabulator.min.css'; */
</style>>

 

짜잔~ 예시를 출력하면 다음과 같은 결과가 나옵니다