https://github.com/mordisacks/vueified-datatables
dataTables drop in replacement in vue
https://github.com/mordisacks/vueified-datatables
datatables datatables-ajax vue vue2 vuejs2
Last synced: 6 months ago
JSON representation
dataTables drop in replacement in vue
- Host: GitHub
- URL: https://github.com/mordisacks/vueified-datatables
- Owner: MordiSacks
- Created: 2018-01-14T19:53:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-25T13:55:33.000Z (over 6 years ago)
- Last Synced: 2025-06-05T16:46:35.811Z (6 months ago)
- Topics: datatables, datatables-ajax, vue, vue2, vuejs2
- Language: Vue
- Size: 1.85 MB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Vueified DataTables
## Installation
Run
`yarn add vueified-datatables` or `npm install vueified-datatables`
In your code
```js
import VueifiedDataTables from 'VueifiedDataTables';
Vue.use(VueifiedDataTables);
```
Then in your template
```html
```
### Example of a columns object
```js
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
component: function(value, row){
return {
template: ``,
};
},
},
{
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
render: function(value, row){
return `${row.f_name} ${row.l_name}`;
},
},
];
```
Table will try first to run the `component` function,
then the `render` function, then wil default to the value.
### options
```js
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,
};
```