vue-customizable-datatable

A flexible and customizable datatable VueJS component

Demo

https://vue-customizable-datatable.netlify.app/

Requirements

• VueJS
• Any css library or your custom css to give the table your desired style and classes. (It is a very customizable datatable)

Installation

 npm i vue-customizable-datatable --save

Usage

Include the component,

 import DataTable from "vue-customizable-datatable";

Then, register the component, however you like:

 {
    ...
    components: {
        ...
        DataTable
    }
}

And then.. use the component:

 <data-table></data-table>

Of course, code above won't render anything. Here are the props it accepts to render some sensible data:

"Basic Table"
      

        
[ // Array of objects 
  {    
    label: "Name", // Column name
    field: "name", // Field name from row
    numeric: false,// Affects sorting
    html: false    // Escapes output if false.
  } 
];
          
      

        
[ // Array of objects 
  {    //check demo for examples
    name: 'Timothy',
    ...
  } 
];
          
      

[10, 20, 30, 40, 50] (default)
      

10 (default) // Default row per page
      

-1 (default) // By default table is not sorted by any column
      

alert('hey') // Function, row 1st param
      

true (default) // Row is passed in the event payload
      

true (default) // Whether sortable
      

true (default) // Whether searchable
      

true (default) // Whether only exact matches are returned
      

true (default) // Whether paginated
      

true (default)
      

true (default)
      

        
// Array of objects
[
  { 
    hide: false, // Whether to hide the button
    icon: "search", // Materialize icon 
    onclick: aFunc() // Click handler 
  } 
];
        
      

'table-responsive' (default)
      

'table table-bordered' (default)
      

false (default)
      

Adding buttons to Rows

 <datatable title="People" ...>
  <th slot="thead-tr">
    Actions
  </th>
  <template slot='tbody-tr'>
        <td>
            <button
            class='btn btn-default'
            >
            Edit
            </button>

            <button
            class='btn btn-danger'
            >
            Delete
            </button>
            <button
            class='btn btn-info'
            >
            View Holdings
            </button>
        </td>
    </template>
</datatable>