design-grid

A Design-Grid vue component.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

Features

• Custom columns (caption, style, filter)
• Drag to resize column width and row height
• Change the enabled and style of a specific cell
• Dynamic and observable
• ...

Preview

Installation

NPM

$ npm install design-grid

Reference

// CommonJS
// var DesignGrid = require('design-grid').default;
// require('design-grid/dist/design-grid.min.css');

// ES6
import DesignGrid from 'design-grid';
import 'design-grid/dist/design-grid.min.css'

new Vue({
  components: {
    'design-grid': DesignGrid,
  },
});

Browser

<script src="path/to/vue.min.js"></script>
<script src="dist/design-grid.min.js"></script>

<link rel="stylesheet" href="dist/design-grid.min.css">

<script type="text/javascript">
  var DesignGrid = window['design-grid'].default;
</script>

Usage

<div id="app">
  <d-grid v-bind:columns="columns"
          v-bind:source="source"
          v-bind:default-height="defaultHeight"></d-grid>
</div>

import Vue from 'vue';
import DesignGrid from 'design-grid';
import 'design-grid/dist/design-grid.min.css'

new Vue({
  el: '#app',
  components: { 'd-grid': DesignGrid },
  data: {
    columns: [
      {
        key: 'A', width: 260,
        // whether the cell is enabled is depending on a PROPERTY of the item
        enabled: '__enabled',
        // the cell style is depending on a FUNCTION
        style: (item, index) => index === 2 && { borderBottom: '3px solid green' },
        // cell content style definition
        contentStyle: '__contentStyle',
      },
      {
        key: 'B', width: 120, caption: 'custom B',
        // the cell style is depending on a PROPERTY of the item
        style: '__style',
      },
      {
        key: 'C', width: 50, align: 'right',
        // the cell style is the fixed
        style: { borderRight: '4px solid orange' },
      },
    ],
    source: [
      { A: 'A3/B2', B: '//bing.com', C: '5', __enabled: true, __style: { border: '2px solid gray' } },
      { A: 'link-path-test.PFSTDNAME', B: '', C: '4', __contentStyle: { color: 'red', textDecoration: 'underline' } },
      // row 3 has a custom height: 45px
      { A: 'link-path-test.PFTYPE', B: '', C: '', __height: 45 },
      { A: 'test message', B: 'abc', C: '', __enabled: true },
    ],
    defaultHeight: 26,
  },
}