vue3-easy-data-table is coming
Tags: vue, vue3, datatable, component
Published: 2022-06-11 12:45:27

## Introduction
`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](https://hc200ok.github.io/vue3-easy-data-table-doc/features/multiple-selecting.html), [single field sorting](https://hc200ok.github.io/vue3-easy-data-table-doc/features/single-field-sorting.html), and [searching](https://hc200ok.github.io/vue3-easy-data-table-doc/features/searching.html). Besides, it also provides many highly customizable features which you can check in this article.

![chrome-capture-2022-5-10 (2).gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4396b39a128449c48323ec0716139a92~tplv-k3u1fbpfcp-watermark.image?)

## Two modes
`vue3-easy-data-table` can be used in client-side or [server-side mode](https://hc200ok.github.io/vue3-easy-data-table-doc/features/server-side-paginate-and-sort.html). 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](https://hc200ok.github.io/vue3-easy-data-table-doc/features/server-side-paginate-and-sort.html), 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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/620c05effaba438598dffdbd04c7e79f~tplv-k3u1fbpfcp-watermark.image?)

### server-side mode

![chrome-capture-2022-5-10.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9023a3ccd6094a868ec36a0d0fbeca09~tplv-k3u1fbpfcp-watermark.image?)

[![Edit on CodeSandbox](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d9c35a793454deea971f1eaa87886f8~tplv-k3u1fbpfcp-zoom-1.image)](https://codesandbox.io/s/server-side-paginate-and-sort-mif1nr?file=/src/App.vue)

According to the examples above, we can see that in [server-side mode](https://hc200ok.github.io/vue3-easy-data-table-doc/features/server-side-paginate-and-sort.html), once you navigate to a new page, a new request is sent with loading animation displaying.

## Highly customizable


### [Color customization](https://hc200ok.github.io/vue3-easy-data-table-doc/features/color-customization.html)

By using [color related props](https://hc200ok.github.io/vue3-easy-data-table-doc/props/color-props.html) 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](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9df092c67e54438d8f54776072a2314e~tplv-k3u1fbpfcp-watermark.image?)

### [Item slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/item-slot.html)

By using the [slots](https://v3.vuejs.org/guide/component-slots.html) feature of Vue.js, You can customize only certain columns like this:

```html
<EasyDataTable :headers="headers" :items="items">
    <template #team="{ teamName, teamUrl }">
        <a :href="teamUrl">{{ teamName }}</a>
    </template>
</EasyDataTable>
```

![截屏2022-06-10 下午6.27.13.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e8a098282a141b8b958fa766c9616be~tplv-k3u1fbpfcp-watermark.image?)

### [Loading slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/loading-slot.html)

Similarly, By using the [slots](https://v3.vuejs.org/guide/component-slots.html) feature of Vue.js, You can customize loading effect like this:

```html
<EasyDataTable :headers="headers" :items="items">
    <template #loading>
      <img src="https://i.pinimg.com/originals/94/fd/2b/94fd2bf50097ade743220761f41693d5.gif" style="width: 100px;height: 80px;"/>
    </template>
</EasyDataTable>
```

![chrome-capture-2022-5-10 (4).gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/374c81d363b74267ae9f2f5bfb3f2c9f~tplv-k3u1fbpfcp-watermark.image?)

### [Footer customization](https://hc200ok.github.io/vue3-easy-data-table-doc/features/footer-customization.html)

`vue3-easy-data-table` exposes some [footer related variables and functions](https://hc200ok.github.io/vue3-easy-data-table-doc/features/footer-customization.html) 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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d44bfb5fbc4003ac3f59acdc2e6533~tplv-k3u1fbpfcp-watermark.image?)

### [Fixed columns](https://hc200ok.github.io/vue3-easy-data-table-doc/features/fixed-column.html)
You can fixed specific columns to the left side just by setting `fixed` property to `true` in header items. Click [here](https://hc200ok.github.io/vue3-easy-data-table-doc/features/fixed-column.html) to check how to use.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16iwbijhgqcpsyqubeta.gif)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9720hmevhn5aecw84cqj.gif)
 

## [Getting started](https://hc200ok.github.io/vue3-easy-data-table-doc/getting-started.html)

### Installation
```js
npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table
```

### Regist globally
```js
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);
```

### Usage
```js
<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

<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": "https://cdn.nba.com/headshots/nba/latest/260x190/201939.png", "team": "GSW", "number": 30, "position": 'G', "height": '6-2', "weight": 185, "lastAttended": "Davidson", "country": "USA"},
  { "player": "Lebron James", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/2544.png", "team": "LAL", "number": 6, "position": 'F', "height": '6-9', "weight": 250, "lastAttended": "St. Vincent-St. Mary HS (OH)", "country": "USA"},
  { "player": "Kevin Durant", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/201142.png", "team": "BKN", "number": 7, "position": 'F', "height": '6-10', "weight": 240, "lastAttended": "Texas-Austin", "country": "USA"},
  { "player": "Giannis Antetokounmpo", "avator": "https://cdn.nba.com/headshots/nba/latest/260x190/203507.png", "team": "MIL", "number": 34, "position": 'F', "height": '6-11', "weight": 242, "lastAttended": "Filathlitikos", "country": "Greece"},
];
</script>
```

## Documentation
For more information, please check the link here：https://hc200ok.github.io/vue3-easy-data-table-doc/

## Repository link
If you find any bugs or demand any other features, please let me know by reporting issues. Here is the repository link：https://github.com/HC200ok/vue3-easy-data-table/, And very pleased if you can give me a Github ⭐ for supporting me.