Vue tree table is a vue js table component, with a tree functionality.
yarn add vue-tree-table-codicaor
npm install vue-tree-table-codica
import VSimpleTreeTable from 'vue-tree-table-codica'
import 'vue-tree-table-codica/dist/vue-simple-tree-table.css'
Vue.use(VSimpleTreeTable);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"
}
]
}
}
}| 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 | - | [] |
| Properties | Description | Type | Default |
|---|---|---|---|
| name | Column header name | String | '' |
| field | The attribute name of the corresponding column content | String | '' |
| Name | Description | Default | Required |
|---|---|---|---|
| expand | Content in expanded row | none | false |
VSimpleTreeTable is Copyright © 2015-2019 Codica. It is released under the MIT License.
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.