Skip to content
A vue.js component to create dynamic tables
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Initial commit VueDatasource V2 Apr 24, 2017
config Initial commit VueDatasource V2 Apr 24, 2017
docs Added website docs initial Oct 13, 2017
src Fixed missed assets for sorting Jan 17, 2018
static Initial commit VueDatasource V2 Apr 24, 2017
test Initial commit VueDatasource V2 Apr 24, 2017
.babelrc Initial commit VueDatasource V2 Apr 24, 2017
.editorconfig Initial commit VueDatasource V2 Apr 24, 2017
.eslintignore Initial commit VueDatasource V2 Apr 24, 2017
.eslintrc.js Initial commit VueDatasource V2 Apr 24, 2017
.gitignore Added dist May 21, 2017
.postcssrc.js
CHANGELOG.md Modify CHANGELOG.md May 14, 2017
LICENSE Initial commit Jan 11, 2017
README.md chore: updated readme.md Oct 9, 2018
index.html Initial commit VueDatasource V2 Apr 24, 2017
logo.png
package-lock.json Fixed dependencies Oct 30, 2017
package.json 2.0.7 Jan 17, 2018
screenshot.png Added new screenshot Oct 30, 2017
yarn.lock Added yarn Oct 14, 2017

README.md

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

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.

{
    ...,
    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
You can’t perform that action at this time.