0.1.3 ā¢ Published 4 years ago
vue-gridjs v0.1.3
Welcome to vue-gridjs š
A Vue.js wrapper component for Grid.js
š Homepage
Install
yarn install vue-gridjs || npm install vue-gridjs
Component Registration
Global Registration
/* in `main.js` or wherever you specify your global components */
import Grid from 'vue-gridjs'
Vue.use(Grid)
Local Registration
<script>
import Grid from 'vue-gridjs'
export default {
components: {
Grid
}
}
</script>
Usage
Pass either data
, from
, or server
as a data source. Everything else is optional.
Refer to Grid.js documentation for specific configuration options.
<template>
<grid
:auto-width="autoWidth"
:data="data"
:from="from"
:language="language"
:pagination="pagination"
:search="search"
:server="server"
:sort="sort"
:width="width"
></grid>
</template>
<script>
import Grid from 'vue-gridjs'
export default {
name: 'MyTable',
components: {
Grid
},
data() {
return {
autoWidth: true / false, // boolean to automatically set table width
data: {
// object containing arrays columns & rows
cols: ['column 1', 'column 2'],
rows: ['row 1: col 1', 'row 1: col 2']
},
from: '.my-element', // string of HTML table selector
language: {}, // localization dictionary object
pagination: true / false || {}, // boolean or pagination settings object
search: true / false || {}, // boolean or search settings object
server: {}, // server settings object
sort: true / false || {}, // boolean or sort settings object
theme: 'mermaid', // string with name of theme
width: '100%' // string with css width value
}
}
}
</script>
Default settings
{
"autoWidth": true,
"data": {
"cols": [""],
"rows": [""]
},
"from": undefined,
"language": undefined,
"pagination": false,
"search": false,
"server": undefined,
"sort": false,
"theme": "mermaid",
"width": "100%"
}
Author
š¤ Daniel Sieradski hello@self.agency
- Website: https://self.agency
- Twitter: @selfagency_llc
- Gitlab: @selfagency
š¤ Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Show your support
Give a āļø if this project helped you!
This README was generated with ā¤ļø by readme-md-generator