easy-datatable-sticky-headers-large-data

Introduction

This is a fork off of vue3-easy-data-table. 99% of the code is the same excpect for a few key differences:

1st: The select all will only work on 1000 items or less. 2nd: Tippy.js was installed for a hover over to notify the user of this change 3rd: The table headers no longer have a fixed position, on overflow they become sticky 4th: The tsconfig.json module was changed to commonJs to ESNext. 5th: The multisort recurrsion for data filtering was modified 6th: In useTotalItems.ts for the fucntion toggleSelectItem the item now requires an id

These changes stem from me having an exterior way to filter data, and I am also mostly using large datasets.

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/vue@3.2.1/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.