0.1.4 • Published 7 years ago
vue-laravel-table-component v0.1.4
A straightforward Vue & Laravel component to filter and sort tables
This repo is forked from spatie/vue-table-component
Here's an example of how you can use it:
<table-component
:data="[
{ firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', editUrl: '<a href='#john'>Edit</a>', birthday: '04/10/1940', songs: 72 },
{ firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', editUrl: '<a href='#paul'>Edit</a>', birthday: '18/06/1942', songs: 70 },
{ firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', editUrl: '<a href='#george'>Edit</a>', birthday: '25/02/1943', songs: 22 },
{ firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', editUrl: '<a href='#ringo'>Edit</a>', birthday: '07/07/1940', songs: 2 },
]"
sort-by="songs"
sort-order="asc"
>
<table-column show="firstName" label="First name"></table-column>
<table-column show="lastName" label="Last name"></table-column>
<table-column show="instrument" label="Instrument"></table-column>
<table-column show="songs" label="Songs" data-type="numeric"></table-column>
<table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
<table-column show="editUrl" label="" :sortable="false" :filterable="false"></table-column>
</table-component>
Installation
You can install the package via yarn:
yarn add vue-laravel-table-component
or npm:
npm install vue-laravel-table-component --save
Next you must register the component. The most common use case is to do that globally.
//in your app.js or similar file
import Vue from 'vue';
import { TableComponent, TableColumn } from 'vue-laravel-table-component';
Vue.component('table-component', TableComponent);
Vue.component('table-column', TableColumn);
Alternatively you can do this to register the components:
import TableComponent from 'vue-laravel-table-component';
Vue.use(TableComponent);
Usage
Here's a simple example on how to use the component.
<template>
<div id="app">
<table-component :data="fetchData"
sort-by="name" sort-order="asc"
:table-class="'table'"
:filter-input-class="'form-control'"
:loading="true"
:loading-color="'red'"
>
<table-column show="name" label="First"></table-column>
<table-column show="email" label="Email"></table-column>
</table-component>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async fetchData({ page, filter, sort }) {
const response = await axios.get('/my-endpoint', { page, filter, sort });
// {
// current_page: 1,
// data: [],
// from: 1,
// last_page: 11,
// next_page_url: "/data?page=2",
// path: "/data",
// per_page: 10,
// prev_page_url: null,
// to: 10,
// total: 100
// }
return response;
}
}
}
</script>
Formatting values
You can format the values before they get displayed by passing a function to the formatter
prop. Here's an example Vue component that uses the feature.
<template>
<table-component
:data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
<table-column show="firstName" label="First name" :formatter="formatter"></table-column>
</table-component>
</template>
<script>
export default {
methods: {
formatter(value, row) {
return `<a href="${row.id}">${value}</a>`;
},
},
}
</script>
This will display values Hi, I am John
and Hi, I am Paul
.
Contributing
Please see CONTRIBUTING for details.
License
The MIT License (MIT). Please see License File for more information.
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
1.4.3-rc.2
7 years ago
1.4.2-rc.2
7 years ago
1.4.1-rc.2
7 years ago
1.4.0-rc.2
7 years ago