vue-awesome-grid

How it works?

demo

Build the component

$ npm install
$ npm run build

Component is build to

• CommonJS/UMD javascript module
• an ES6 javascript module

Usage

import Vue from 'vue';
import { VueAwesomeGrid } from 'vue-awesome-grid';

Vue.use(VueAwesomeGrid);

Tip: too many props to pass? v-bind can help

<template>
  <div>
    <!-- Too much code: -->
    <simple-component
      :g="1"
      :r="2"
      :i="3"
      :d="4">
    </simple-component>

    <!-- Do the same thing but simplier -->
    <simple-component v-bind="$data" />
  </div>
</template>
<script>
export default {
  data: () => ({
    g: '1',
    r: '2',
    i: '3',
    d: '4'
  });
}
</script>

Reference

VueAwesomeGrid props

| Property | Description | Type| Default | Mandatory | |---|---|---|---|---| | columns | definition of columns (see below) | array | - | Yes | | data | data of the current page | array | - | Yes | | total | total number of the records (if set to 0, then total block is disabled) | number | 0 | Yes | | filtered | total number of filtered records | number | - | No | | query | query object | object | - | Yes | | summary | summary row | HTMLTableRowElement | - | No | | headerSettings | whether to render headerSettings | boolean | true | No | | pagination | whether to render pagination | boolean | true | No | | pageSizeOptions | options for page size select | array | [10, 25, 100] | No | | noDataPlaceholder | placeholder for grid in case empty data in table | string | (No Data) | No | | extraProps | object for extra props, which will be passed to dynamic components | object | - | No |

columns

| Key | Description | Type | Default | Mandatory | |---|---|---|---|---| | title | displayed title of column | string | - | Yes | | label | label in headerSettings (title will take its place if not set) | string | - | No | | field | field name of the row in data structure | string | - | No | | sortable | is sortable? | boolean | false | No | | visible | is visible? | boolean | true | No | | tdComp | dynamic component for 'td' | string/object | - | No | | tdClass | classes for td | string or function(value, row) | - | No | | tdStyle | inline styles for td | object | - | No | | thClass | classes for th | string | - | No | | render | formatting functions for display | function(value, row) | - | No | | clickEvent | callback cell clicked | function(value, row) | - | No |

query

| Key | Description | Type | Default | |---|---|---|---| | limit | count of entries to return | number | 10 | | offset | return data since this entry number | number | 0 | | order | direction, asc or desc | string | "" | | sort | sort field name | string | "" | | search | search string | string | "" |

And anything else you might need (this parameters must be implemented in backend).

summary

Row that is located at the bottom of the table and shows additional resulting information about the data. By default, the summary row is not showing. To show it you must set it to object with similar structure, as the row in table.

extraProps

Is used to pass additional properties to nested components. For example, you can pass bus object for events.

ROW_UPDATED

If the data of one row is updated and you don't need to update the whole data object, you can call ROW_UPDATED event to update only one row. You must pass one parameter to event with the folowing structure: { id: idValue, data: newRowData}.