# element-tree-grid

> element tree table with vue

Latest version **0.1.4** (published 2020-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install element-tree-grid
pnpm add element-tree-grid
yarn add element-tree-grid
bun add element-tree-grid
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2020-04-28 |
| First published | 2017-03-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 119.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 226 |
| Author | foolishchow |
| Maintainers | foolishchow |
| Keywords | element, element-ui, tree, table, grid, vue, tree-grid, tree-table |

## Links

- npm: https://www.npmjs.com/package/element-tree-grid
- Repository: https://github.com/foolishchow/element-tree-grid
- Homepage: https://github.com/foolishchow/element-tree-grid#readme
- Issues: https://github.com/foolishchow/element-tree-grid/issues
- npm.io page: https://npm.io/package/element-tree-grid

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2020-04-28
- 0.1.3 — 2018-04-05
- 0.1.2 — 2018-04-04
- 0.0.15 — 2017-06-07
- 0.0.14 — 2017-06-06
- 0.0.13 — 2017-06-06
- 0.0.12 — 2017-05-17
- 0.0.11 — 2017-05-11
- 0.0.10 — 2017-05-08
- 0.0.9 — 2017-05-06
- 0.0.8 — 2017-05-05
- 0.0.7 — 2017-05-04
- 0.0.6 — 2017-04-20
- 0.0.5 — 2017-04-19
- 0.0.3 — 2017-03-15
- … 1 more at https://npm.io/package/element-tree-grid/versions

## README

# element-tree-grid
<p>
    <a href="https://www.npmjs.com/package/element-tree-grid">
        <img src="https://img.shields.io/npm/v/element-tree-grid.svg" alt="Version">
    </a> 
    <a href="https://www.npmjs.com/package/element-tree-grid">
        <img src="https://img.shields.io/npm/dm/element-tree-grid.svg" alt="Downloads">
    </a>
</p>

tree grid extends `element` ui  with `vue`   

#### releases v1.0.4
- try to expand row expanded after data reload


**having problems** with `<el-table-column type="selection" fixed></el-table-column>`    

if you have any idea , **welcome !!!**


> [demos](http://htmlpreview.github.io/?https://github.com/foolishchow/element-tree-grid/blob/master/example/test.html) 

> start

- clone to your project
    ```shell
    git clone https://github.com/foolishchow/element-tree-grid.git
    cd element-tree-grid
    npm install #or yarn
    npm run dev
    ```

- use with node
    - install
    ```shell
    npm install element-tree-grid --save
    ```
    - in you project 

    ```javascript
    //common 
    var ElTreeGrid = require('element-tree-grid');
    Vue.component(ElTreeGrid.name,ElTreeGrid);
    ```


> useage   

- common useage
    ```html
    <el-table :data="model.menus" border max-height="250">
        <el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" label="labelname" width="220"></el-table-tree-column>
        <el-table-column prop="description" label="description"   width="180"></el-table-column>
    </el-table>
    ```
- get children from remote
    - html
    ```html
    <div id="app" style="padding: 30px;">
        <el-table :data="model.menus" border max-height="400">
            <el-table-tree-column 
                :remote="remote"
                file-icon="icon icon-file" 
                folder-icon="icon icon-folder" 
                prop="label" label="MenuName" width="320"></el-table-tree-column>
            <el-table-column prop="id" label="id" width="180"></el-table-column>
            <el-table-column prop="description" label="Description" :show-overflow-tooltip="true" width="180"></el-table-column>
        </el-table>
    </div>
    ```
    - javascript   
    ```javascript
    new Vue({
        el: "#app",
        data: {
            model: {
                menus: trees
            }
        },
        methods:{
            remote(row,callback){
                // async or sync are both supported
                setTimeout(function() {
                    callback(row.children)
                },500)
            }
        }
    })
    ```
- attributes
    > all props of `el-table-column` are supported;

    | name        | description                                                                                    |                    values                     |
    | ----------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------: |
    | prop        | same as `el-table-column`                                                                      |                                               |
    | label       | same as `el-table-column`                                                                      |                                               |
    | width       | same as `el-table-column`                                                                      |                                               |
    | fixed       | same as `el-table-column`                                                                      |                                               |
    | resizable   | same as `el-table-column`                                                                      |                                               |
    | formatter   | same as `el-table-column`                                                                      |                                               |
    | className   | same as `el-table-column`                                                                      |                                               |
    | treeKey     | the key for neasted parse                                                                      |       type:`String`,<br> default:`'id'`       |
    | childNumKey | the key of childNum                                                                            |   type:`String`,<br> default:`'child_num'`    |
    | parentKey   | the key of parent_id                                                                           |   type:`String`, <br>default:`'parent_id'`    |
    | levelKey    | the key of node's depth                                                                        |     type:`String`,<br> default:`'depth'`      |
    | childKey    | the key of node's children been placed                                                         |    type:`String`, <br>default:`'children'`    |
    | fileIcon    | file icon className                                                                            |  type:`String`, <br>default:`'el-icon-file'`  |
    | folderIcon  | folder icon className ,when opend use: `folderIcon-open`                                       | type:`String`,<br> default:`'el-icon-folder'` |
    | remote      | remote method to get children                                                                  |      type:`Function`,<br/>default:`null`      |
    | allRemote   | request all data from remote ,you have to config prop `remote` first,default use request cache |      type:`Boolean`,<br/>default:`false`      |
    | expandAll   | expand all nodes when loaded                                                                   |      type:`Boolean`,<br/>default:`false`      |
    | expandKey   | key tells if the line is opened at inited ( just expended once )                               |     type:`String`,<br/>default:`expanded`     |
    | indentSize  | indent number ,united in `px`                                                                  |        type:`Number`,<br/>default:`14`        |

> examples 

- common 
```html
<el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" 
            label="labelname" 
            width="220"></el-table-tree-column>
```

- with formatter
```html
<el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" 
            label="labelname" 
            :formatter="formatter"
            width="220"></el-table-tree-column>
```

- with scopedSolts
```html
<el-table-tree-column 
            file-icon="icon icon-file" 
            folder-icon="icon icon-folder" 
            prop="label" 
            label="labelname" 
            width="220">
    <template slot-scope="scope">
        <span>prefix =></span>
        <span>{{scope.row.label}} -- {{scope.row.id}}</span> 
        <span><= suffix</span>   
    </template>
</el-table-tree-column>
```

---
_Source: https://npm.io/package/element-tree-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._