DEV Community: HC

Use a composable function to customize the table footer of vue3-easy-data-table

HC — Wed, 27 Jul 2022 14:53:00 +0000

Before you start this tutorial, please make sure you have known how to use vue3-easy-data-table, you can check here for the document.

First of all, we need to install and import use-vue3-easy-data-table which provides customization related composable functions.



npm install use-vue3-easy-data-table

Demo:

Script part:



<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";
import { computed, ref } from "vue";
import { mockClientItems } from "../mock";
import { usePagination } from "use-vue3-easy-data-table";
import type { UsePaginationReturn } from "use-vue3-easy-data-table";

const dataTable = ref();

const {
  currentPageFirstIndex,
  currentPageLastIndex,
  clientItemsLength,
  maxPaginationNumber,
  currentPaginationNumber,
  isFirstPage,
  isLastPage,
  nextPage,
  prevPage,
  updatePage,
}: UsePaginationReturn = usePagination(dataTable);

const headers: Header[] = [
  { text: "Name", value: "name" },
  { text: "Address", value: "address" },
  { text: "Height", value: "height", sortable: true },
  { text: "Weight", value: "weight", sortable: true },
  { text: "Age", value: "age", sortable: true },
  { text: "Favourite sport", value: "favouriteSport" },
  { text: "Favourite fruits", value: "favouriteFruits" },
];

const items: Item[] = mockClientItems(200);
</script>

We can see from the above that firstly we use a variable called dataTable to obtain the reference of table DOM elements. Then we use dataTable as a parameter of the usePagination which is a composable function returns table footer related variables and functions:

The variables usePagination returns are all reactive, for example, if you call the nextPage function, then the currentPageFirstIndex, currentPageLastIndex and currentPaginationNumber variables will update, so finally you can use these variables in template and write style code to customize your own table footer:

Template part:



<template>
  <EasyDataTable
    ref="dataTable"
    :headers="headers"
    :items="items"
    :rows-per-page="10"
    hide-footer
  />

  <div class="customize-footer">
    <div class="customize-index">
      Now displaying: {{currentPageFirstIndex}} ~ {{currentPageLastIndex}} of {{clientItemsLength}}
    </div>

    <div class="customize-buttons">
      <span
        v-for="paginationNumber in maxPaginationNumber"
        class="customize-button"
        :class="{'active': paginationNumber === currentPaginationNumber}"
        @click="updatePage(paginationNumber)"
      >
        {{paginationNumber}}
      </span>
    </div>

    <div class="customize-pagination">
      <button class="prev-page" @click="prevPage" :disabled="isFirstPage">prev page</button>
      <button class="next-page" @click="nextPage" :disabled="isLastPage">next page</button>
    </div>
  </div>
</template>

Style part



<style scoped>
.customize-footer {
  margin: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.customize-footer div {
  margin: 5px;
}
.customize-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 100%;
  cursor: pointer;
  padding: 3px;
  line-height: 20px;
}
.customize-button.active {
  color: #fff;
  background-color: #3db07f;
}
.customize-pagination button {
  margin: 0 5px;
  cursor: pointer;
}
</style>

If you are interested about vue3-easy-data-table, please check the document here: https://hc200ok.github.io/vue3-easy-data-table-doc/

And very thankful if you can give me a Github ⭐ for supporting me, repository link：https://github.com/HC200ok/vue3-easy-data-table/

Create a table with multiple features in few minutes

HC — Sun, 10 Jul 2022 13:24:05 +0000

By using vue3-easy-data-table, you can create a table with multiple features includes sorting, paginating and fixed columns in few minutes.

Step 1

Import vue3-easy-data-table and Vue.js 3.x on CDN via script tags:

<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>

Step 2

Use vue3-easy-data-table!
Make left side fixed columns by setting fixed property to true in header items.
Set sortable property true in header items to make the corresponding columns sortable.

<div id="app">
  <easy-data-table
    :headers="headers"
    :items="items"
  />
