# quasar-ui-tree-table
> Display tree structure data in Table
Latest version **0.1.0-0** (published 2023-05-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install quasar-ui-tree-table
pnpm add quasar-ui-tree-table
yarn add quasar-ui-tree-table
bun add quasar-ui-tree-table
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.0-0 |
| Published | 2023-05-14 |
| First published | 2023-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | ray |
| Maintainers | rayxue |
## Links
- npm: https://www.npmjs.com/package/quasar-ui-tree-table
- Repository: https://github.com/rayinfinite/quasar-ui-tree-table
- Issues: https://github.com/rayinfinite/quasar-ui-tree-table/issues
- npm.io page: https://npm.io/package/quasar-ui-tree-table
## Recent versions
- 0.1.0-0 (latest) — 2023-05-14
- 0.0.2-0 — 2023-05-14
- 0.0.1 — 2023-05-14
## README
# Component QTreeTable
QTreeTable is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction). It can display tree structure data in Table.
[](https://www.npmjs.com/package/quasar-ui-tree-table)
[](https://www.npmjs.com/package/quasar-ui-tree-table)
**Compatible with Quasar UI v2 and Vue 3**.
# How to use
QTreeTable is a component that allows you to display tree data in table. It use columns and rows properties like basic [QTable](https://quasar.dev/vue-components/table#defining-the-columns), and rows use its field key `children` to define its children.
Because QTreeTable is developed based on QTable, so you can use most [api of QTable](https://quasar.dev/vue-components/table#qtable-api).
There is one new props `icon` is a array contain 2 element respectively for the icon appear when row not expanded and expanded. The default value is `["add", "remove"]` and you can use `['keyboard_arrow_right', 'keyboard_arrow_down']` to have a try.
# Diff from [QHierarchy](https://github.com/pratik227/quasar-qhierarchy)
[QHierarchy](https://github.com/pratik227/quasar-qhierarchy) is using QMarkupTable, but this one is using QTable and can use [api of QTable](https://quasar.dev/vue-components/table#qtable-api). And this one have a better UI interface if using `dense`.
# Component QTreeTable
> Short description of the component
# Usage
## Quasar CLI project
Install the [App Extension](../app-extension).
**OR**:
Create and register a boot file:
```js
import Vue from 'vue'
import Plugin from 'quasar-ui-tree-table'
import 'quasar-ui-tree-table/dist/index.css'
Vue.use(Plugin)
```
**OR**:
```html
```
## Vue CLI project
```js
import Vue from 'vue'
import Plugin from 'quasar-ui-tree-table'
import 'quasar-ui-tree-table/dist/index.css'
Vue.use(Plugin)
```
**OR**:
```html
```
## UMD variant
Exports `window.qTreeTable`.
Add the following tag(s) after the Quasar ones:
```html
```
If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
```html
```
# Setup
```bash
$ yarn
```
# Developing
```bash
# start dev in SPA mode
$ yarn dev
# start dev in UMD mode
$ yarn dev:umd
# start dev in SSR mode
$ yarn dev:ssr
# start dev in Cordova iOS mode
$ yarn dev:ios
# start dev in Cordova Android mode
$ yarn dev:android
# start dev in Electron mode
$ yarn dev:electron
```
# Building package
```bash
$ yarn build
```
# Adding Testing Components
in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.
# Adding Assets
If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.
# Donate
If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
# License
MIT (c) ray
---
_Source: https://npm.io/package/quasar-ui-tree-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._