@reallife/vue-tree-grid

Vue Tree Grid

WORK IN PROGRESS! USE IN PRODUCTION ON YOUR OWN RISK!

Install

npm i --save @reallife/vue-tree-grid

or

yarn add @reallife/vue-tree-grid

Usage

<template>
  <div id="app">
    <VueTreeGrid
      :columns="columns"
      :tree="tree"
      @check="onRowChecked"
      @expand="onRowExpanded"
    >
      <template slot="description--row-cell" slot-scope="scope">
        Path: <code>{{scope.row._path}}</code>
      </template>
    </VueTreeGrid>
  </div>
</template>

<script>
import VueTreeGrid from '@reallife/vue-tree-grid' 

export default {
  name: 'app',
  components: {
    VueTreeGrid,
  },
  data() {
    return {
      columns: [
        {
          type: 'checkbox',
          width: '10%',
        },
        {
          type: 'prop',
          prop: 'name',
          label: 'Name',
          width: '20%',
        },
        {
          type: 'prop',
          prop: 'description',
          label: 'Description',
          width: '70%',
        },
      ],
      tree: [
        {
          name: 'Parent 1',
          _isExpanded: true,
          children: [
            {
              name: 'Child 1',
            },
            {
              name: 'Child 2',
              children: [
                {
                  name: 'Child 2-1',
                  _isChecked: true,
                },
                {
                  name: 'Child 2-2',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onRowChecked(checkedRows) {
      console.log(checkedRows);
    },
    onRowExpanded(row) {
      if (row._isExpanded) {
        console.log('Row with path' + row._path + ' has been expanded');
      } else {
        console.log('Row with path' + row._path + ' has been collapsed');
      }
    }
  },
};
</script>

Component properties

Name	Required	Type	Default	Description
columns	yes	Array (Details)	-	Columns array
tree	yes	Array (Details)	-	Tree structure of rows
childrenProperty	no	String	'children'	Name of tree's row property that contains children rows
emptyText	no	String	'No data'	Text for empty grid
rowClass	no	Function (params: row )	-	Function that returns style classes for each row

Column properties

Name	Required	Type	Default	Description
type	yes	String	-	Type of column. Available values: "checkbox", "prop".
prop	no	String	-	Row's prop name for output in this column. Using only when type is "prop"
label	no	String	-	Column label
width	no	String	'auto'	Column width

Examples

[
  // Column with checkbox
  {
    type: 'checkbox',
    width: '10%'
  }
    
  // Column for row's property "name"
  {
    type: 'prop',
    prop: 'name',
    label: 'Name',
    width: '300px',
  }
]

Tree structure properties

Each row in tree after passing in component will be contain this properties:

Name	Type	Default	Description
_isChecked	Boolean	false	Determines is row checked
_isIndeterminate	Boolean	false	Determines is row indeterminate
_isExpanded	Boolean	false	Determines is row expanded
_isFolded	Boolean	false	Determines is row folded (for children rows). If parent row is expanded then children rows will be folded
_isDisabled	Boolean	false	Determines is row disabled (row don't change own _isChecked property on parent row checking/unchecking)
_isHidden	Boolean	false	Determines is row hidden (row just hidden, it continue reacts on parent checking/unchecking). If row is hidden, all it's children also hides
_childrenLength	Integer	-	Count of row's children.
_level	Integer	-	Row's level in tree structure. Counts with 1
_path	String	-	Row's path in tree structure. For example: 0.children.4.children.1
_index	Integer	-	Row's index in table

You can use this properties to define initial state of tree and change it from outside of component.

Example tree structure

[
  {
    name: 'Parent 1',
    _isExpanded: true,
    children: [
      {
        name: 'Child 1',
      },
      {
        name: 'Child 2',
        children: [
          {
            name: 'Child 2-1',
            _isChecked: true,
          },
          {
            name: 'Child 2-2',
          },
        ],
      },
    ],
  },
]

Component events

Name	Type	Parameters	Description
check	Function	checkedRows - array of checked rows	Event fires when any row in the tree has been checked or unchecked
expand	Function	row - row that has been expanded or collapsed	Event fires when any row in the tree has been expanded or collapsed

Component slots

You can use slots for changing output of every header label or cell content.

Slot names for body cells looks like %column_prop%--row-cell. For example: name--row-cell.

Slot names for header cells looks like %column_prop%--header-cell. For example: name--header-cell.

Example

<VueTreeGrid
  :columns="columns"
  :tree="tree"
  @check="onRowChecked"
  @expand="onRowExpanded"
>
  <template slot="description--row-cell" slot-scope="scope">
    Path: <code>{{scope.row._path}}</code>
  </template>
</VueTreeGrid>