Need help with vue-datasource?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

coderdiaz
420 Stars 93 Forks MIT License 158 Commits 6 Opened issues

Description

A vue.js component to create dynamic tables

Services available

!
?

Need anything else?

Contributors list

# 10,562
CSS
vuejs
JavaScr...
vue2
133 commits
# 403,664
JavaScr...
HTML
vue2
vuejs
3 commits
# 441,943
JavaScr...
HTML
vue2
vuejs
2 commits
# 22,826
Vue.js
JavaScr...
HTML
vuejs
2 commits
# 507,166
JavaScr...
HTML
vue2
vuejs
1 commit
# 19,989
Vue.js
JavaScr...
TypeScr...
Shell
1 commit

[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

Buy me a coffeeBuy me a coffee

Install/Usage

For use this package is necessary install babel-plugin-transform-vue-jsx dependency.

$ npm install vue-datasource
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) | | limits | Array | [1,5,10,15,20] | Defines the limits to display | | columns | Array | | Columns to display | | actions | Array | | Action buttons (structure) |

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)

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:
[
    ...,
    {
        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.

{
    ...,
    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.

{
    ...,
    columns: [
        {
            name: 'Name',
            key: 'key',
            render (value, row) {
                return {value}
            }
        }
    ]
}

Translation Structure

{
    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

{
    ...,
    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

# 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 and docs for vue-loader.

Implementation examples

Contributions

All contributions are welcome send your PR and Issues.

License

This is a open-source software licensed under the MIT license

Crafted by Javier Diaz. Translation by itsuwaribito

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.