An example that complex table interaction in Vue.js
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
build done svg sprite and menu icon Feb 23, 2017
config Support gh-pages Feb 24, 2017
src clip forged cell height in table Mar 13, 2017
static init project Feb 21, 2017
.babelrc init project Feb 21, 2017
.editorconfig init project Feb 21, 2017
.eslintignore init project Feb 21, 2017
.eslintrc.js init project Feb 21, 2017
.gitignore init project Feb 21, 2017
README.md Merge branch 'feature/docs' Mar 14, 2017
index.html add meta on html Mar 13, 2017
package.json fix typo Feb 24, 2017
yarn.lock Support gh-pages Feb 24, 2017

README.md

Vue Data Grid

An example(live demo) that complex table interaction in Vue.js, which is rebounded the design by Virgil Pana

demo

See full interaction video

Build Setup

# install dependencies
yarn

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

# build for production with minification
yarn run build

# build for production and view the bundle analyzer report
yarn run build --report

# deploy bundled files to gh-pages
yarn run deploy

Feature

  • Load data from json and import table interaction configuration, which is flexible and scalable (data source used in demo).
  • Present data in real table tag, which keep html semantic
  • Load icons via svg sprite, which is resuable and pixel perfact
  • Group data by month and year automatically
  • Long contents in cells are trimmed automatically, which are expandable by clicking the columns
  • The length of expanding columns are calculated by data automatically
  • Cells have more menus or details, such as adding google map query links automatically
  • Sort data by ascending or descending and filter data by range, whose bounds are calculated by data automatically
  • Select columns to show by opening context menu with right click on header

Acknowledgement