</div>
<script>
  const App = {
    components: {
      EasyDataTable: window['vue3-easy-data-table'],
    },
    data () {
      return {
        headers:[
          { text: "PLAYER", value: "player", fixed: true, width: 200},
          { text: "TEAM", value: "team"},
          { text: "NUMBER", value: "number"},
          { text: "POSITION", value: "position"},
          { text: "HEIGHT", value: "indicator.height"},
          { text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
          { text: "LAST ATTENDED", value: "lastAttended", width: 200},
          { text: "COUNTRY", value: "country"},
        ],
        items: [
          { player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
          { player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
          { player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
          { player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
        ],
      }
    },
  };
  Vue.createApp(App).mount('#app');
</script>

Done!

Demo

Document

For more information of vue3-easy-data-table, please check the document here: https://hc200ok.github.io/vue3-easy-data-table-doc/

vue3-easy-data-table is coming

HC — Sat, 11 Jun 2022 12:45:27 +0000

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, single field sorting, and searching. Besides, it also provides many highly customizable features which you can check in this article.

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

server-side mode

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.

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>
    </template>
</EasyDataTable>

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="https://i.pinimg.com/originals/94/fd/2b/94fd2bf50097ade743220761f41693d5.gif" style="width: 100px;height: 80px;"/>
    </template>
</EasyDataTable>

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.

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.

Getting started

Installation

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

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);

Usage

<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.

A lightweight javascript library for manual data masking

HC — Fri, 03 Jun 2022 13:28:29 +0000

manual-data-masking is a lightweight javascript library for manual data masking.

Repository link:

https://github.com/HC200ok/manual-data-masking

Manual data masking?

Manual data masking is an operation that labels and hides sensitive data, creates new text that hides (masks) sensitive information.

Assume that there is a customer comment including sensitive data like swear word, person name, home address...

e.g.

Damn it, The phone i just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: 080808080.

By using manual-data-masking you can do a manual data masking job like this:

Online preview

At the same time, data masked and text after data masking will be generated by manual-data-masking.

Data masked:

[
  {
    content: "Damn it",
    category: "Person Name",
    start: 0, // start index in text string
    end: 7, // end index in text string
  },
  {
    content: "080808080",
    category: "Phone Number",
    start: 120,
    end: 129,
  },
];

Data masked can be used to build a labeled data set for training data masking related AI model.

Text after data masking:

*******, The phone i just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: *********.

How to use in your project

ES modules

npm install manual-data-masking

import { create as createManualDataMasking } from "manual-data-masking";

const dataMasked = [
  {
    "content": "Damn it",
    "category": "Person Name",
    "start": 0,
    "end": 7
  }
]

const categories = [
  {
    "value": "Person Name",
    "color": "#b6656c"
  },
  {
    "value": "Swear Word",
    "color": "#577eba"
  },
  {
    "value": "Phone Number",
    "color": "#3e6146"
  }
]

const text = "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080."

const $manualDataMasking = createManualDataMasking({
  container: document.getElementById("demo"),
  text,
  dataMasked,
  categories,
  replaceCharactor: "*",
  dataMaskingCharactor: "X",
  maxHeight: 100
})

$manualDataMasking.on("afterDataMasking", (dataMasked, textAfterDataMasking) => {
  console.log(JSON.stringify(dataMasked));
  console.log(textAfterDataMasking);
})
</script>

Script tag:

<script src="https://unpkg.com/manual-data-masking"></script>

<script>
  const dataMasked = [
    {
      content: "Damn it",
      category: "Person Name",
      start: 0,
      end: 7,
    },
  ];

  const categories = [
    {
      value: "Person Name",
      color: "#b6656c",
    },
    {
      value: "Swear Word",
      color: "#577eba",
    },
    {
      value: "Phone Number",
      color: "#3e6146",
    },
  ];

  const text =
    "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080.";

  const $manualDataMasking = manualDataMasking.create({
    container: document.getElementById("demo"),
    text,
    dataMasked,
    categories,
    replaceCharactor: "*",
    dataMaskingCharactor: "X",
    maxHeight: 100,
  });

  $manualDataMasking.on(
    "afterdataMasking",
    (dataMasked, textAfterDataMasking) => {
      console.log(JSON.stringify(dataMasked));
      console.log(textAfterDataMasking);
    }
  );
</script>

Documentation

For more information, please check the documentation here: https://github.com/HC200ok/manual-data-masking/blob/master/README.md

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

HC — Fri, 03 Jun 2022 13:17:09 +0000

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?