1.1.8 • Published 3 years ago
vue-awesome-grid v1.1.8
vue-awesome-grid
How it works?
Build the component
$ npm install
$ npm run buildComponent 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}.