A Vue.js wrapper component for Grid.js
🏠 Homepage
yarn install gridjs-vue || npm install gridjs-vue/* in `main.js` or wherever you specify your global components */
import Grid from 'gridjs-vue'
Vue.use(Grid)<script>
import Grid from 'gridjs-vue'
export default {
components: {
Grid
}
}
</script>Pass cols and either rows, 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"
:cols="cols"
:from="from"
:language="language"
:pagination="pagination"
:rows="rows"
:search="search"
:server="server"
:sort="sort"
:width="width"
></grid>
</template>
<script>
import Grid from 'gridjs-vue'
export default {
name: 'MyTable',
components: {
Grid
},
data() {
return {
autoWidth: true / false, // boolean to automatically set table width
cols: ['column 1', 'column 2'], // array containing strings of column headers
from: '.my-element', // string of HTML table selector
language: {}, // localization dictionary object
pagination: true / false || {}, // boolean or pagination settings object
rows: ['row 1: col 1', 'row 1: col 2'] // array containing row data
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 or 'none' to disable
width: '100%' // string with css width value
}
}
}
</script>{
"autoWidth": true,
"cols": [""],
"from": undefined,
"language": undefined,
"pagination": false,
"rows": undefined,
"search": false,
"server": undefined,
"sort": false,
"theme": "mermaid",
"width": "100%"
}Originally authored by Daniel Sieradski.
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!