Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue3-easy-data-table

Package Overview
Dependencies
Maintainers
1
Versions
167
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-easy-data-table

A data table component made with vue.js 3.x

  • 1.0.10
  • npm
  • Socket score

Version published
Weekly downloads
19K
increased by16.79%
Maintainers
1
Weekly downloads
 
Created
Source

Introduction

vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x. The data table component in Vuetify 3 hasn't been released yet, so I made this component by referring to the API and UI of the data table component in Vuetify 2.

Getting started

Install

npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table

Regist

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

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

Use

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

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

export default defineComponent({
  setup() {
    const headers: Header[] = [
      { text: "Name", value: "name" },
      { text: "Height (cm)", value: "height", sortable: true },
      { text: "Weight (kg)", value: "weight", sortable: true },
      { text: "Age", value: "age", sortable: true }
    ];

    const items: Item[] = [
      { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
      { "name": "James", "height": 180, "weight": 75, "age": 21 },
      { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
    ];

    return {
      headers,
      items
    };
  },
});
</script>

Modes

vue3-easy-data-table has two modes: client mode and server-side mode. Client 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. And In server-side mode, you need to request limited data from a server everytime you navigate to a new page. Client mode is the default mode, you have to pass server-options and server-items-length props to switch to the server-side mode.

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

Use buttons-pagination prop and seven visible page buttons will be generated automatically to help you navigate much easier.

Online preview

Edit on CodeSandbox

Dense

Use dense prop to provide an alternate dense style.

Online preview

Edit on CodeSandbox

Item slot

You can customize only certain columns like this:

  <EasyDataTable :headers="headers" :items="items">
    <template #address="{ address }">
      <EasyButton :address="address" />
    </template>
  </EasyDataTable>

Notice that the <name> of #<name> should be a value of header item.

Online preview

Edit on CodeSandbox

Multiple selecting

Using the v-model:items-selected will enable you to get data of specific items by toggling checkbox.

Online preview

Edit on CodeSandbox

Single field sorting

Add sortable property into the header items to make the corresponding columns sortable.

 const headers: Header[] = [
  { text: "Height", value: "height", sortable: true },
  ...
 ];

Use sort-by and sort-type to define the initial sorting field and sorting type ('asc' or 'desc').

Online preview

Edit on CodeSandbox

Searching

Use search-field and search-value props to search for information in a specific field. If you don't pass the search-field prop, the component will search in all fields.

notice: Searching feature is only available in client mode.

Edit on CodeSandbox

Server side paginate and sort

Also called server-side mode, In this mode, you’re loading data already paginated and sorted from server. You should watch the serverOptions to know when to request new pages from server. Don't forget to use the loading prop to display a loading bar while fetching data.

server-items-length and v-model:server-options are required in this mode.

Online preview

Edit on CodeSandbox

Theme color

Use theme-color prop to customize color of checkbox, active option of rows selector, loading bar and active button of buttons pagination.

Edit on CodeSandbox

Props

Common props

common props can be used both in client mode and server-side mode.

NameRequiredTypeDefaultDescription
v-model: itemsSelectedfalseItem[]
(Item: Record<string, any>)
undefinedItems selected
body-font-colorfalsestring'#212121'Font color of table body
body-font-sizefalsenumber12Font size of table body, including foot pagination
border-colorfalsestring'#e0e0e0'Border color
buttons-paginationfalsebooleanfalseBy default, you can only use prev and next buttons to navigate. But if you set the value to true, Seven visible page buttons will be generated automatically to help you navigate much easier
densefalsebooleanfalseSet true to decrease the height of rows
empty-messagefalsestring'No Available Data'Message to display when there is no data in table
fixed-headerfalsebooleantrueFixed header to top of table. NOTE: Does not work in IE11
headerstrueHeader[]
Header:
{
text: string,
value: string,
sortable?: boolean,
}
[]Table header items
header-background-colorfalsestring'#fff'Background color of table head
header-font-colorfalsestring'#373737'Font color of table head
itemstrueItem[]
(Item: Record<string, any>)
[]Table body items
loadingfalsebooleanfalseIf true and no items are provided, then a loading bar and loading message will be shown
loading-messagefalsestring'Loading, please wait.'Message shown when loading is true and no items are provided
max-heightfalsenumber400Max height of table (table header and table body, not including footer pagination)
rows-itemsfalsenumber[][25, 50, 100]A number array of rows-per-page, working as the options of rows per page selector
rows-per-pagefalsenumber25Rows of items to display in per page
theme-colorfalsestring'#42b883'Fill color of checkbox, background color of active option of rows selector, color of loading bar and background color of active button of buttons pagination

Client mode Props

only available in client mode
NameRequiredTypeDefaultDescription
search-fieldfalsestring''A specific field in which you search for information. (the value of search field should be a value of header item, not text of header item). If you don't pass a specific field, the component will search in all fields.
search-valuefalsestring''Search value
sort-byfalsestring''A specific field for sorting
sort-typefalse'asc' | 'desc''asc'Order by 'asc' or 'desc' when sorting

Server side mode props

only available in server-side mode
NameRequiredTypeDefaultDescription
v-model:server-optionstrueServerOptions:
{
page?: number,
rowsPerPage?: number,
sortBy?: string,
sortType?: 'asc' | 'desc',
}
{}An object which can be used as values of parameters in a pagination REST API such as:
http://localhost:8080/api?page=${ServerOptions.page}&limit=${ServerOptions.rowsPerPage}&sortBy=${ServerOptions.sortBy}&sortType=${ServerOptions.sortType}
server-items-lengthtruenumberundefinedTotal amount of items available on server

Todo

This component just satisfied my needs, if you find any bug or demand any other features, plese report an issue and making pull requests is very welcomed!

Keywords

FAQs

Package last updated on 02 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc