hc200ok/vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x

Introduction

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

Website

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

Features

1. Item slot
2. Buttons pagination
3. Multiple selecting
4. Pagination slot
5. Single field sorting
6. Searching
7. Server side paginate and sort
8. Loading slot
9. Footer customization
10. Filtering (new feature since version 1.2.3)
11. Click row (new feature since version 1.2.4)
12. Column width (new feature since version 1.2.10)
13. Fixed columns (new feature since version 1.2.10)
14. Header slot (new feature since version 1.2.25)
15. Expand slot (new feature since version 1.3.2)
16. Style customization (new feature since version 1.3.11)
17. Border cell (new feature since version 1.3.11)
18. Class name customization (new feature since version 1.3.11)

Getting started

1. ES module

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>

2. CDN:

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

<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: "Name", value: "name" },
          { text: "Height (cm)", value: "height", sortable: true },
          { text: "Weight (kg)", value: "weight", sortable: true },
          { text: "Age", value: "age", sortable: true }
        ],
        items: [
          { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
          { "name": "James", "height": 180, "weight": 75, "age": 21 },
          { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
        ],
      }
    },
  };
  Vue.createApp(App).mount('#app');
</script>

Todo

1. Refactory.
2. Make table header customizable 🎛️.
3. Vitual table rows.
4. Mobile responsive.

Contribution

Shout out to the people who made new feature requests and reported issues to make this component better.

vue3-easy-data-table's Issues

sort-type and sort-by props are not reactive

I have a case where I need to control table sort programmatically, but the sort-type and sort-by props seem to only affect default sort.

Feature request: "computed" values

Hi!

Im currently playing with this and it seems to have everything I would need but I do have something that could help me and might benefit others too.

"Computed" values; So for example

const headers = [{
    text: 'Name', 
    value: (row)=> `${row.first_name} ${row.last_name}`, 
    sortable: true 
}]

[{
     "first_name": "Mister",
     "last_name": "Cheeky",
}]

Just a nice to have this possibility, we could also just fix this in the data of course.

fixed-checkbox not working

I would like to set the width of the checkbox but it is not working.
If I try to set fixed-checkbox the table styles not correct.

Version: 1.3.4
https://hc200ok.github.io/vue3-easy-data-table-doc/features/fixed-column.html#fixed-checkbox-column
fixed-checkbox.txt

Rows per page not showing correctly

Seems that there is a small interference on the rowsPerPage

At start, rowsPerPage is 5
https://hc200ok.github.io/vue3-easy-data-table-doc/features/server-side-paginate-and-sort.html

But after changing this value:

It is then impossible to go back to initial value:

Would be awesome to have the ability to overide those values like rowsPerPage: [5,25,50,100]

Single Field Sorting Clicking Issue

For Single Field Sorting, I noticed a click-cycle consists of 3 clicks. But unfortunately first click of each cycle doesn't work. Second and third click of each cycle works for ascending and descending order of sorting. I think 1st click of each cycle is a bug. Can you please check and fix it?

Invalid watch source

I was trying out this grid for a project but I get this really strange error;

[Vue warn]: Invalid watch source:  
Object { headers: {…}, items: {…}, alternating: {…}, buttonsPagination: {…}, rowBorderColor: {…}, tableBorderColor: {…}, rowBackgroundColor: {…}, footerBackgroundColor: {…}, rowFontColor: {…}, footerFontColor: {…}, … }

A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <EasyDataTable headers= 
Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]
 items= 
Array []
 > 
  at <TaskList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

I'm not sure where the issue is.

Code:

<script>
export default {
    data() {
        return {
            headers: [
                { text: "Title", value: "title", sortable: true },
                { text: "From", value: "from", sortable: true },
                { text: "Ticket no.", value: "ticketNo", sortable: true },
                { text: "Case type", value: "caseType", sortable: true },
                { text: "Task", value: "task", sortable: true },
                { text: "Status", value: "status", sortable: true },
                { text: "Last action date", value: "actionDate", sortable: true },
                { text: "Person assigned", value: "assigned", sortable: true },
                { text: "Alerts", value: "alerts", sortable: true },
                { text: "Communications", value: "communications", sortable: true },
            ],
            tasks: []
        };
    }
};
</script>

<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <EasyDataTable
          :headers="headers"
          :items="tasks"
        />
      </div>
    </div>
  </div>
</template>

Using:
"vue3-easy-data-table": "^1.2.5"

Pagination problem on Server Side mode

Hi,
I'm trying to get this to work on server-side mode on a vue3 projects (options API) but it is not rendering correctly...
When I click on "Next", second page is loaded but then, the next pages are no more loaded...

in template:

<EasyDataTable
    v-model:server-options="serverOptions"
    :server-items-length="serverItemsLength"
    :loading="loading"
    :headers="headers"
    :items="items"
  />

Script Tag

<script>
import axios from 'axios'

export default {
    name: 'Calls',
    components: {},
    data() {
      return {
        headers: [
          { text: "Type", value: "customer_type" },
          { text: "Service", value: "appel_service"},
          { text: "Nom", value: "first_name"},
          { text: "Pays", value: "country"},
          { text: "Date", value: "created_date"},
          { text: "Rating", value: "satisfaction"},
        ],
        items: [],
        loading: false,
        serverItemsLength: 0,
        serverOptions : {
          page: 1,
          rowsPerPage: 5
        },

      }
    },

    mounted() {
      this.getCalls()
    },

    methods: {
      async getCalls(){
        await axios
          .get(`/api/calls/?page=${this.serverOptions.page}`)
          .then(response => {
            this.items = response.data.results
            this.serverItemsLength = response.data.count
          })
          .catch(error => {
            console.log(error);
          })
      },
    },

    watch: {
      serverOptions(value) {
        this.serverOptions.page = value.page
        this.getCalls()
      },
    },

}
</script>

Here is an example on my response:

{
    "count": 29484,
    "next": "http://127.0.0.1:8000/api/calls/?page=2",
    "previous": null,
    "results": [
        {
            "id": 29456,
            "customer_type": "sellers",
            "num_affiliation": "0505958",
            "first_name": "TOM",
            "last_name": "LEXIS"
        },
        {
            "id": 29455,
            "customer_type": "sellers",
            "num_affiliation": "0501228",
            "first_name": "JOHN",
            "last_name": "SMITH"
        }
    ]
}

New Feature: Provide extra template slots like footer, rows per page etc

It would be nice to have the table expose some extra slots especially in the footer for custom UI stylings. Take for instance, I really want to change the dropdown select menu for rows-per-page to something else. It would be nice if this can be made available via slots.

See example below

<template #rows-per-page="{ options, isActive }">
   <div v-for="(opt, i) in options" :key="i">
      <button class="button" :class="{ active: isActive }">
	{{ opt }}
      </button>
   </div>
</template>

Add infinite scroll pagination

Functionality similar to this:

https://tangbc.github.io/vue-virtual-scroll-list/#/infinite-loading

Cells Grouping (rowspan/colspan)

Very Helpful and Great Work !
Could you please add rows & columns grouping feature (Rowspan / Colspan)

Item slot indicator not working

problem sorting when current sort order is desc

I am working on a server side loading,
whenever my sort order is "desc", when I click the < th > again, I expect sort order to be "asc", but it's null and the column name is null
that is, serverOptions.sortBy is null and serverOptions.sortType is null.

I think the problem is here:

const updateSortField = (newSortBy: string, oldSortType: SortType | 'none') => {
  let newSortType: SortType | null = null;
  if (oldSortType === 'none') {
    newSortType = 'asc';
  } else if (oldSortType === 'asc') {
    newSortType = 'desc';
  } else {
    newSortType = null; // here, you should assign "asc" instead
  }

on that last "else", newSortType should be assigned "asc"

Bug: sorting with detail options of rows

Hey:)
We have a list with details expandable. If we sort or search after one or more is already expanded the sorting will mess up everything:)
Maybe you can fix this or add a function in sorting or searching that it will close all details before it sort or Filter rows :)

Using custom classes for theme customization

