data-table-vue v2.0.0-alpha.0

data-table-vue

This materialize vue data table provides you freedom of customizing anything and everything of your choice. This data table for vue js is made of plain html5 and plain css without any dependency and gives you flexibility to configure with very minimal yet powerful options

---

Features

• ✔️ Table works on both Offline mode & Online mode.
• ✔️ Global Search feature.
• ✔️ Individual column based Filter feature.
• ✔️ Sort mechanism with default sort column on initial load.
• ✔️ Customizable sort Direction.
• ✔️ Show/Hide columns on the fly.
• ✔️ Export as CSV with two options - Filtered data / Unfiltered data (raw data).
• ✔️ Drag & Drop feature for columns ordering on the fly.
• ✔️ Pin/Unpin feature for columns to make position fixed/scrollable.
• ✔️ Auto Save customized table options and it gets applied on next reload as default.
• ✔️ Render table with/without pagination
• ️✔️ Pass any number of columns with various customization.
• ✔️ Customizable "Items / page" count.
• ✔️ Customizable "Table Title".
• ✔️ Customizable "Actions" column.
• ✔️ Customizable "Actions" column position (First / Last).

Table of Contents

1. Quick Start
2. How to include data-table-vue
   1. Basic Table
   2. How to add table's title
   3. How to add Action/Edit column
   4. Move Action/Edit column towards left
   5. Activate Pagination
   6. Global Search Box
   7. Global Search Box on user selected columns
   8. Show/Hide Columns
   9. Export as CSV
   10. Rearrange Columns by drag & drop
   11. Filter option for individual column
   12. Fixed/Pin Columns on left (non-scrollable)
   13. Memorize locally
   14. Sortable option on columns
3. Table Props

Quick Start

Install

To install the data-table-vue and saving it to package.json dependency Open your favorite Terminal and run below command.

npm i data-table-vue --save

Include Materialize CDN

If your application is not already using materialize then you have to include materialize in your application. Add materialize js into your index html like below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Include JQuery CDN

If your application is not already using jquery then you have to include jquery in your application. Add JQuery CDN into your index html like below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Add materialize css

If you want to apply materialize css to specific component then add below line into your component's style

 <style scoped>
   @import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css");
 </style>

If you want to apply materialize css for your entire application then add below line into your index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

How to include data-table-vue

Let's imagine you have App.vue file where you want to include data-table-vue We will start with basic setup and slowly we will cover all the features one by one

Script Section

Let's create basic table with 6 fields. ID | NAME | ADDRESS 1 | ADDRESS 2 | Mobile No | Landline Here is the attributes/properties required to configure basic table

<script>
import Table from "data-table-vue"; // import data-table-vue
export default {
 components: { Table }, // declare it as component
 data() {
   return {
     tableComponentData: {
       perPageOptions: [70],
       fields: [
         {
           name: "ID",
           key: "id"
         },
         {
           name: "NAME",
           key: "name"
         },
         {
           name: "ADDRESS 1",
           key: "address"
         },
         {
           name: "ADDRESS 2",
           key: "address1"
         },
         {
           name: "Mobile No",
           key: "mob"
         },
         {
           name: "Landline",
           key: "landline"
         },
       ]
     }
   };
 },
 methods: {
   getData() {
     let randomData = []
     for (let i = 0; i < 10; i++) {
       randomData.push(
           { 
               id: i + 1,
               name: `name ${i + 1}`,
               address: `Lorem Ipsum Dolor Sit Amet  ${i + 1}`,
               address1: `address 2 ${i + 1}`,
               mob: `mob_num_dummy_${i + 1}`,
               landline: `landline_dummy_${i + 1}`
           });
     }
     return randomData;
   },
   loadOfflineEntries(
     cb
   ) {
     let data = {
       status: 200,
       msg: this.getData()
     };
     cb(data);
   }
 }
};
</script>

Template Section

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="true"
                   :noPagination="true">
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - Basic Table

How to add table's title

Just add tableTitle props Sample code is shown below

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="true"
                   :noPagination="true"
                   tableTitle="Demo Table"

                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Table Title

How to add Action/Edit column

