A Vue wrapper component for Grid.js.
npm install gridjs-vue
<script>
import Grid from 'gridjs-vue'
export default {
components: {
Grid
}
}
</script>
/* in `main.js` or wherever you specify your global components */
import Grid from 'gridjs-vue'
Vue.use(Grid)
Pass cols
(an array of column headers) and either rows
, from
, or server
as a data source to the component. Everything else is optional.
Refer to Grid.js documentation for specific configuration options.
<template>
<grid :cols="cols" :rows="rows"></grid>
</template>
<script>
import Grid from 'gridjs-vue'
export default {
name: 'Cars',
components: {
Grid
},
data() {
return {
cols: ['Make', 'Model', 'Year', 'Color'],
rows: [
['Ford', 'Fusion', '2011', 'Silver'],
['Chevrolet', 'Cruz', '2018', 'White']
]
}
}
}
</script>
{
"autoWidth": true,
"classNames": undefined,
"cols": [""],
"from": undefined,
"language": undefined,
"pagination": false,
"rows": undefined,
"search": false,
"server": undefined,
"sort": false,
"styles": undefined,
"theme": "mermaid",
"width": "100%"
}
<template>
<grid
:auto-width="autoWidth"
:class-names="classNames"
:cols="cols"
:from="from"
:language="language"
:pagination="pagination"
:rows="rows"
:search="search"
:server="server"
:sort="sort"
:styles="styles"
:width="width"
></grid>
</template>
<script>
import Grid from 'gridjs-vue'
export default {
name: 'MyTable',
components: {
Grid
},
data() {
return {
// REQUIRED:
// An array containing strings of column headers (`columns` in the Grid.js API)
cols: ['col 1', 'col 2'],
// OR an array containing objects defining column headers
cols: [
{
name: 'Column 1',
id: 'col1'
},
{
name: 'Column 2',
id: 'col2'
}
]
// AND EITHER an array containing row data (`data` in the Grid.js API)
rows: [
['row 1 col 1', 'row 1 col 2'],
['row 2 col 1', 'row 2 col 2']
],
// OR an array containing JSON row data
rows: [
{ col1: 'row 1', col2: 'row 1' },
{ col1: 'row 2', col2: 'row 2' }
]
// OR a function returning an array of row data
rows() {
return [
{ col1: 3 + 4, col2: 5 + 6 },
{ col1: 1 * 2, col2: 7 * 8 }
]
}
// OR a string of an HTML table selector to import
from: '.my-element',
// OR a function returning an HTML table string
from() {
return `
<table>
<tr><th>column 1</th></tr>
<tr><td>${1 * 2}</td></tr>
</table>
`
}
// OR a server settings function or object
server() ({
url: 'https://api.com/search?q=my%20query',
then: res => res.data.map(col => [col1.data, col2.data]),
handle: res => res.status === 404
? { data: [] } : res.ok
? res.json() : new Error('Something went wrong')
}),
// OPTIONAL:
// Boolean to automatically set table width
autoWidth: true / false,
// Object with CSS class names (`className` in the Grid.js API)
classNames: {},
// Localization dictionary object
language: {},
// Boolean or pagination settings object
pagination: true / false || {},
// Boolean
search: true / false,
// Boolean or sort settings object
sort: true / false || {},
// Object with CSS styles (`style` in the Grid.js API)
styles: {},
// String with name of theme or 'none' to disable
theme: 'mermaid',
// String with css width value
width: '100%',
}
}
}
</script>
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!