vue-datasource

by coderdiaz

coderdiaz / vue-datasource

A vue.js component to create dynamic tables

418 Stars 92 Forks Last release: over 2 years ago (v1.0.12) MIT License 158 Commits 13 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

[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.