https://github.com/codica2/vue-simple-tree-table
Vue tree table is a vue js table component, with a tree functionality.
https://github.com/codica2/vue-simple-tree-table
table tree-table vuejs
Last synced: 12 months ago
JSON representation
Vue tree table is a vue js table component, with a tree functionality.
- Host: GitHub
- URL: https://github.com/codica2/vue-simple-tree-table
- Owner: codica2
- Created: 2019-05-14T08:53:10.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-14T08:54:11.000Z (about 7 years ago)
- Last Synced: 2024-12-27T05:24:50.554Z (over 1 year ago)
- Topics: table, tree-table, vuejs
- Language: Vue
- Homepage:
- Size: 855 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue tree table
Vue tree table is a vue js table component, with a tree functionality.
## Install
```bash
yarn add vue-tree-table-codica
```
or
```bash
npm install vue-tree-table-codica
```
## Preview
## Register
```vue
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.
```vue
NAME: {{row.props.name}}
Number: {{row.props.number}}
Qty: {{row.props.qty}}
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](https://opensource.org/licenses/MIT).
## About Codica
[](https://www.codica.com)
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](https://github.com/codica2) or [hire us](https://www.codica.com/) to design, develop, and grow your product.