I am using Tailwind CSS for my project and it would be great if I could use it with this component too. Instead of color codes it would be great if I can add custom classes to the different parts of the table. This way paddings, margins etc. can also be modified easily. As a plus dark mode can be handled too.

Is there any way I can achieve that?

Single Field Sorting Issue For Duplicate Rows

When we have duplicate rows in a table, then to do sort, if we click on a particular sortable column field 3 times in a row, then unexpectedly extra row/s added in the table. can you fix it please?

item slots not working on inline module app

I have attempted to adapt the ts code from https://hc200ok.github.io/vue3-easy-data-table-doc/features/item-slot.html into my js module app on a page and the item slots seem to be ignored. There is no error in the browser console. Is this feature not available in the vue3-easy-data-table.es.js build?
vue3-easy-data-table-inline-module.zip

if this feature is not available, is there another way to get a link into an item column?

virtual column ?

Hi!
First of all, I want to thank you for the amazing component.
Really simple and do the trick for me.

So, my use is for loading data from my database (using my own API) and it's server-side paginated.
Works flawless, would prefer infinite loading instead of pages but for my use it's convenient enough.
My problem is, I need for every line to be able to add a button (preferably in a new column, totally unrelated to the data provided "items" to your component). It would be something similar to the "demo" you have on your website (like that edit button) but I can't see the code for that page nor anything explaining how I could achieve that in your documentation.

My ultimate goal is to have that button in a "virtual" column letting me call another API endpoint I made.
Anything I missed?

Thanks in advance

Feature request: Multi field sorting?

First of all. Thanks for setting up this library! :)

It looks like at the moment you can only select one 'column' to sort the table by. It would be nice if you can select multiple columns that a user could select to sort on. For example in your example, it might be nice to be able sort on 'weight' or 'position'.

In terms of implementation, you could maybe get 3 props. 'sort-by' which expects an array of columns, and then 'sort-by-initial' which expects a single column name and 'sort-type-initial' which expects a type string.

I don't think you need to actually sort on multiple columns at the same time. Just having the option to select a different column to sort the table on.

Go to page UI

Hi, I really like your project and I'm trying to use it for work.
I need additional functions that allow me to easily move to a specific page. and I found a function updatePage().
But I thought it would be nice to exist as an official prop too, so I left an issue.

Wrong prop name for hiding footer in docs

Hey,
part of the docs say hiding the footer works via show-footer while the correct prop seems to be hide-footer.

Awesome work btw! Oh and maybe you could consider opening the discussions tab on here for simple questions? I think that'd be handy 👌

Feature request: @click:row event

If the user clicks somewhere on a row in the table, I would like to navigate that user to different page. With Vuetify 2.x you have a 'click:row' event you can subscribe to and then do navgiation programmatically. I don't believe a similar event exists in this library yet. What do you think?

Filtering doesn't support nested properties

Using example from "Getting started"

