treegrid 0.0.8
Install from the command line:
Learn more about npm packages
$ npm install @ks-labs/treegrid@0.0.8
Install via package.json:
"@ks-labs/treegrid": "0.0.8"
About this version
This component was created using the tree-grid
- Install npm module
npm i @ks-labs/treegrid- Import module
// main.js
import Vue from "vue";
import TreeGrid from "@ks-labs/treegrid";
import "@ks-labs/treegrid/src/assets/css/jquery.treegrid.css";
Vue.use(TreeGrid);<template>
<div>
<treegrid
class="table table-bordered"
:rows="rows"
:columns="columns"
:options="options"
@row="clickRow"
clickColor="blue"
>
<template slot="name" slot-scope="{ name }">{{ name }}</template>
// name = { name: "Root", id: 1, pid: null, }
</treegrid>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
columns: [{ name: "Nome", field: "name" }],
rows: [
{
name: "Root",
id: 1,
pid: null,
},
{
name: "Root 1",
id: 2,
pid: 1,
},
{
name: "Root 1",
id: 3,
pid: 1,
},
{
name: "Root 1",
id: 4,
pid: 1,
},
{
name: "Root 1",
id: 5,
pid: 4,
},
{
name: "Root 1",
id: 6,
pid: null,
},
{
name: "Root 7",
id: 7,
pid: 6,
},
{
name: "Root 7 - 1",
id: 8,
pid: 7,
},
{
name: "Root 1",
id: 9,
pid: 6,
},
{
name: "Root 1",
id: 10,
pid: 6,
},
],
options: {},
};
},
};
</script>| Name | Type | Description |
|---|---|---|
| Rows | Array | All table body data |
| Columns | Array | All data on column headings |
| Options | Object | Options supported by the tree-grid lib |
| clickColor | String | Color displayed in the background when clicking on a line |
| Name | Description | Return |
|---|---|---|
| Row | Event triggered when clicking on a table row | {data: {}, context: DOM} |
