Vue-tree-table-codica NPM

vue-tree-table

Vue tree table is a vue js table component, with a tree functionality.

Install

yarn add vue-tree-table-codica
or
npm install vue-tree-table-codica

Preview

npm.io

Register

import VSimpleTreeTable from 'vue-tree-table-codica'
import 'vue-tree-table-codica/dist/vue-simple-tree-table.css'

Vue.use(VSimpleTreeTable);

Usage

You can add the vue-tree-table component by using the following code in your project. This is the most simple example.

<template>
  <v-table :data="data" :columns="columns">
    <template v-slot:expand="row">
      <div>
        <div>NAME: {{row.props.name}}</div>
        <div>Number: {{row.props.number}}</div>
        <div>Qty: {{row.props.qty}}</div>
      </div>
    </template>
  </v-table>
</template>

export default {
  data() {
    return {
      columns: [
        {
          name: "Name",
          field: "name"
        },
        {
          name: "Number",
          field: "number"
        },
        {
          name: "Qty",
          field: "qty"
        }
      ],
      data: [
        {
          name: "Name 1",
          number: "1",
          qty: 123,
          hiddenData: "hiddenData 1",
          img: "https://dummyimage.com/300"
        },
        {
          name: "Name 2",
          number: "2",
          qty: 123,
          hiddenData: "hiddenData 2"
        },
        {
          name: "Name 3",
          number: "3",
          qty: 123,
          hiddenData: "hiddenData 3"
        }
      ]
    }
  }
}