1. Add actions property in order to show the Action column.
2. Add actionList property.
3. Sample Code is shown below.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="true"
                   :noPagination="true"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Script Section

<script>
import Table from "data-table-vue"; // import data-table-vue
export default {
 components: { Table }, // declare it as component
 data() {
   return {
     tableComponentData: {
       perPageOptions: [70],
       fields: [
         {
           name: "ID",
           key: "id"
         },
         {
           name: "NAME",
           key: "name"
         },
         {
           name: "ADDRESS 1",
           key: "address"
         },
         {
           name: "ADDRESS 2",
           key: "address1"
         },
         {
           name: "Mobile No",
           key: "mob"
         },
         {
           name: "Landline",
           key: "landline"
         },
       ],
        actionList: [
         {
           type: "link",
           refAddress: data => `edit/${data.id}`,
           getIcon: data => 'edit',
           hoverTitle: "Edit Item"
         },
         {
           type: "cb",
           refAddress: data => {
             alert(`Click on row with ID = `, data.id);
           },
           getIcon: data => '<i class="material-icons">add</i>',
           html: "true",
         }
       ]
     }
   };
 },
 methods: {
   getData() {
     let randomData = []
     for (let i = 0; i < 10; i++) {
       randomData.push(
           { 
               id: i + 1,
               name: `name ${i + 1}`,
               address: `Lorem Ipsum Dolor Sit Amet  ${i + 1}`,
               address1: `address 2 ${i + 1}`,
               mob: `mob_num_dummy_${i + 1}`,
               landline: `landline_dummy_${i + 1}`
           });
     }
     return randomData;
   },
   loadOfflineEntries(
     cb
   ) {
     let data = {
       status: 200,
       msg: this.getData()
     };
     cb(data);
   }
 }
};
</script>

Screenshot - With Action Column

Move Action/Edit column towards left

Just add fixedActionColumnOnLeft props Sample code is shown below

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="true"
                   :noPagination="true"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :fixedActionColumnOnLeft="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Action column towards left

Activate Pagination

Just remove noPagination props or simply make its value to false Sample code is shown below

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="true"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :fixedActionColumnOnLeft="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Pagination on bottom right

Global Search Box

Just remove hideSearchBox props or simply make its value to false Also add defaultSearchColumns props. Sample code is shown below where we are making Global Search upon two columns i.e. id & name

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Global Search Box

Global Search Box on user selected columns

Add showSearchFilter props. (Optional) You can also choose the Title of searchByFilterName popup. (Optional) You can also choose the Notification Count of showSearchFilterNotification. Sample code is shown below where Global Search will be activated on default columns i.e. id & name but there will be an extra option provided where user can select on which all columns Global Search should work from UI.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Global Search Box on user selected columns

Show/Hide Columns

Add showColumnFilter props. (Optional) You can also choose the Title of columnFilterName popup. (Optional) You can also choose the Notification Count of showColumnFilterNotification. Sample code is shown below.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Show/Hide Columns filter

Export as CSV

Add exportExcel props. Sample code is shown below.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   :exportExcel="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Export as CSV option

Rearrange Columns by drag & drop

Add moveableColumn props. Sample code is shown below.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   :exportExcel="true"
                   :moveableColumn="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Rearrange Columns

Filter option for individual column

Add showColumnFilterButton props. Add multiFilterOption property on fields on those columns where you want to filter. Sample code is shown below, where we are making filterable columns as ADDRESS 1 & ADDRESS 2.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   :exportExcel="true"
                   :moveableColumn="true"
                   :showColumnFilterButton="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Script Section

