Vueified DataTables
Installation
Run
yarn add vueified-datatables
or npm install vueified-datatables
In your code
; Vue;
Then in your template
Example of a columns object
let columns = // the key to read from json data: 'id' // the table header (optional, will use key by default) title: 'User ID' // is column sortable {true|false} (optional, true by default) sortable: true // is column searchable {true|false} (optional, true by default) searchable: true // Callback, receives cell value and row, should return a vue component, if is set, cell will render the component { return template: `<i @click="delete" class="fa fa-trash">` ; } data: 'f_name' title: 'First Name' data: 'l_name' title: 'Last Name' data: 'id' title: 'Full Name' // Callback, receives cell value and row, should return string or int { return ` `; } ;
Table will try first to run the component
function,
then the render
function, then wil default to the value.
options
let options = // Current values are the defaults. // Language you can pass an object with your own language, // look in a language file (ins translations folder) for more details language: {} // Number of rows to display by default rowsPerPage: 10 // Optional number of rows (for select by user) configRowsPerPage: 10 25 50 100 // Classes to use in the table element tableClasses: '' // Display first and last buttons firstLast: false // Display the search box search: true // Display table header header: true // Display table footer footer: false;