vue-grid

A flexible grid component for Vue.js

vue-grid is designed to be an advanced Vue.js grid component allowing for fast loading and rendering of tabular data.

Documentation

https://github.com/dzwillia/vue-grid/

Demo

https://dzwillia.github.io/vue-grid

Requirements

• Vue.js (^v2.1.4)

Browser support

IE 10+ (due to Flexbox support).

Installation

NPM

npm install vue-grid2 --save

Usage

All styling for this component is done using Tachyons.css. No external CSS files are required at this time.

ES6

<grid
  data-url="https://enter-your-data/url/endpoint/here"
></grid>

Please note that for now the JSON payload must be formatted as follows:

{
  "columns": [
    { "name": "col1" },
    { "name": "col2" },
    { "name": "col3" }
  ],
  "rows": [
    {
      "col1": "Column 1 Row 1",
      "col2": "Column 2 Row 1",
      "col3": "Column 3 Row 1"
    },{
      "col1": "Column 1 Row 2",
      "col2": "Column 2 Row 2",
      "col3": "Column 3 Row 2"
    },{
      "col1": "Column 1 Row 3",
      "col2": "Column 2 Row 3",
      "col3": "Column 3 Row 3"
    }
  ],
  "total_count": 1000
}

The columns node only needs to be provided on the first call.

License

vue-grid is open source and released under the MIT License.

Copyright (c) 2017 David Z Williams.

PS: I would love to know if you're using vue-grid. Tweet to me at @padredaveo.