<script>
import Table from "data-table-vue"; // import data-table-vue
export default {
 components: { Table }, // declare it as component
 data() {
   return {
     tableComponentData: {
       perPageOptions: [70],
       fields: [
         {
           name: "ID",
           key: "id"
         },
         {
           name: "NAME",
           key: "name"
         },
         {
           name: "ADDRESS 1",
           key: "address",
           multiFilterOption: true
         },
         {
           name: "ADDRESS 2",
           key: "address1",
           multiFilterOption: true
         },
         {
           name: "Mobile No",
           key: "mob"
         },
         {
           name: "Landline",
           key: "landline"
         },
       ],
        actionList: [
         {
           type: "link",
           refAddress: data => `edit/${data.id}`,
           getIcon: data => 'edit',
           hoverTitle: "Edit Item"
         },
         {
           type: "cb",
           refAddress: data => {
             alert(`Click on row with ID = `, data.id);
           },
           getIcon: data => '<i class="material-icons">add</i>',
           html: "true",
         }
       ]
     }
   };
 },
 methods: {
   getData() {
     let randomData = []
     for (let i = 0; i < 10; i++) {
       randomData.push(
           { 
               id: i + 1,
               name: `name ${i + 1}`,
               address: `Lorem Ipsum Dolor Sit Amet  ${i + 1}`,
               address1: `address 2 ${i + 1}`,
               mob: `mob_num_dummy_${i + 1}`,
               landline: `landline_dummy_${i + 1}`
           });
     }
     return randomData;
   },
   loadOfflineEntries(
     cb
   ) {
     let data = {
       status: 200,
       msg: this.getData()
     };
     cb(data);
   }
 }
};
</script>

Screenshot - With Filter option for individual column

Fixed/Pin Columns on left (non-scrollable)

Add showLockColumnsButton props. Add lockable property in fields on those columns where you want to lock. Add lock property in fields on those columns where lockable is true. This is mandatory when lockable is true. Sample code is shown below, where we are making lockable columns as id & name, in which id column is locked by default whereas name column doesn't.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   :exportExcel="true"
                   :moveableColumn="true"
                   :showColumnFilterButton="true"
                   :showLockColumnsButton="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Script Section

<script>
import Table from "data-table-vue"; // import data-table-vue
export default {
 components: { Table }, // declare it as component
 data() {
   return {
     tableComponentData: {
       perPageOptions: [70],
       fields: [
         {
           name: "ID",
           key: "id",
           lockable:true,
           lock:true // this is mandatory if lockable is true and lock:true means this column will be locked by default
         },
         {
           name: "NAME",
           key: "name",
           lockable:true,
           lock:false // this is mandatory if lockable is true and lock:false means this column will be not be locked by default
         },
         {
           name: "ADDRESS 1",
           key: "address",
           multiFilterOption: true
         },
         {
           name: "ADDRESS 2",
           key: "address1",
           multiFilterOption: true
         },
         {
           name: "Mobile No",
           key: "mob"
         },
         {
           name: "Landline",
           key: "landline"
         },
       ],
        actionList: [
         {
           type: "link",
           refAddress: data => `edit/${data.id}`,
           getIcon: data => 'edit',
           hoverTitle: "Edit Item"
         },
         {
           type: "cb",
           refAddress: data => {
             alert(`Click on row with ID = `, data.id);
           },
           getIcon: data => '<i class="material-icons">add</i>',
           html: "true",
         }
       ]
     }
   };
 },
 methods: {
   getData() {
     let randomData = []
     for (let i = 0; i < 10; i++) {
       randomData.push(
           { 
               id: i + 1,
               name: `name ${i + 1}`,
               address: `Lorem Ipsum Dolor Sit Amet  ${i + 1}`,
               address1: `address 2 ${i + 1}`,
               mob: `mob_num_dummy_${i + 1}`,
               landline: `landline_dummy_${i + 1}`
           });
     }
     return randomData;
   },
   loadOfflineEntries(
     cb
   ) {
     let data = {
       status: 200,
       msg: this.getData()
     };
     cb(data);
   }
 }
};
</script>

Screenshot - With Fixed/Pin Columns on left (non-scrollable)

Memorize locally - all changes Ex: Filtered, Rearraged columns, default number of items / page etc.

Add memorizeSettingsLocally props. Sample code is shown below.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   :exportExcel="true"
                   :moveableColumn="true"
                   :showColumnFilterButton="true"
                   :showLockColumnsButton="true"
                   :memorizeSettingsLocally="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Screenshot - With Memorize locally

Sortable option on columns

