Basic Table
Tables are made using vue-good-table-next package. You can use all props and slots from vue-good-table-next package.
Installation
bash
# npm
npm install --save vue-good-table-next
# yarn
yarn add vue-good-table-next
Import globally in app:
js
import VueGoodTablePlugin from "vue-good-table-next";
// import the styles
import "vue-good-table-next/dist/vue-good-table-next.css";
Vue.use(VueGoodTablePlugin);
Or you can import into your component:
js
// import the styles
import 'vue-good-table-next/dist/vue-good-table-next.css'
import { VueGoodTable } from 'vue-good-table-next';
// add to component
components: {
VueGoodTable,
}
Basic example
vue
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
styleClass=" vgt-table"
:sort-options="{ enabled: false }"
/>
</div>
</template>
<script>
export default {
name: "my-component",
data() {
return {
columns: [
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
type: "date",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
],
rows: [
{ id: 1, name: "John", age: 20, createdAt: "", score: 0.03343 },
{
id: 2,
name: "Jane",
age: 24,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
],
};
},
};
</script>