DEV Community

Cover image for vue3-easy-data-table is coming

Posted on • Updated on

vue3-easy-data-table is coming


vue3-easy-data-table is a customizable and easy-to-use data table component made with Vue.js 3.x. vue3-easy-data-table provides many basic features such as multiple selecting, single field sorting, and searching. Besides, it also provides many highly customizable features which you can check in this article.

chrome-capture-2022-5-10 (2).gif

Two modes

vue3-easy-data-table can be used in client-side or server-side mode. Client-side mode is for the case that all data has already been loaded. In other words, your initial call is asking for all the pages from a server. In server-side mode, you need to request limited data from a server every time you navigate to a new page.

client-side mode

chrome-capture-2022-5-10 (3).gif

server-side mode


Edit on CodeSandbox

According to the examples above, we can see that in server-side mode, once you navigate to a new page, a new request is sent with loading animation displaying.

Highly customizable

Color customization

By using color related props provided by vue3-easy-data-table. You can customize the background color, font color, border color of various elements of the table.

截屏2022-06-10 下午6.20.55.png

Item slot

By using the slots feature of Vue.js, You can customize only certain columns like this:

<EasyDataTable :headers="headers" :items="items">
    <template #team="{ teamName, teamUrl }">
        <a :href="teamUrl">{{ teamName }}</a>
Enter fullscreen mode Exit fullscreen mode

截屏2022-06-10 下午6.27.13.png

Loading slot

Similarly, By using the slots feature of Vue.js, You can customize loading effect like this:

<EasyDataTable :headers="headers" :items="items">
    <template #loading>
      <img src="" style="width: 100px;height: 80px;"/>
Enter fullscreen mode Exit fullscreen mode

chrome-capture-2022-5-10 (4).gif

Footer customization

vue3-easy-data-table exposes some footer related variables and functions by which you can customize your own footer outside of vue3-easy-data-table:

Attention: don't forget to use hide-footer prop to hide the native footer of vue3-easy-data-table.

chrome-capture-2022-5-10 (5).gif

Fixed columns

You can fixed specific columns to the left side just by setting fixed property to true in header items. Click here to check how to use.

Image descriptionImage description

Getting started


npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table
Enter fullscreen mode Exit fullscreen mode

Regist globally

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);
Enter fullscreen mode Exit fullscreen mode



<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";

const headers: Header[] = [
  { text: "PLAYER", value: "player" },
  { text: "TEAM", value: "team"},
  { text: "NUMBER", value: "number"},
  { text: "POSITION", value: "position"},
  { text: "HEIGHT", value: "height"},
  { text: "WEIGHT (lbs)", value: "weight", sortable: true},
  { text: "LAST ATTENDED", value: "lastAttended"},
  { text: "COUNTRY", value: "country"},

const items: Item[] = [
  { "player": "Stephen Curry", "avator": "", "team": "GSW", "number": 30, "position": 'G', "height": '6-2', "weight": 185, "lastAttended": "Davidson", "country": "USA"},
  { "player": "Lebron James", "avator": "", "team": "LAL", "number": 6, "position": 'F', "height": '6-9', "weight": 250, "lastAttended": "St. Vincent-St. Mary HS (OH)", "country": "USA"},
  { "player": "Kevin Durant", "avator": "", "team": "BKN", "number": 7, "position": 'F', "height": '6-10', "weight": 240, "lastAttended": "Texas-Austin", "country": "USA"},
  { "player": "Giannis Antetokounmpo", "avator": "", "team": "MIL", "number": 34, "position": 'F', "height": '6-11', "weight": 242, "lastAttended": "Filathlitikos", "country": "Greece"},
Enter fullscreen mode Exit fullscreen mode


For more information, please check the link here:

Repository link

If you find any bugs or demand any other features, please let me know by reporting issues. Here is the repository link:, And very pleased if you can give me a Github ⭐ for supporting me.

Top comments (1)

phamdatt3009 profile image

Sticky header can not use in lib