DEV Community

HC
HC

Posted on • Edited on

An easy-to-use data table component made with Vue.js 3.x.

Image description

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
  2. Dense
  3. Item slot
  4. Multiple selecting
  5. Single field sorting
  6. Searching
  7. Server side paginate and sort
  8. Theme color

Buttons pagination

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

Online preview

Edit on CodeSandbox

Dense

Provide an alternate dense style.

Online preview

Edit on CodeSandbox

Item slot

Customize only certain columns.

Online preview

Edit on CodeSandbox

Multiple selecting

Gather data of specific items by toggling checkbox.

Online preview

Edit on CodeSandbox

Single field sorting

Online preview

Edit on CodeSandbox

Searching

Search for information in a specific field or all fields.

Edit on CodeSandbox

Server side paginate and sort

Load data already paginated and sorted from a server.

Online preview

Edit on CodeSandbox

Theme color

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

Edit on CodeSandbox

Documentation

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

Top comments (0)