const headers: Header[] = [
  { text: "PLAYER", value: "player" },
  { 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"},
];

const items: Item[] = [
  { 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"},
];

This works

const filterOptions = [
  {
    field: 'player',
    comparison: '=',
    criteria: 'Stephen Curry',
  },
];

But this doesn't

const filterOptions = [
  {
    field: 'indicator.height',
    comparison: '=',
    criteria: '6-2',
  },
];

When passing validator function instead of operator in comparison field, the first argument is undefined.

const filterOptions = [
  {
    field: 'indicator.height',
    comparison:  (value: string, criteria: string) => value === criteria', // value is undefined
    criteria: '6-2',
  },
];

row hover has no support for Even Rows

row-hover-font-color and row-hover-background-color functionality needed for Even Rows

Feature Request - Table Row's Border Customization

Is there any way that We can Increase or Decrease the table row's border length? Also Can We give some space between two rows?

bug : click sort column 3 times and the sort parameters become null

I am using the server sorting module configuration in a simple vue 3 page app.

If you click the column header to sort on that, it updates the v-model serverOptions correctly but click it a 3rd time, it sets the sort attributes to null. If you click it a 4th time it works again.

I have tried the module and non-module builds with the same result.

indexSuccess.zip

add props hide header and footer

Can you add props hidden header and footer data-table ?

Is it possible to search across multiple columns?

There are no problems with searching in one column, everything works fine. I saw an example with a choice of value for search through select, but it not that.
I need something like this :search-fields =[ "one ", "two ", .... ]

Multiple column ordering and footer translation

Good work
It will be good to have possibility of sorting by multiple columns. I've got server-side order and pagination and I couldn't order by multiple columns.
Another good feature could be to get the footer translation - now i'ts necessary to rewrite "rows per page" select.

New feature: enable column to move up or down as i want

how to call function nextPage with ref

I want to custom pagination .
How to call function nextPage with ref
Please help me or suggest idea

Use via options API and via CDN

Not everyone uses typescript, or has a build process. There needs to be a way to include this in a script element via CDN.

Edit "rows per page" message

Hello! Thanks for your work.

Could you please add a prop to edit the "rows per page" message? In my case, this is necessary for localization, but I think it will be useful to someone in other cases.

@expand-row event index parameter equals -1 if v-model:items-selected is present

The @expand-row event trigger my callback function properly but the argument index is always -1. That happens at the moment I add the v-model:items-selected="selectedItems" prop. Without the multi select the expand function works fine.

Here is my full component:

<EasyDataTable
  alternating
  border-cell
  buttons-pagination
  v-model:items-selected="selectedItems"
  :headers="projectTableColumns"
  :items="projectTableItems"
  :header-item-class-name="headerItemClassNameFunction"
  :body-row-class-name="bodyRowClassNameFunction"
  :body-item-class-name="bodyItemClassNameFunction"
  :rows-per-page="15"
  @click-row="showRow"
  @expand-row="expandRow"    
>
  <template #expand="item">
    <div
      v-if="item.expandedDescription"
      style="padding: 15px; text-align: left"
    >
      {{ item.expandedDescription }}
    </div>
  </template
</EasyDataTable>

//In the methods section
async expandRow(index: number){
  console.log(`Value of 'index' in the expandRow: ${index}`);
  this.projectTableItems[index].expandedDescription = "Expanded description: " + this.projectTableItems[index].description 
},

The console output is the following:

Once I remove the v-model:items-selected="selectedItems" all of the expanding rows show properly.

Thank you for the invested time in the tool :)

esm module for composition api in html

A while ago I asked you if there could be a way to implement this in the options API with CDN and you did that. It needed a lot of work and I was very thankful to you.

But now I'm wanting to use it with composition API in html, and the esm js doesn't work.

I'm expecting to be able to do something like this:

<easy-data-table :headers="headers" :items="items" />
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js" 
import Vue3EasyDataTable from "/javascripts/vue3-easy-data-table.es.js" // my local build
createApp({
  components: {
    EasyDataTable: Vue3EasyDataTable
  },
  setup() {
    const headers = [
      { text: "Actions", value: "screenid", sortable: false },
      { text: "Number", value: "Number", sortable: true },
      { text: "Colour", value: "Colour", sortable: true },
      { text: "Name", value: "Name", sortable: true },
    ]
    const items = []
    return {
      headers,
      items
    }
}
}).mount("#app")
</script>

The error message is very cryptic:

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

the path is fine, and the vue import is fine. The problem seems to be that there is no "Vue3EasyDataTable exported. I can see that you have set this up in index.ts by calling createApp in advance, attaching it to the window object, and then exporting DataTable. But the error message seems to be really saying there is no export to be found. I really wish I knew enough about how these modules work so I could fix it myself for you. Are you able to get this going?

New feature: Enable column width to be inserted by client, control witdth from FrontEnd

Feature Request - Expandable Rows

I really like this repo so far, but I can't figure it out how should I add expandable rows with nested tables in it.
An injectable component after rows would be great.

"optional" property of ServerOptions is not optional

TL;DR

In this page, every ServerOptions properties are optional. But "page" and "rowsPerPage" are required.
https://hc200ok.github.io/vue3-easy-data-table-doc/props/server-side-mode-only-props.html

how to cause

const serverOptions = ref<ServerOptions>({ });

expected

Call api with no parameter.

error

TS2769: No overload matches this call.
Overload 1 of 3, '(value: ServerOptions): Ref<{ page: number; rowsPerPage: number; sortBy?: string | undefined; sortType?: SortType | undefined; }>', gave the following error.
Argument of type '{}' is not assignable to parameter of type 'ServerOptions'.
Type '{}' is missing the following properties from type 'ServerOptions': page, rowsPerPage
Overload 2 of 3, '(value: ServerOptions): Ref<{ page: number; rowsPerPage: number; sortBy?: string | undefined; sortType?: SortType | undefined; }>', gave the following error.
Argument of type '{}' is not assignable to parameter of type 'ServerOptions'.
Type '{}' is missing the following properties from type 'ServerOptions': page, rowsPerPage

3rd error is unrelated.

version

[email protected]
[email protected]
[email protected]

Custom filtering options

Working currently on a project with lots of data, and the filtering options are quite limited or maybe is me that can't find an option to add custom filterings.
Is it possible to add custom filters or add a "contains" filter?

ie. a field that contains ID and other objects with ID-customdata and all those items are related by ID and want to see all the items that contain that ID on a specific column. ( items will have this ID -> 1234, 1234-a, 1234-b, 1234-c)

Thanks in advance!

Can you add table-header centering and table-body centering?

Maybe can add properties in items and headers to configure their directions

Add Fixed first column for horizontal scrolling & headers for vertical

Functionality similar to this:
https://vue3-lite-table.vercel.app/advance-examples#fixed-first-column

And also vertically to she the headers even when scroll down and "lose" them

use-vue3-easy-data-table does not come with types declaration for typescript

Hello, so i'm trying to modify customize the footer of the table using the use-vue3-easy-data-table package but once installed, vscode typescript is shouting at me because it doesn't come with types which is sad...😔

In your docs you import some type definition from the package, but i couldn't find that type def. Please look into this. Thank u 🙂
Screenshot below 👇👇

Is it possible to make the Header not show?

There is a table without a header,
Is it possible to make the Header not show?

Allow nested undefined item properties

If the nested item field is undefined it throws undefined error.

Check mock.ts file, column Height with height.value

https://codesandbox.io/s/single-field-sorting-forked-q6dfxu

Cannot read properties of undefined (reading 'includes')

Hello,

I just tried to install your package and I met this issue.

vue3-easy-data-table.es.js:772 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')
    at getItemValue (vue3-easy-data-table.es.js:772:14)
    at generateColumnContent (vue3-easy-data-table.es.js:783:19)
    at vue3-easy-data-table.es.js:1314:86
    at renderList (runtime-core.esm-bundler.js:2884:22)
    at vue3-easy-data-table.es.js:1296:74
    at renderList (runtime-core.esm-bundler.js:2884:22)

The exemple code

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

<script lang="ts">
import type { Header, Item } from "vue3-easy-data-table";
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';


export default {
    components: {
      Vue3EasyDataTable,
    },
    data () {
      return {
        headers: [
          { text: "PLAYER", value: "player" },
          { 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"},
        ],
      }
    },
  }
</script>

Have a nice day!

Bug: Table pagination & view going back to first page

Create a table with the following properties:

• Expandable
• Selectable
• Has pages

Reproduction:

Expand a table row on a random page
go to a another page
select a text & expand another row (not the row you have the text selected on)
the table will go back to the 1st page.

custom properties for theming

migrate to css custom properties for theming:

--edt-accent: #dsada3
--edt-second: #ccc

and etc, PR welcome?

Next page is clickable when items are empty

Set MockClientItems to 0 and then click next page

https://codesandbox.io/s/pagination-slot-75n6iv?file=/src/App.vue

Single field sorting working only by icon click

Sorting does not work when clicking on the column heading. This worked in earlier versions. Now sorting works only when clicking on the sorting icon, which is not very convenient.

Could you fix this please?

Support loading items in a CSV format

to ease the loading of large amount of data from the server we can ignore the column keys and just use their index if they are separate by a comma

Searching in by hidden columns

Maybe have thinks about searching by hidden field. This can use hidden attribute in Header