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

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"
        }
      ]
    }
  }
}

API

Table Attributes

| Properties | Description | Type | Parameters | Default | ---- | ---- | ---- | ---- | ---- | | data | Data for each row of the table | Array | - | [] || | columns | Configuration of the columns in the table (see below for details)：Columns Configs） | Array | - | [] |

Columns Configs

| Properties | Description | Type | Default | | ---- | ---- | ---- | ---- | | name | Column header name | String | '' | | field | The attribute name of the corresponding column content | String | '' |

Slot config

| Name | Description | Default | Required | | ---- | ---- | ---- | ---- | | expand | Content in expanded row | none | false |

License

VSimpleTreeTable is Copyright © 2015-2019 Codica. It is released under the MIT License.

About Codica

VSimpleTreeTable is maintained and funded by Codica. The names and logos for Codica are trademarks of Codica.

We love open source software! See our other projects or hire us to design, develop, and grow your product.