@barbosa89/vue-table v0.1.28
Vue-table component
Vue-table is a data table component that allows the developer a high degree of customization, it takes care of complex tasks and gives the developer control over how the data is displayed. This component works with the Laravel framework pagination response.
Features
- Pagination
- Go to specific page
- Option for records by page
- Search input
- Multilingual support
- Responsive
Installation
npm i @barbosa89/vue-table
Usage
The component styles are based on the CSS framework Bootstrap 4, so, Vue-table is structured in three rows (.row), so you must nest the component inside a Bootstrap container (.container/.container-fluid).
How it works
Vue-table does not display the data sent by the server directly, this passes each record to a slot, the developer uses the slot to determine the way the data is displayed.
Props
The component can be configured with four props:
- headers: It is an array that contains objects with two properties, description and sortable, the description property is required and represents a table column header; the sortable is optional, it is used as a data sort column.
headers: [
{
description: 'Id', # Name to display
sortable: 'id', # Sortable column name in table
},
{
description: 'Email' # No sortable column
}
]
- url: The endpoint from which Axios will request data.
https://myapp.com/endpoint
lang (en/es): The language to use, by default is English, English and Spanish are supported.
locales: It is an object of translations.
locales: {
en:{
display: 'Records per page',
search: 'Search',
record: 'Record',
of: 'of',
total: 'Total'
},
es:{
display: 'Registros por página',
search: 'Buscar',
record: 'Registro',
of: 'de',
total: 'Total'
}
}
- params: Object with additional parameters such as filters.
params: {
model: 'value',
reference: 'value'
}
- user-data: Array|Object data from user. If the prop is an array, a list without controls is printed. If the prop is an object, the Laravel pagination variables are assigned:
{
"total": 50,
"per_page": 15,
"current_page": 1,
"last_page": 4,
"first_page_url": "http://laravel.app?page=1",
"last_page_url": "http://laravel.app?page=4",
"next_page_url": "http://laravel.app?page=2",
"prev_page_url": null,
"path": "http://laravel.app",
"from": 1,
"to": 15,
"data":[
{
// Result Object
},
{
// Result Object
}
]
}
When a Laravel paging object is assigned, the parent component must listen for an event to update the URL.
<vue-table :url='myUrl' :user-data='paginationObject' @url-update='myUrl = $event'></vue-table>
Listen event using a method:
<vue-table :url='myUrl' :user-data='paginationObject' @url-update='updateUrl'></vue-table>
- data-key: You can pass a custom data key to access the data received from the API service.
return response()->json([
'key' => $collection,
]);
when you don't pass a custom data key, it means the API service send data as follows:
return response()->json($collection);
- search-icon: Now you can pass a custom search icon, example: fas fa-search.
Example
<template>
<div class="container">
<h1 class="text-center my-4">Vue Table component</h1>
<vue-table :headers="headers" :url="url">
<template v-slot:record="{ record }">
<td>
<a href="#">
{{ record.id }}
</a>
</td>
<td>
<a href="#">
{{ record.first_name }}
</a>
</td>
<td>
<a href="#">
{{ record.last_name }}
</a>
</td>
<td>
{{ record.email }}
</td>
</template>
</vue-table>
</div>
</template>
<script>
import VueTable from 'VueTable'
export default {
data() {
return {
headers: [
{
description: 'Id',
field: 'id', # Sortable column
},
{
description: 'Name',
field: 'name', # Sortable column
},
{
description: 'Last',
field: 'last', # Sortable column
},
{
description: 'Email' # No sortable column
},
],
url: 'https://myserver.app/api/users?page=1',
// Optional, You will need to pass the props
lang: 'en',
locales: {
en:{
display: 'Records per page',
search: 'Search',
record: 'Record',
of: 'of',
total: 'Total'
},
es:{
display: 'Registros por página',
search: 'Buscar',
record: 'Registro',
of: 'de',
total: 'Total'
}
}
};
},
components: {
VueTable
}
}
</script>
Internacionalization
With packages like vue-i18n, you can automate multiple languages:
lang: document.documentElement.lang,
locales: {
en:{
display: $t('display'),
search: $t('search'),
record: $t('record'),
of: $t('of'),
total: $t('total')
},
es:{
display: $t('display'),
search: $t('search'),
record: $t('record'),
of: $t('of'),
total: $t('total')
}
}
Server side with Laravel
Vue-table sends Laravel a series of parameters namely:
- page
- per_page
- search: The search param
- ordered_desc/ordered_asc
URL example:
mylaravel.app/endpoint?page=1&per_page=15&search_=text&ordered_desc=column_name
In an example of implementation in Laravel 7:
public function index()
{
$posts = Post::query();
foreach(request()->toArray() as $filter => $value) {
$filter = Str::camel($filter);
if($posts->hasNamedScope($filter)) {
$posts->{$filter}($value);
}
}
return $posts->paginate(request->get('per_page', 15));
}
You need to create three scopes corresponding to each parameter, excluding per_page and page, which are passed to Laravel directly:
// Eloquent model
public function scopeQueryBy($query, $value)
{
return $query->Where('name', 'like', '%' . $value . '%');
}
public function scopeOrderedDesc($query, $value)
{
return $query->orderBy($value, 'DESC');
}
public function scopeOrderedAsc($query, $value)
{
return $query->orderBy($value, 'ASC');
}
Developers
npm install -g @vue/cli
# OR
yarn global add @vue/cli
You will need an add-on service for Vue CLI
npm install -g @vue/cli-service-global
Run local server
npm run dev
Run production mode
npm run build
Next steps
- Create a data table package for infinite loading
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago