vue-dream-table v1.2.2

Vue js dream table is developed to make your life easier. Only endpoint url and by configuring few options you can get high performanced table with ton of functionality such as server side pagination, sorting, searching, and filtering.

🏠 Homepage

Install

npm install vue-dream-table

Note

  vue-dream-table package depends on vue-router... Please be sure that you have already installed it!

Usage

<template>
    <vue-dream-table :options="options"  />
</template>

<script>
import VueDreamTable from "vue-dream-table";

export default {
    components: {
      VueDreamTable,
    },

    data() {
    return {
      options: {
        getUrl: "https://jsonplaceholder.typicode.com/users",
        dataName: ["data", "rows"],
        token:
          "eyJhbGciOviJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwveaviaWF0IjoxNjMyNjczODExLCJleHAiOjE2MzI2Nzc0MTF9ev.R8hZz-0qCXRnR04veev0-yeFr1MlpWT-iaxUxIsN9WCtW_LwdpdoUTQaX155tcvezKPdW8iLWvfYeGmHZqzfrp_nScArAev",
        title: "This is a title",
        isLoad: true,
        hiddenItemsByDefault: ["id"],
        capitalize: true,
        removeUnderScores: true,
        maxStrSize: 15,
        allowAddNewItem: true
      },
    };
  },
}
</script>

Props

Advanced

  <template>
    <vue-dream-table :options="options"  />
  </template>

  <script>
  import VueDreamTable from "vue-dream-table";

  export default {
    data() {
      return {
        options: {
           getUrl: "https://jsonplaceholder.typicode.com/users",
        dataName: ["data", "rows"],
        token:
          "eyJhbGciOviJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwveaviaWF0IjoxNjMyNjczODExLCJleHAiOjE2MzI2Nzc0MTF9ev.R8hZz-0qCXRnR04veev0-yeFr1MlpWT-iaxUxIsN9WCtW_LwdpdoUTQaX155tcvezKPdW8iLWvfYeGmHZqzfrp_nScArAev",
        title: "This is a title",
        isLoad: true,
        hiddenItemsByDefault: ["id"],
        capitalize: true,
        removeUnderScores: true,
        maxStrSize: 15,
        allowAddNewItem: true,
        actions: true,
        editable: true,
        deletable: true,
        deleteRequest: {
          url: "https://jsonplaceholder.typicode.com/posts",
          method: "delete",
          deleteRequestParam: "id",
        },

        filters: {
          search: {
            placeholder: "Search",
            searchBy: "name",
            // key: "search", --> search: {[searchBy]: value}
          },

          select: { 
            selectBy: "key",
            optionValue: ["one", "two", "three"],
            // key: "filter", --> filter: {[selectBy]: value} 
          },

          sort: {
            sortBy: "id",
            sortOrder: "desc",
          },

          pagination: {
            count: 100,
            limit: ['limit', 10], // [0] -> key, [1] -> value  
            // pageKey: 'current_page', // default key -> page
          },
        }
      }
    }
  }
  </script>

Author

👤 mnjoyan

CallBacks

<template>
    <vue-dream-table :options="options"
       @mountedHandler="mountedHandler"
       @beforeDataRecive="beforeDataRecive"   
       @dataReceivedHandler="dataReceivedHandler"
       @getDataFailureHandler="getDataFailureHandler"
       @createdHandler="createdHandler"
       @deleteHandler="deleteHandler"
       @deleteFailureHandler="deleteFailureHandler"
       @addNewItemHandler="addNewItemHandler"
       @showMoreHandler="showMoreHandler"
         />
</template>


<script>
  export default {
    methods: {
        dataReceivedHandler(data) {
          // data
        },

        getDataFailureHandler(err) {
          // err
        },

        createdHandler(data) {
          // data
        },

        mountedHandler() {
          // mounted
        },

        deleteHandler(data) {
          // data
        },

        deleteFailureHandler(err) {
          // err
        },

        addNewItemHandler(data) {
          // data
        },

        showMoreHandler(obj) {
          // obj
        }
    }
  }
</script>

Show your support

Give a ⭐️ if this project helped you!