# Guide
# Getting Started
# Introduction
It's a data table created using Vue.js, which has some features like :
- Show data per page
- Sort columns
- Cells Custom rendering
- CRUD Actions
- Customize the columns display
- Filter data by fields
# Installation
npm install vueye-table --save
# Requirements
To make this component work with Vue 2, you should use the Vue composition-api plugin by importing it and using it in main.js
as follows :
import Vue from 'vue';
import App from './App.vue';
import VueComp from '@vue/composition-api';
Vue.use(VueComp);
new Vue({
render: h => h(App),
}).$mount('#app');
# Columns configuration
The columns
prop value could have the following structure :
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
...
]
key | description |
---|---|
key | the corresponding field in the data array, it could be a path to a nested field |
label | the text to show in the table head |
sortable | Allow or not the column sorting |
type | the field type |
display | show the column |
# Examples
# Basic Example
Input
<template>
<VueyeTable
:header-display="false"
:data="employees"
:columns="columns"
title="Employees">
</VueyeTable>
</template>
<script>
import employees from "../assets/employees.json";
export default {
name: "BasicExample",
data: () => ({
employees: employees,
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
{
key: "employee_name",
label: "Employee Name",
sortable: true,
display: true
},
{
key: "employee_salary",
label: "Employee Salary",
display: true,
sortable: true
},
{
key: "employee_age",
label: "Employee Age",
sortable: true
},
{
key: "address.city",
label: "Address",
display: true,
sortable: true
}
]
})
};
</script>
Output
# Display table header
The table header contains the title, search input and the export and print buttons
Input
<template>
<VueyeTable
:data="employees"
:columns="columns"
title="Employees">
</VueyeTable>
</template>
<script>
import employees from "../assets/employees.json";
export default {
name: "WithHeader",
data: () => ({
employees: employees,
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
{
key: "employee_name",
label: "Employee Name",
sortable: true,
display: true
},
{
key: "employee_salary",
label: "Employee Salary",
display: true,
sortable: true
},
{
key: "employee_age",
label: "Employee Age",
sortable: true
},
{
key: "address.city",
label: "Address",
display: true,
sortable: true
}
]
})
};
</script>
Output
Employees
# Table body custom rendering
Input
<template>
<div id="app">
<VueyeTable :data="users" :columns="columns" title="Github users">
<template v-slot:avatar_url="{item}">
<img :src="item.avatar_url" alt class="ve-avatar">
</template>
<template v-slot:html_url="{item}">
<a target="_blank" :href="item.html_url">{{item.html_url}}</a>
</template>
</VueyeTable>
</div>
</template>
<script>
import users from "../assets/github_users.json";
export default {
name: "CustomRendering",
data: () => ({
users,
columns: [
{
key: "avatar_url",
label: "Avatar",
sortable: true,
display: true
},
{
key: "login",
label: "User name",
sortable: true,
display: true
},
{
key: "html_url",
label: "Profile",
display: true
}
],
})
};
</script>
<style lang="scss">
.ve-avatar {
height: 32px;
width: 32px;
border-radius: 50%;
border: thin solid #aaa;
}
</style>
Github users
# Table body cells custom rendering
If you want to take the control over the whole cell you can prefix
the column
key with cell.
keyword and here you're able to style and render the td
element as you want
Input
<template>
<div id="app">
<VueyeTable :data="todos" :columns="columns" title="Todos">
<template v-slot:cell.completed="{item}">
<td :style="{'background':colors[item.userId-1],'color':'white'}">{{item.userId}}</td>
</template>
<template v-slot:completed="{item}">{{item.completed?'Yes':'No'}}</template>
</VueyeTable>
</div>
</template>
<script>
import todos from "../assets/todos.json";
export default {
name: "FullCellCustomRendering",
data: () => ({
todos,
columns: [
{
key: "id",
label: "ID",
sortable: true,
display: true
},
{
key: "userId",
label: "User ID",
sortable: true,
display: true
},
{
key: "title",
label: "Title",
display: true
},
{
key: "completed",
label: "Completed",
display: true
}
],
//we have 10 users and each one is defined by color, that color will be shown in the
//custom cells
colors: [
"#004D40",
"#00695C",
"#2e003e",
"#3d2352",
"#05386B",
"#379683",
"#022140",
"#265077",
"#0c0023",
"#fc0023",
]
})
};
</script>
<style lang="scss">
.ve-avatar {
height: 32px;
width: 32px;
border-radius: 50%;
border: thin solid #aaa;
}
</style>
Todos
# Table head custom rendering
Input
<template>
<div id="app">
<VueyeTable :data="users" :columns="columns" title="Github users">
<template v-slot:header.avatar_url="{column}">
{{column.label}} <i>(The user profile image)</i>
</template>
<template v-slot:header.html_url="{column}">
{{column.label}} <i>(Link to the user profile)</i>
</template>
<template v-slot:avatar_url="{item}">
<img :src="item.avatar_url" alt class="ve-avatar">
</template>
<template v-slot:html_url="{item}">
<a target="_blank" :href="item.html_url">{{item.html_url}}</a>
</template>
</VueyeTable>
</div>
</template>
<script>
import users from "../assets/github_users.json";
export default {
name: "HeadCustomRendering",
data: () => ({
users,
columns: [
{
key: "avatar_url",
label: "Avatar",
sortable: true,
display: true
},
{
key: "login",
label: "User name",
sortable: true,
display: true
},
{
key: "html_url",
label: "Profile",
display: true
}
],
})
};
</script>
<style lang="scss">
.ve-avatar {
height: 32px;
width: 32px;
border-radius: 50%;
border: thin solid #aaa;
}
</style>
Output
Github users
# Table head full cell custom rendering
Input
<template>
<div id="app">
<VueyeTable :data="employees" :columns="columns" title="Employees">
<template v-slot:header.cell.employee_salary="{column}">
<th style="background:#e3e3e3;color:#000;">{{column.label}}</th>
</template>
<template v-slot:cell.employee_salary="{item}">
<td style="background:#e3e3e3;color:#000;">
<b
v-if="item.employee_salary>100000"
style="background:#3bb640;color:white;padding:3px;border-radius:2px"
>{{item.employee_salary}}</b>
<b
v-else
style="background:#ee4422;color:white;padding:3px;border-radius:2px"
>{{item.employee_salary}}</b>
</td>
</template>
<template v-slot:header.cell.employee_name="{column}">
<th class="ve-table-custom-cell">{{column.label}}</th>
</template>
<template v-slot:cell.employee_name="{item}">
<td class="ve-table-custom-cell">{{item.employee_name}}</td>
</template>
</VueyeTable>
</div>
</template>
<script>
import employees from "../assets/employees.json";
export default {
name: "HeadCellCustomRendering",
data: () => ({
employees: employees,
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
{
key: "employee_name",
label: "Employee Name",
sortable: true,
display: true
},
{
key: "employee_salary",
label: "Employee Salary",
display: true,
sortable: true
},
{
key: "employee_age",
label: "Employee Age",
sortable: true
},
{
key: "address.city",
label: "Address",
display: true,
sortable: true
}
]
}),
methods: {}
};
</script>
<style lang="scss">
.ve-table-custom-cell {
background: rgb(30, 118, 233);
color: white;
}
</style>
Output
Employees
# Select rows
Input
<template>
<div>
<VueyeTable
:data="users"
:columns="columns"
select-rows
v-model="selectedUsers"
title="Users"
></VueyeTable>
<hr>
<pre class="language-js">
{{selectedUsers}}
</pre>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "BasicExample",
data: () => ({
users: [],
selectedUsers: [],
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
{
key: "name",
label: "Name",
sortable: true,
display: true
},
{
key: "username",
label: "User name",
sortable: true,
display: true
},
{
key: "address.city",
label: "City",
display: true,
sortable: true
}
]
}),
created() {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then(result => {
this.users = result.data;
})
.catch(err => {});
}
};
</script>
Output
Users
[]
# Expand rows
Input
<template>
<div>
<VueyeTable :data="employees" :columns="columns" title="Employees">
<template v-slot:expand="{item}">
<div style="padding:10px">
<div>Details</div>
<div>
<ul>
<li v-for="(val, key,index) in getMoreDetails(item.id)" :key="index">
<strong>{{key}} :</strong>
{{val}}
</li>
</ul>
</div>
</div>
</template>
</VueyeTable>
</div>
</template>
<script>
import employees from "../assets/employees.json";
export default {
name: "App",
data: () => ({
employees: employees,
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
{
key: "employee_name",
label: "Employee Name",
sortable: true,
display: true
},
{
key: "employee_salary",
label: "Employee Salary",
display: true,
sortable: true
},
{
key: "employee_age",
label: "Employee Age",
sortable: true
},
{
key: "address.city",
label: "Address",
display: true,
sortable: true
},
{
key: "actions",
label: "Actions",
sortable: false,
display: true
}
]
}),
methods: {
getMoreDetails(id) {
return this.employees.find(emp => emp.id === id);
}
}
};
</script>
Output
Employees
# Config default labels
Input
<template>
<VueyeTable
:data="employees"
:columns="columns"
title="Employees"
:config='config'
>
</VueyeTable>
</template>
<script>
import employees from "../assets/employees.json";
export default {
name: "ConfigDefaultLabels",
data: () => ({
employees: employees,
config: {
filterBy: "Chercher par",
search: "Chercher",
nbRowsPerPage: "Nombre des lignes par page",
of: "de"
},
columns: [
{
key: "id",
label: "ID",
sortable: true,
type: "number",
display: true
},
{
key: "employee_name",
label: "Employee Name",
sortable: true,
display: true
},
{
key: "employee_salary",
label: "Employee Salary",
display: true,
sortable: true
},
{
key: "employee_age",
label: "Employee Age",
sortable: true
},
{
key: "address.city",
label: "Address",
display: true,
sortable: true
}
]
})
};
</script>
Output
Employees
# Props
Name | Description |
---|---|
title | the data table title |
columns | the attributes or columns |
data | JS array of object or json content |
filter-by | specify the default column for filter |
per-page-values | the array of per pages values |
per-page | the default per page |
select-rows | add checkbox columns in order to select rows |
v-model | returns the selected rows |
dense | Show table rows in small size |
headerDisplay | show/hide the table header |
config | change the default labels |