vue-ui-grid

Simple, fast, powerful grid package for vuejs

Demo

https://mihnsen.github.io/vue-ui-grid/

Installation

npm install vue-ui-grid
or
yarn add vue-ui-grid

Usage

import VGrid from 'vue-ui-grid';

// Use it
Grid.vgrid-center(
  :columns="gridColumns",
  :data="gridData",
  :per-page="2",
  :column-filter="true",
)
  template(
    slot="column-action"
    slot-scope="{ entry }"
  )
    button(
      type="button",
    ) ADD

// Or list

List(
  :columns="listColumns",
  :data="listData",
  :per-page="10",
  :column-visible="true",
  :orderable="true",
  ref="list"
)
  template(
    slot="column-action"
    slot-scope="{ entry }"
  )
    button(
      type="button",
    ) ADD
    a(
      href="gooogle.com"
    ) Edit

// CSS
@import '~vue-ui-grid/src/assets/scss/index'

Setup your promise function as a promise like this.

export default {
  data() {
    return {
      gridColumns: [
        {
          field: 'name',
          lable: 'Actor'
        },
        {
          field: 'power',
          lable: 'Power'
        }
      ],
      gridData: [
        { name: 'Chuck Norris', power: Infinity },
        { name: 'Bruce Lee', power: 9000 },
        { name: 'Jackie Chan', power: 7000 },
        { name: 'Jet Li', power: 8000 }
      ]
    }
  }
}

Column Properties

{
  field: 'id',
  label: 'ID',
  filter: true,
  hidden: true,
  width: 3
}

Option	Required	Default	Description
field	Yes		Title
label	No		Label of column
type	No	String	field type (text/number/date)
filter	No	False	Set column filter or not
order	No	False	Set column order or not
hidden	No	False	Set hidden column, can't see
width	No	False	Set width column, use for list
format	No		Format content: '{name}'

Props

Props	Required	Default	Description
columns	Yes	[]	Column config
data	Yes	[]	Data source
per-page	No	10	Number of items per page
searchable	No	True	Search data in header
filterable	No	True	Filter data in header
column-visible	No	False	Custom show hide, order column
column-filterable	No	False	Filter column in side grid
index	No	0	Initial page
status	No	True	Grid status
pagination	No	True	Paginate data

Development

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Customize configuration

See Configuration Reference.