# 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