@ksgl/treegrid
v0.0.11
Published
[](https://github.com/ks-labs/vue-treegrid/actions/workflows/publish.yml/badge.svg) [
Keywords
Readme
Vue Treegrid
This component was created using the tree-grid and bootstrap-table
How to install
- 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);// public/index.html
<html>
<head>
...
<link href="https://unpkg.com/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet"/>
...
</head>
<body>
...
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table-vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
</body>
</html>How to use
<template>
<div>
<treegrid
styles="table table-bordered"
:rows="rows"
:columns="columns"
:rowStyle="rowStyle"
:formatNoMatches="formatNoMatches"
@onPostBody="onPostBody"
@onClickRow="onClickRow"
@headerStyle="headerStyle"
>
</treegrid>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
columns: [
{
field: "name",
title: "Projeto/Área",
align: "left",
cellStyle: (_, body) => {
if (body.isConsolidation) {
return { classes: "is-line-root" };
}
return { classes: "name-field" };
},
},
{
field: "media",
title: "Média",
align: "left",
formatter: (value, row) => {
if (!row?.total) return "";
return this.formatCurrency(value ?? 0);
},
cellStyle: () => {
return {
classes: "column-media",
};
},
},
],
rows: [
{
id: 154,
media: 6098.49,
total: 6098.49,
january: {
total: 6098.49,
isProjection: false,
hasDuplicated: {
value: true,
duplicated: [
{
id: 70,
invoice_id: 950,
cost_center_id: 2922,
vehicle_id: 552,
traffic_ticket_id: null,
billing_month: "2023-01-01",
cost_type: "Rental",
value: 2033,
description: null,
created_at: "2023-01-23 19:02:46",
updated_at: "2023-01-23 19:02:46",
},
{
id: 65,
invoice_id: 945,
cost_center_id: 2003,
vehicle_id: 552,
traffic_ticket_id: null,
billing_month: "2023-01-19",
cost_type: "Rental",
value: 993.29,
description: null,
created_at: "2023-01-19 17:35:24",
updated_at: "2023-01-19 19:49:34",
},
],
},
},
name: "Gastos Gerais",
isConsolidation: true,
},
{
id: 157,
media: 2200,
total: 2200,
pid: null,
january: {
total: 2200,
isProjection: true,
hasDuplicated: { value: false, duplicated: [] },
},
name: "Diretoria de Logística",
isConsolidation: true,
},
],
};
},
};
</script>Below are some configurations supported by the component, if you need a new configuration please open a Pull Request
Props
| Name | Type | Default | Description | | --------------- | -------- | ------- | ------------------------------------------------------------------ | | Rows | Array | | All table body data | | Columns | Array | | All data on column headings | | idField | String | id | Overwrite the default idField to 'id' | | parentIdField | String | pid | Set the parent id field. | | treeShowField | String | | Set the treeShowField will auto enable the tree grid. | | rootParentId | String | null | Set the root parent id. | | treeEnable | Boolean | false | Set true to enable the tree grid. | | stickyHeader | Boolean | false | Set true to use sticky header. | | clickColor | String | | Color displayed in the background when clicking on a line | | rowStyle | Function | {} | The row style formatter function, takes two parameters: row, index | | formatNoMatches | Function | '' | Set message when the rows array is empty |
Events
| Name | Description | params | | -------------- | -------------------------------------------------------------------------------------------- | ------------------------------------- | | onPostBody | It fires after the table body are rendered and available in the DOM. The parameters contain: | element treegrid | | onClickRow | It fires when the user clicks a row | Object: {row, $element, field} | | onClickCell | It fires when the user clicks a cell | Object: {field, value, row, $element} | | onDblClickRow | It fires when the user double clicks a row | Object: {row, $element, field} | | onDblClickCell | It fires when the user double clicks a cell | Object: {field, value, row, $element} | | onExpandRow | It fires when you click the detail icon to expand the detail view | Object: { index, row, $detail} | | onCollapseRow | It fires when you click the detail icon to collapse the detail view | Object: {index, row, detailView} | | headerStyle | The header style formatter function | column |