Add sortable property in fields on those columns which you want it to be sortable. Sample code is shown below, where we are making sortable columns as ID, NAME, ADDRESS 1 & ADDRESS 2.

<template>
 <div>
   <div class="col s12">
     <div class="card">
       <div class="card-content">
         <div class="row no-margin">
           <div id="viewAll" class="col s12">
             <div class="row no-margin">
               <div class="col s12">
                 <Table
                   :offLineMode="true"
                   :fields="tableComponentData.fields"
                   :loadOfflineEntries="loadOfflineEntries"
                    defaultSort="id"
                    defaultSortDir="asc"
                    tableUniqueId="test_table"
                   :perPageOptions="tableComponentData.perPageOptions"
                   :hideSearchBox="false"
                   tableTitle="Demo Table"
                   actions="true"
                   :actionList="actionList"
                   :defaultSearchColumns="['id', 'name']"
                   :showSearchFilter="true"
                   searchByFilterName="This is Filter Title"
                   :showSearchFilterNotification="true"
                   :showColumnFilter="true"
                   columnFilterName="This is column show/hide options"
                   :showColumnFilterNotification="true"
                   :exportExcel="true"
                   :moveableColumn="true"
                   :showColumnFilterButton="true"
                   :showLockColumnsButton="true"
                   >
                 </Table>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

Script Section

<script>
import Table from "data-table-vue"; // import data-table-vue
export default {
 components: { Table }, // declare it as component
 data() {
   return {
     tableComponentData: {
       perPageOptions: [5, 10, 15],
       fields: [
         {
           name: "ID",
           key: "id",
           lockable: true,
           lock: true,
           sortable: true
         },
         {
           name: "NAME",
           key: "name",
           lockable: true,
           lock: false,
           sortable: true
         },
         {
           name: "ADDRESS 1",
           key: "address",
           multiFilterOption: true,
           sortable: true
         },
         {
           name: "ADDRESS 2",
           key: "address1",
           multiFilterOption: true,
           sortable: true
         },
         {
           name: "Mobile No",
           key: "mob"
         },
         {
           name: "Landline",
           key: "landline"
         },
       ],
        actionList: [
         {
           type: "link",
           refAddress: data => `edit/${data.id}`,
           getIcon: data => 'edit',
           hoverTitle: "Edit Item"
         },
         {
           type: "cb",
           refAddress: data => {
             alert(`Click on row with ID = `, data.id);
           },
           getIcon: data => '<i class="material-icons">add</i>',
           html: "true",
         }
       ]
     }
   };
 },
 methods: {
   getData() {
     let randomData = []
     for (let i = 0; i < 10; i++) {
       randomData.push(
           { 
               id: i + 1,
               name: `name ${i + 1}`,
               address: `Lorem Ipsum Dolor Sit Amet  ${i + 1}`,
               address1: `address 2 ${i + 1}`,
               mob: `mob_num_dummy_${i + 1}`,
               landline: `landline_dummy_${i + 1}`
           });
     }
     return randomData;
   },
   loadOfflineEntries(
     cb
   ) {
     let data = {
       status: 200,
       msg: this.getData()
     };
     cb(data);
   }
 }
};
</script>

Screenshot - With Sortable option on columns

Table Props

Below are the list of all possible attributes of data-table-vue

tableUniqueId: String

Must be passed as props Value should be unique identifier between multiple data-table-vue and must not contain any space or hyphen(-)

tableTitle: String

This property will start displaying the Table Title on top left corner. Don't pass this property if you don't need table title.

offLineMode : Boolean

Must be passed as props 1. If value istrue then the table will work in offline mode i.e. pagination, filter, search etc. will be calculated on browser side and no APIs will be called. 2. If value is false then the table will work as live mode i.e. pagination, filter, search etc. will not be calculated on browser, rather respective APIs will be called to get information.

perPageOptions: Array of Number(s)

Must be passed as props This will generate a dropdown for selecting items per page at the bottom right of the table for pagination First element will be selected as default

hideSearchBox: Boolean

By default the global search box will be visible but if you want to hide the global search box then pass value as true

noPagination: Boolean

By default the pagination will be visible but if you want to hide the pagination functionality then pass value as true

