vue3 tabulator grid

grid를 적용하기 위해 tabulator 라이브러리를 사용하려고 한다.

tree기능과 페이징, 검색기능이 되는 무료 라이브러리가 필요했는데 tabulator가 가장 적합했다.

yarn을 사용하여 설치한후 import하여 사용하였다.

<script>
  import {TabulatorFull as Tabulator} from 'tabulator-tables'; //import Tabulator library

  export default {
    data() {
      return {
        tabulator: null, //variable to hold your table
        tableData: [], //data for table to display
      }
    },
    mounted() {
      //instantiate Tabulator when element is mounted
      this.tabulator = new Tabulator(this.$refs.table, {
        data: this.tableData, //link data to table
        reactiveData:true, //enable data reactivity
        columns: [], //define table columns
      });
    }
  }
</script>

<template>
  <div ref="table"></div>
</template>

- tableData: grid로 보여줄 데이터를 columns양식에 맞게 넣어주면 된다. 

- columns: title(보여줄 제목), field(데이터 key)를 기본적으로 넣어주고 다른 옵션도 추가하여 사용 가능하다.

 

기본적으로 두개만 잘넣어주면 데이터는 잘나오고 부가적인 기능은 옵션으로 넣어주면 된다!

 

설치나 사용법은 문서에 잘 나와있다.

https://tabulator.info/docs/5.5/frameworks#vue

Tabulator - Framework Support

 

작업하다가 클릭했을때 이벤트 함수가 undefined나서 고생했는데,

혹시 columns안에 cellClick 이벤트기능을 사용할거라면 method안에 함수선언을 한 후에

{ title: "삭제", formatter: trashIcon, width: 100, headerSort:false, hozAlign: "center",
  cellClick: this.receiveDeleteConsumer
}

이런식으로 넣어주어야 된다.

 

vue3호환 잘되는 grid 라이브러리 Tabulator 추천!