vd

vue-datasource

A vue.js component to create dynamic tables

Showing:

Popularity

Downloads/wk

81

GitHub Stars

425

Maintenance

Last Commit

3yrs ago

Contributors

8

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Table

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

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
<div id="#app">
    <server-datasource
        :source="items"
        :total="total_of_items"
        :columns="columns"
        :actions="actions"></server-datasource>
</div>
import { ServerDatasource } from 'vue-datasource'

new Vue({
    el: '#app',
    components: {
        ServerDatasource
    },
    data() {
        return {
            items: [...],
            total: 100,
            columns: [...],
            actions: [...]
        }
    }
});

Documentation

Available Props

PropTypeDefaultDescription
sourceArrayItems to show in table
totalNumberTotal of items
translationObject[Object]Defines the table labels language (structure)
limitsArray[1,5,10,15,20]Defines the limits to display
columnsArrayColumns to display
actionsArrayAction buttons (structure)

Available Events

EventDescription
changeHandle show limit changed. Gets object with new show limit and current page {perpage: 10, page: 2}
searchingHandles search input. Gets string as parameter
column-sortOnly 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.

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

{
    ...,
    columns: [
        {
            name: 'Role',
            key: 'role.name'
        }
    ]
}

Sort column

[New] You only need a order property in column defined for use this feature.

{
    ...,
    columns: [
        {
            name: 'Name',
            key: 'name',
            order: true
        }
    ]
}

This feature emit a event column-sort with this data object

{
    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 <strong>{value}</strong>
            }
        }
    ]
}

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial