vue-z-table v0.1.1

How to use

플러그인 등록

import Vue from 'vue'
import zTable from 'vue-z-table'

Vue.use(zTable)

내장 컴포넌트 사용

import { CheckboxHeader, Checkbox, ColumnHeader, Tooltip } from 'vue-z-table'

options

<template>
  <div>
    <z-table options="options" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: {
        data: [], // {Array} - 표에서 사용할 데이터
        columns: [], // {Array} - 머리 열을 구성할 옵션
        rowAddable: false, // {Boolean} - 내장 행 추가 버튼을 사용할 지 여부
        infiniteScroll: false, // {Boolean} - 무한 스크롤 여부
        dataLengthLimit: Infinity, // {Number} - 추가 가능한 데이터의 개수
        tableDataChanged: function (data) {},
        rowDataChanged: function (row, value, status) {},
        // sortedInAscending: function () {},
        // sortedInDescending: function () {},
        columnHeaderSorted: function (columns) {},
        scrollEndPointObserved: function () {},
        checkedItemChanged: function (rows) {}
      }
    }        
  },
  methods: {
    useTo$zTable () {
      this.$zTable.redrawTableLayout()
      this.$zTable.setColumnOptions(columns)
      this.$zTable.setData(data)
      this.$zTable.unshiftData(data)
      this.$zTable.pushData(data)
      this.$zTable.setRow(row, value)
      this.$zTable.addRow(index, value)
      this.$zTable.removeRow(index)
      this.$zTable.removeCheckedRows()
      this.$zTable.addColumn(title, columns)
      this.$zTable.removeColumn(title)
      this.$zTable.unobserveScrollEndPoint()
    }  
  }
}
</script>

<style lang="scss">
  .z-table {
    .table__row {
      &--head {}
      &--body {}
    }
    .table__cell {
      &:focus {}
      &--head {}
      &--data {}
      &--checkbox {}
    }
  }
</style>

column options

import { Tooltip } from 'vue-z-table'
import SomeHeaderComponent from '~/SomeHeaderComponent'
import SomeDataComponent from '~/SomeDataComponent'
import SomeTooltipComponent from '~/SomeTooltipComponent'

const columns = [
  {
    field: '', // {String} - 머리 열의 고유 이름 (필수 속성)
    title: '', // {String} - 머리 열의 표시 이름
    width: 'auto', // {Number} - 'px'단위로 변환 || {String} - 'auto'
    resizable: true, // {Boolean} - 머리 열 가로 너비 조절 여부
    headerComponent: null, // {Component} - 머리 열에서 사용할 Vue 컴포넌트
    component: null, // {Component} - 일반 열에서 사용할 Vue 컴포넌트
    tooltipComponent: Tooltip, // {Component} - 툴팁으로 사용할 Vue 컴포넌트, 지정하지 않으면 내장 컴포넌트(Tooltip) 사용
    tooltip: '' // {String} - 툴팁 메시지, HTML 사용 가능
  },
  {
    field: 'title',
    title: 'My Title~',
    width: 230,
    resizable: false,
    headerComponent: SomeHeaderComponent,
    component: SomeDataComponent,
    tooltipComponent: SomeTooltipComponent,
    tooltip: 'This is <span style="color:red;">Tooltip</span>!'
  }
  {
    // ...
  }
]

component options for column

headerComponent

<script>
export default {
  props: {
    tableData: Array,
    columnData: Object,
    options: Object
  }
}
</script>

component

<script>
export default {
  props: {
    tableData: Array,
    rowData: Object,
    columnData: Object,
    cellId: String
  }
}
</script>

tooltipComponent

<script>
export default {
  props: {
    columnData: Object,
    tooltip: String
  }
}
</script>