Nutella with Pepperoni and Mushrooms

    @paar-it-gmbh/vue3-easy-data-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.15 • Public • Published

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

    Install

    npm i @paar-it-gmbh/vue3-easy-data-table

    DownloadsWeekly Downloads

    11

    Version

    1.4.15

    License

    MIT

    Unpacked Size

    101 kB

    Total Files

    7

    Last publish

    Collaborators

    • mlink
    • jmussmann