fields : Array of Objects

This will generate the Table Header Each object should contain appropriate keys mentioned below

loadOfflineEntries : Function

• This is the first function which will be called when data-vue-table loads.
• In this function you can call your API to get the table data.
• This function will be called if offLineMode is true
• Function must receive callback as first argument.
• To return list of rows/items for table, it must invoke callback function with object as parameter having following keys

loadEntries : Function

• This is the first function which will be called when data-vue-table loads.
• This function will be called if offLineMode is false or offLineMode has not been passed
• Function must receive start,recordsPerPage,currentSort,currentSortDir,searchText,defaultSearchColumns,hideLoading,callback as arguments.
• In this function you can call your API to get the table data based on above arguments.
• This function will be called every time when user changes any property For Ex: Sorting, Searching, Pagination.
• To return list of rows/items for table, it must invoke callback function with object as parameter having following keys.

defaultSort: String

Must be passed as props Value should match one of the fields' key

defaultSortDir: String

Must be passed as props

actions: String

This prop will make Action column visible/hidden.

fixedActionColumnOnLeft: Boolean

This prop is only valid if you have opted for actions. This prop will move Action column as first column of the table. This also makes the Action column as fixed and non scrollable. This prop is not mandatory By default, the Action column will be displayed as the last column of the table.

actionList : Array of Objects

This prop is only valid if you have opted for actions. This will generate the Action Button(s) for each row. Each object should contain appropriate keys mentioned below

defaultSearchColumns: Array of Strings

This will allow Global Search box to search on specified columns only. This will only work when hideSearchBox is false or hideSearchBox is not passed. Array must contain String elements and each element should match one of fields' key.

showSearchFilter: Boolean

This will allow Global Search box to search on user selected columns. By default the Global Search box will search based on defaultSearchColumns. This will only work when hideSearchBox is false or hideSearchBox is not passed.

searchByFilterName: String

This will allow to change the title of Search Filter popup and this is Optional. By default the title will be "Search By". This will only work when showSearchFilter is true. This will only work when hideSearchBox is false or hideSearchBox is not passed.

showSearchFilterNotification: Boolean

This will show Count of columns selected for search filter and this is Optional. By default the notification will not be shown. This will only work when showSearchFilter is true. This will only work when hideSearchBox is false or hideSearchBox is not passed.

fixedSearchBoxText: Boolean

This will fix the default text of Global Search Box. By default the text will be generated based on searchable columns. This will only work when showSearchFilter is true. This will only work when hideSearchBox is false or hideSearchBox is not passed.

showColumnFilter: Boolean

This will allow user to Show/Hide selected columns. By default all the columns are visible.

columnFilterName: String

This will allow to change the title of Column Filter popup and this is Optional. By default the title will be "View By". This will only work when showColumnFilter is true.

showColumnFilterNotification: Boolean

This will show Count of columns selected for search filter and this is Optional. By default the notification will not be shown. This will only work when showColumnFilter is true.

exportExcel: Boolean

This option will provide a download button option on top right. Upon clicking on button - there will be two options shown1. All Data -> This will export all the rows without any filter2. Only Filtered -> This will download only filtered rows This will only work when offLineMode is true.

moveableColumn: Boolean

This option will allow the column's header to be draggable so that order of the columns can be rearraged.

showColumnFilterButton: Boolean

This option will allow user to filter on individual columns. This option will provide a Filter button option on top right. Upon clicking on this button will toggle column filter options on each column header. This will work on only those columns (Object) of fields which contains multiFilterOption as true.

showLockColumnsButton: Boolean

This option will allow user to lock/pin individual columns. This option will provide a Lock button option on top right. Upon clicking on this button will toggle column lock/pin options on each column header. This will work on only those columns (Object) of fields which contains lockable as true.

memorizeSettingsLocally: Boolean

This option will automatically memorize all the user changes locally which will be applied when browser is refreshed or visited next time. This option will also provide a clear saved button option on top right. Upon clicking on this button will clear all the locally stored settings. Button will be colored if something is stored locally, whereas it will be greyed when there is no data saved.