Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coderdiaz/vue-datasource
A vue.js component to create dynamic tables
https://github.com/coderdiaz/vue-datasource
dynamic-tables laravel pagination table vue vue-datasource vue2 vuejs
Last synced: 4 months ago
JSON representation
A vue.js component to create dynamic tables
- Host: GitHub
- URL: https://github.com/coderdiaz/vue-datasource
- Owner: coderdiaz
- License: mit
- Archived: true
- Created: 2017-01-11T23:25:20.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-24T02:14:34.000Z (over 5 years ago)
- Last Synced: 2024-09-23T04:31:58.600Z (4 months ago)
- Topics: dynamic-tables, laravel, pagination, table, vue, vue-datasource, vue2, vuejs
- Language: JavaScript
- Homepage:
- Size: 2.44 MB
- Stars: 417
- Watchers: 22
- Forks: 93
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-datasource - datasource?style=social) - 创建VueJS动态表格 (UI组件)
- awesome-github-vue - vue-datasource - 创建VueJS动态表格 (UI组件)
- awesome-github-vue - vue-datasource - 创建VueJS动态表格 (UI组件)
- awesome - vue-datasource - 创建VueJS动态表格 (UI组件)
README
[WIP] Vue Datasource go back renew. Coming soon V3.
Vue Datasource
A Vue.js component to create dynamic tables. Compatible with Vue 2.x and Laravel.
---
### Demo
### Donate
### Install/Usage
For use this package is necessary install [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) dependency.
```
$ npm install vue-datasource
```
```html
```
```javascript
import { ServerDatasource } from 'vue-datasource'
new Vue({
el: '#app',
components: {
ServerDatasource
},
data() {
return {
items: [...],
total: 100,
columns: [...],
actions: [...]
}
}
});
```
## Documentation
### Available Props
| Prop | Type | Default | Description |
|-------------|---------|----------------|------------------------------------------------------------------------------------|
| source | Array | | Items to show in table |
| total | Number | | Total of items
| translation | Object | [Object] | Defines the table labels language ([structure](#translation-structure)) |
| limits | Array | [1,5,10,15,20] | Defines the limits to display |
| columns | Array | | Columns to display |
| actions | Array | | Action buttons ([structure](#action-event-sctructure)) |
### Available Events
| Event | Description |
|-------------|-----------------------------------------------------------------------------------------------------|
| change | Handle show limit changed. Gets object with new show limit and current page `{perpage: 10, page: 2}`|
| searching | Handles search input. Gets string as parameter |
| column-sort | Only if `order` is defined in column array. Return the current column sorted with metadata ([Sort Column](#sort-column))
### Columns
Each column object needs `name` and `key` attributes.
```javascript
{
...,
columns: [
{
name: 'Name', // Table column name to display
key: 'name', // Key name from row object
}
]
}
```
Laravel users can access relationships through the `key` attribute. Lets say we have the following object in our users array:
```javascript
[
...,
{
name: 'Foo',
last_name: 'Bar'
role_id: 1,
role: {
name: 'admin'
}
}
]
```
To get the user role we would need to define in our columns array:
```javascript
{
...,
columns: [
{
name: 'Role',
key: 'role.name'
}
]
}
```
### Sort column
**[New]** You only need a `order` property in column defined for use this feature.
```javascript
{
...,
columns: [
{
name: 'Name',
key: 'name',
order: true
}
]
}
```
This feature emit a event `column-sort` with this data object
```javascript
{
sort: {
key: 'name',
order: false
},
type: 'DESC'
}
```
### Render column
This callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.
```javascript
{
...,
columns: [
{
name: 'Name',
key: 'name',
render(value) { // Render callback
return `Enginner ${value}`;
}
}
]
}
```
**[New]** Now you can use JSX for render other templates and too use the row data.
```javascript
{
...,
columns: [
{
name: 'Name',
key: 'key',
render (value, row) {
return {value}
}
}
]
}
```
### Translation Structure
```javascript
{
limit: 'Limit',
search: 'Search',
placeholder_search: 'Type to search..',
records_not_found: 'No records found',
pagination: {
show: 'Showing',
to: 'to',
of: 'of',
entries: 'entries'
}
}
```
### Action Event Sctructure
```javascript
{
...,
actions: [
{
text: 'Click me', // Button label
icon: 'glyphicon glyphicon-check', // Button icon
class: 'btn-primary', // Button class (background color)
show(selectedRow) { // Event to define a condition to display the button with the selected row
return true
},
event(e, row) { // Event handler callback. Gets event instace and selected row
console.log('Click row: ', row); // If no row is selected, row will be NULL
}
}
]
}
```
### Development
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
```
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
### Implementation examples
- Using Laravel 5.3 and pagination: [laravel-datasource-example](https://github.com/coderdiaz/laravel-datasource-example).
### Contributions
All contributions are welcome send your PR and Issues.
### License
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/LICENSE)
##### Crafted by Javier Diaz. Translation by [itsuwaribito](https://github.com/itsuwaribito)
