An easy-to-use data table component made with Vue.js 3.x.
Tags: vue, vue3, table, component
Published: 2022-06-03 13:17:09


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwxbo8nxiudw6sxneiyz.png)

## Introduction
vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x.

## Website
https://hc200ok.github.io/vue3-easy-data-table-doc/

## Why
I am doing the Vue2 to Vue3 migration for my company project recently, In the Vue2 version, we were using the data table component of Vuetify2. But for the new Vue3 version, Vuetify3 Beta seems not ready for the production environment yet, and the data table component in Vuetify3 is still in development, so I made vue3-easy-data-table by referring to the API and UI of the data table component in Vuetify2. If you are also waiting for the release of the data table component of Vuetify3, what about trying this component first?

## Repository link
https://github.com/HC200ok/vue3-easy-data-table


## Features
1. [Buttons pagination](#buttons-pagination)
2. [Dense](#dense)
3. [Item slot](#item-slot)
4. [Multiple selecting](#multiple-selecting)
5. [Single field sorting](#single-field-sorting)
6. [Searching](#searching)
7. [Server side paginate and sort](#server-side-paginate-and-sort)
8. [Theme color](#theme-color)

## Buttons pagination
Seven visible page buttons are generated automatically to help you navigate much easier.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/buttons-pagination.gif"  />

[Online preview](https://rfc8kw.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/buttons-pagination-rfc8kw?file=/src/App.vue:125-150)


## Dense
Provide an alternate dense style.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/dense.png"  />

[Online preview](https://7sjib3.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dense-7sjib3?file=/src/App.vue)

## Item slot
Customize only certain columns.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/item-slot.png"  />

[Online preview](https://65tc9v.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/item-slot-65tc9v?file=/src/App.vue)

## Multiple selecting
Gather data of specific items by toggling checkbox.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/multiple-selecting.png"  />

[Online preview](https://bhe0r9.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/multiple-selecting-bhe0r9?file=/src/App.vue)

## Single field sorting
<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/single-sorting.gif"  />

[Online preview](https://rjniui.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/single-field-sorting-rjniui?file=/src/App.vue)

## Searching
Search for information in a specific field or all fields.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/searching.png"  />

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/searching-8egujm?file=/src/App.vue)

## Server side paginate and sort
Load data already paginated and sorted from a server.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/server-side-paginate-and-sort.png"  />

[Online preview](https://mif1nr.csb.app/)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/server-side-paginate-and-sort-mif1nr?file=/src/App.vue)

## Theme color
Customize the color of checkbox, active option of rows selector, loading bar, and active button of buttons pagination.

<img src="https://github.com/HC200ok/vue3-easy-data-table/raw/main/images/theme-color.png"  />

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/theme-color-89ps64?file=/src/App.vue)

## Documentation
For more information, please check the documentation here: https://github.com/HC200ok/vue3-easy-data-table/blob/main/README.md