data table simplify! -- datatable component for Vue 2.x. See documentation at

Overview

npm npm npm

Vuetable-2 - data table simplify!


Vuetable-2 v2.0-beta is available now!

See the next branch.


Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x

If you're looking for the version that's working with Vue 1.x, please go to vuetable repo.


Documentation and Tutorial

Documentation is still under development, but you can view it at https://ratiw.github.io/vuetable-2. Thanks to @cristijora for the help.

Meanwhile, check out

  • the Tutorial with follow-along project here. It should be enough to get you started.

  • Sample project using Vuetable-2 with Laravel 5.4 and Laravel-Mix

If you've been using Vuetable for Vue 1.x before, checkout what's changed for info on changes from Vuetable for Vue 1.x and the upgrade guide on how you could upgrade from Vuetable for Vue 1.x.

You can now make use of Vue's scoped slot using the new __slot special field, thanks to @sjmarve. That means you are able to define action buttons per instance of a data table without depending on a globally defined component.

Use scoped slot in parent when defining the actions Vue Doc for scopped Slots

e.g.

<template slot="actions" scope="props">
    <div class="table-button-container">
        <button class="btn btn-default" @click="onClick('edit-item', props.rowData)"><i class="fa fa-edit"></i> View</button>&nbsp;&nbsp;
        <button class="btn btn-danger" @click="onClick('delete-item', props.rowData)"><i class="fa fa-remove"></i> Edit</button>&nbsp;&nbsp;
    </div>
</template>

the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :)

The original functionality still works

Breaking Changes

v1.6.0

  • The icons prop of VuetablePagination is now moved into the css prop object. See this codepen.

Example Code

  • Clone the project
  • Go into the cloned directory
  • npm install
  • npm run dev
  • Open browser to http://localhost:8080

Usage

NPM

npm install vuetable-2 --save-dev

Javascript via CDN

Thanks to @cristijora for providing helps on this.

// vuetable-2 dependencies
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
// vuetable-2
<script src="https://unpkg.com/[email protected]"></script>
Vue.use(Vuetable)

This is demonstrated in this jsfiddle.

The .use from above will register all the components globally.

function install(Vue){
  Vue.component("vuetable", Vuetable);
  Vue.component("vuetable-pagination", VueTablePagination);
  Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
  Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
}

Also you have the ability to access certain components if you need them:

VueTable: VueTable.default/VueTable.VueTable,
VueTablePagination: VueTable.VueTablePagination,
VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown

Contributions

Any contribution to the code (via pull request would be nice) or any part of the documentation and any idea and/or suggestion are very welcome.

Note For any bug fix, the PR should be forked from the master branch. And for any suggestion or additional feature, the PR should be forked from the develop branch, where it can be integrated and rolled out in the next release.

If you are not sure, please ask by openning a new issue.

However, please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable.

Your contributions can, not only help make Vuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.

License

Vuetable is open-sourced software licensed under the MIT license.

Comments
  • Multiple vuetables

    Multiple vuetables

    can more than 1 vuetable be setup on the same page? if so, how does one be sure loading, sorting, etc get triggered on each individual vuetable instead of on all?

    it's probable we'll want to use more than one on a page, i.e. for a dashboard page showing different tables of data.

    note: i'm using the dist .js file for vuetable...

    opened by clemsontiger 27
  • Cannot assign tableData when using axios.

    Cannot assign tableData when using axios.

    Hi all!

    When im switching to axios from this commit fd91517. The request is 200 and receiving the data it's all ok, but my table isn't rendering and the datain tableDatais null.

    I want to integrate vuetable-2 to Vue Admin.

    Can please anyone help! Thanks.

    opened by pwnz22 27
  • Latest update messing up vue-resource interceptors

    Latest update messing up vue-resource interceptors

    Just an FYI, the latest ^v1.6.0 doesn't seem to pick up vue-resource interceptors. I had to roll back the vuetable-2 version to v1.3.1 to get it working.

    Specifically, I use a vue-resource interceptor to attach an "Authorization" token to HTTP requests. However, it doesn't get added to calls made by vuetable2.

    opened by divyanthj 16
  • Local endpoint not being processed, yet it returns data

    Local endpoint not being processed, yet it returns data

    Firstly, love the component! Very cool!

    It works fine with your demo API endpoint, I've also connected it successfully to a remote endpoint on a project cloud server.

    However, what's really, really weird is that when I try and access a local endpoint (localhost:8000/api/sites)- which works fine in the browser, nothing shows up.

    I know for a fact that JSON data IS being returned.

    I get no errors of any kind. I'm seriously stuck. Any help would be much appreciated.

    question 
    opened by adavie1 16
  • fields prop breakes down after changing page

    fields prop breakes down after changing page

    Hello! I have faced with a strange problem. I use vuetable2 (with pagination) and Laravel 5.3.

    During an initial loading everything is well. But when I try to change page - table rendering fails. It happens because this.field prop breaks down. In loadData method before calling Vue.http.get there are 2 objects in property, but in the first row of loadSuccess method - it consists of 2 strings (as defined in directive)

    components defining:

                        <template>
                            <vuetable ref="vuetable"
                                      api-url="/oauth/clients/tokens"
                                      :fields="['user_id', 'client_id']"
                                      pagination-path=""
                                      @vuetable:pagination-data="onPaginationData">
                            </vuetable>
                            <div class="text-center">
                                <vuetable-pagination
                                        ref="pagination"
                                        :css="cssPagination"
                                        :icons="icons"
                                        @vuetable-pagination:change-page="onChangePage">
                                </vuetable-pagination>
                            </div>
                        </template>
    
            methods: {
                onPaginationData (paginationData) {
                    this.$refs.pagination.setPaginationData(paginationData)
                },
                onChangePage (page) {
                    this.$refs.vuetable.changePage(page)
                }
            }
    
    

    Vuetable.vue:

        loadData: function(success = this.loadSuccess, failed = this.loadFailed) {
          this.fireEvent('loading')
    
          this.httpOptions['params'] = this.getAllQueryParams()
            console.log(JSON.stringify(this.fields));
    /**
    output: "[{"name":"user_id","title":"User_id","titleClass":"","dataClass":"","callback":null,"visible":true},{"name":"client_id","title":"Client_id","titleClass":"","dataClass":"","callback":null,"visible":true}]"
    */
          Vue.http.get(this.apiUrl, this.httpOptions).then(
            success,
            failed
          )
        },
    
        loadSuccess: function(response) {
            console.log(JSON.stringify(this.fields));
    /**
    output: "["user_id","client_id"]"
    */
            this.fireEvent('load-success', response)
    ...
    
    bug 
    opened by RidgeA 16
  • Unknown plugin

    Unknown plugin "transform-runtime"

    Hi,

    I'm trying to use vuetable-2 but after yarn add vuetable-2 i have this error :

    ERROR in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vuetable-2/src/components/Vuetable.vue

    Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "F:\\dev\\Project\\node_modules\\vuetable-2\\.babelrc" at 0, attempted to resolve relative to "F:\\dev\\Project\\node_modules\\vuetable-2"

    question 
    opened by Shhu 16
  • Updating fields on load with a JSON source

    Updating fields on load with a JSON source

    I am trying to set the fields list, so they load from an external JSON blob and can be changed depending on the form.

    I have defined: :fields="fields"

    and set fields = [] in the data blob.

    On the mounted and ready, I run the following function:

            getVuetableSchema() {
                axios.get('/api/custom-fields/schema')
                    .then(function (response) {
                        this.fields = response.data;
                });
            },
    

    However the table never updates. It appears table fields on the data is still an empty array.

    The end point returns:

    [{"callback":"","dataClass":"","name":"id","title":"Id","titleClass":"","visible":"true"},{"callback":"","dataClass":"","name":"slug","title":"slug","titleClass":"","visible":"true"}]

    and I've also just tried single key values too.

    How do I set the fields dynamically for the table, using an external HTTP JSON request?

    opened by devappsoftware 15
  • Reloading table data with action buttons

    Reloading table data with action buttons

    Hi, Following tutorial 17, I made some action buttons in my table such as delete button. Now when I use it to delete a row, after deletion, I want table to reload, because if it had 10 results per page, after deletion it has 9 rows. How can I do that?

    opened by shaprk 14
  • How to sort with in api-mode = false

    How to sort with in api-mode = false

    Hello! Great plugin, but I confused in one thing - how to make it sort with custom query (I'm using axios for requests). Or maybe I missed some event, that I can catch and run my own query? Or somehow way to override method that makes sorting? Just please tell me is there any way or I should overwrite source code? @ratiw Thank you for any help.

    opened by egerb 14
  • Added support for function in field dataClass

    Added support for function in field dataClass

    Now we can use function to format cells according to rowData and/or rowIndex. The function accepts the rowData and the rowIndex as arguments.

    Ex:

    {
            name: 'price',
            title: 'Price',
            dataClass: function(rowData, rowIndex){
                if(rowData.change < 0){
                    return 'bg-red'
                } else {
                    return 'bg-green'
                }
            }   
     }
    
    enhancement 
    opened by topclaudy 14
  • added column widths and fixed header option

    added column widths and fixed header option

    added body and header wrapper css class options.

    The purpose of this PR is to provide a height and a fixed header option to vuetable.
    Mainly to address Issue 178.

    I am not exactly sure what you need me to do in order to accept this PR (add docs maybe?) - So I will be more than happy if you could provide some feedback regarding what you need me to do in order for you to merge this pull request (assuming you want it).

    The idea behind the implementation is taken from the markup of Element's table where I build one table with only a header and one table with a body - thus allowing fixed scroll without the need for JS.
    But - for the table header and body to be aligned with their column widths I had to add also a "width" option to the fields definition (which I felt that was missing anyway).

    Fixed header is activated when you specify a tableHeight option - then the component renders the content of the table in the given height and makes the header fixed.

    I modified the demo app to include a table with a fixedHeader and a height.
    I just starting using your component yesterday and I implemented this today as I could not use the table in my system without having a fixed header.

    Thanks.

    opened by rubinsh 14
  •  calling api in component field error with pagination

    calling api in component field error with pagination

    I have a problem with pagination. I use a component in the description field of an article, in the "mounted" of that component I make a call to an api. On the first page it shows the information well but when I go to the second page it repeats the same information in the same rows that I make the call. I hope it is understood I am using the google translator.

    opened by saab1942 0
  • Bump express from 4.15.3 to 4.17.3

    Bump express from 4.15.3 to 4.17.3

    Bumps express from 4.15.3 to 4.17.3.

    Release notes

    Sourced from express's releases.

    4.17.3

    4.17.2

    4.17.1

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0

    • Add express.raw to parse bodies into Buffer
    • Add express.text to parse bodies into string

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.17.3 / 2022-02-16

    4.17.2 / 2021-12-16

    4.17.1 / 2019-05-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.3.2 to 6.3.3

    Bump qs from 6.3.2 to 6.3.3

    Bumps qs from 6.3.2 to 6.3.3.

    Changelog

    Sourced from qs's changelog.

    6.3.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] use safer-buffer instead of Buffer constructor
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • ff235b4 v6.3.3
    • 4310742 [Fix] parse: ignore __proto__ keys (#428)
    • da1eee0 [Dev Deps] backport from main
    • 2c103b6 [actions] backport actions from main
    • aa4580e [Robustness] stringify: avoid relying on a global undefined (#427)
    • f8510a1 [meta] fix README.md (#399)
    • 4c036ce [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 180bfa5 [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • e0b2c4b [Tests] use safer-buffer instead of Buffer constructor
    • f7139bf [Fix] utils.merge: avoid a crash with a null target and an array source
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump css-what from 2.1.0 to 2.1.3

    Bump css-what from 2.1.0 to 2.1.3

    Bumps css-what from 2.1.0 to 2.1.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump karma from 1.7.0 to 6.3.16

    Bump karma from 1.7.0 to 6.3.16

    Bumps karma from 1.7.0 to 6.3.16.

    Release notes

    Sourced from karma's releases.

    v6.3.16

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    v6.3.15

    6.3.15 (2022-02-05)

    Bug Fixes

    v6.3.14

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    v6.3.13

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    v6.3.12

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    v6.3.11

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    ... (truncated)

    Changelog

    Sourced from karma's changelog.

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    6.3.15 (2022-02-05)

    Bug Fixes

    6.3.14 (2022-02-05)

    Bug Fixes

    • remove string template from client code (91d5acd)
    • warn when singleRun and autoWatch are false (69cfc76)
    • security: remove XSS vulnerability in returnUrl query param (839578c)

    6.3.13 (2022-01-31)

    Bug Fixes

    • deps: bump log4js to resolve security issue (5bf2df3), closes #3751

    6.3.12 (2022-01-24)

    Bug Fixes

    • remove depreciation warning from log4js (41bed33)

    6.3.11 (2022-01-13)

    Bug Fixes

    • deps: pin colors package to 1.4.0 due to security vulnerability (a5219c5)

    6.3.10 (2022-01-08)

    Bug Fixes

    • logger: create parent folders if they are missing (0d24bd9), closes #3734

    ... (truncated)

    Commits
    • ab4b328 chore(release): 6.3.16 [skip ci]
    • ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"
    • c1befa0 chore(release): 6.3.15 [skip ci]
    • d9dade2 fix(helper): make mkdirIfNotExists helper resilient to concurrent calls
    • 653c762 ci: prevent duplicate CI tasks on creating a PR
    • c97e562 chore(release): 6.3.14 [skip ci]
    • 91d5acd fix: remove string template from client code
    • 69cfc76 fix: warn when singleRun and autoWatch are false
    • 839578c fix(security): remove XSS vulnerability in returnUrl query param
    • db53785 chore(release): 6.3.13 [skip ci]
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v2.0.0-beta.4)
  • v2.0.0-beta.4(Nov 12, 2018)

  • v2.0.0-beta.2(Aug 13, 2018)

    New props

    • detail-row-options
      • type: Object
      • default: {}
      • description: allow passing additional options to detail row component.
    • first-page
      • type: Number
      • default: 1
      • description: Set this prop to 0 for zero based pagination

    Changes

    • data-manager - should be able to support Promise, thanks @bochkovyi.
    • add per-page to watch() section. Close #413. Thanks @lbenevenuto.
    • __sequence is now starting from 1 instead of 0 when pagination is disabled. Close #476. Thanks @kapalla.

    Fixes

    • MIssing header-event in VuetableRowHeader. Close #482 #499. Thanks @martixy and @Atuna.
    • Fix function fetch not working as intended when using POST method. Close #388, #392. Thanks @mondul.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.3(Aug 14, 2018)

  • v2.0.0-beta.1(Jun 1, 2018)

    Please install using

    npm install [email protected] --save-dev
    

    Upgrading From v1.7

    Special fields are converted to Field components

    You should still able to use it the same way as in previous version. But now you are no longer limited to the provided special fields as in earlier version. You can now implement your own field components and use them with Vuetable.

    Internally, Field component is quite different but I've tried my best to make it easy enough to implement one of your own. You can see more information implementation detail in the documentation section. You can also look at source of available field components in the package to see how it's done.

    And if you would like to share your own Field components to the others, please let me know. I'll create a link to your work.

    __slot:<slotName> special field is no longer needed

    Vuetable can now automatically map the scoped slot you defined inside <vuetable>, thanks to the original work by @pyrello for PR #79.

    Just removed the __slot: prefix from the name option, everything should still work the same.

    // previously
    {
      name: "__slot:actions",
    }
    
    // now it should just be
    {
      name: "actions",
    }
    

    Fields definition

    • callback is now renamed to formatter

      This is long overdue and intended to emphasize its usage as a formatter for its field specific data value.

    • formatter option must now be a Function. String of function name is no longer supported.

      // previously
      let fields = [
        { name: 'code', callback: 'formatCode' }
      ]
      
      // should now be
      let fields = [
        { name: 'code', formatter: (value) => value.toUpperCase() }
      ]
      

      In the above code, formatCode is defined as inline (arrow) function.

      But you can also define formatCode as a function/method somewhere in your code, and reference it as well in case you want to use that formatter more than once.

    • name option changes

      Previously, name option is used to maps to a column in your data or special fields (the one with leading double underscore "__").

      For special field, Vuetable will now check the name option in the following order to determine what it is: - if it is a Field component - if there is a scoped slot of that name defined inside <vuetable> tag. - default to column name in the data

      Please find out more here

    Props changes

    • Props that also accept Function

      • query-params

        It now can also be a function. The function will receive 3 arguments

        • current sort order array
        • current page number
        • current page size

        Using query-params as a function, you can completely override how the query string for ajax request would look like.

        <vuetable
          :query-params="queryParams"
        ></vuetable>
        
        //...
          methods: {
            //...
            queryParams (sortOrder, currentPage, perPage) {
              return {
                '_sort': sortOrder[0].name,
                '_order': sortOrder[0].direction,
                '_page': currentPage,
                '_size': perPage
              }
            }
          }
        
      • detail-row-component

        Now, detail-row-component can also be a (Vue component) Object instead of only a string of component name registered globally.

        This allows you to assign the component directly without having to globally register via Vue.component(...)

    • Props that only accept Function

      • transform

        In previous version, to use transform you have to declare the function in the maininstance.

        In this version, it becomes a prop which is functionally the same but this makes it clearer where you can use it.

        To upgrade, just assigned your existing "transform" function/method to this transform prop and it's done.

      • New props

        • field-prefix Vuetable will replace the double underscore characters (__) with this field-prefix.

          By default, it is "vuetable-field-", but you can change this to whatever that suits your need.

          Please note that if you change this to something else, you'll have to register your Field component name accordingly, otherwise the Field component rendering will not work.

          Please make sure that you really understand this before attempting to change it.

        • event-prefix

          The event name that will be prefixed to the event generated by Vuetable.

          By default, it is "vuetable:".

        • header-rows

          Array of components to be called to render table header rows.

          By default, this will call VuetableRowHeader component.

    Source code(tar.gz)
    Source code(zip)
  • v1.7.5(Feb 5, 2018)

  • v1.7.4(Feb 2, 2018)

  • v1.7.3(Feb 2, 2018)

  • v1.7.2(Jan 1, 2018)

    • query-params can also be a Function. It will receive sortOrder, currentPage, and perPage as its parameters. See this for more detail.
    • fix event for right-clicking on a cell, by @toshnota.
    • fix sorting not working in data mode when clicking at table header.
    • fix transition tag position

    ** Vuetable-2 next version is coming soon! Have a happy holidays! :)

    Source code(tar.gz)
    Source code(zip)
  • v1.7.1(Dec 9, 2017)

    • new event: vuetable:cell-rightclicked, PR #325 by @asychikov
    • refresh() and reload() are now return Promise, so you can chain .then method whenever the request ends. PR #316 by @flavio-jr
    • Data mode (api-mode="false") improvement, PR #300 by @jwkicklighter
    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Nov 2, 2017)

    • Fixed header feature is now supported via table-height prop, thanks to @rubinsh PR #266. See doc for more detail.

    • new field definition option: width It is recommended that you use the width option to specify the width of each field when using fixed header table. Thanks to @rubinsh.

    • no-data-template prop is now support HTML, PR #292. Thanks to @itelmenko.

    • new prop: show-sort-icons, also new options in css prop: ascendingClass and descendingClass When enabled, Vuetable will add additional css class to the <th> that would allow specific styling targeting the sort direction. See PR #262 and #263 for more info, thanks to @jwkicklighter.

    • new event: vuetable:row-mouseover, thanks to @DorkasV

    • new prop: httpFetch (type: Function, default: null) When specified, allowing user to specify external http request function to fetch the data via AJAX, otherwise, fallback to using axios internally as discussed in #127

    • new css.sortableIcon option. (type: String, default: '') When given, allow specifying css class to be displayed to provide visual clue which column is sortable. PR #192, thanks to @SUKOHI.

    • new prop: initial-page (type: Function, default: 1) Allow specifying the first page number of the data to be loaded during initialization.

    • Fixes

      • detail row transition position was incorrectly. Thanks PrimozRome for PR #258, Fixed #257.
    • others:

      • Thanks @muhammadsaeedparacha for PR #207 updating doc.
      • Thanks @SergeyMiracle for PR #286, removing babel-preset-2015 dependency.
    Source code(tar.gz)
    Source code(zip)
  • v1.6.6(Sep 21, 2017)

    VuetablePagination has a v-if in the top-level in the template section which was working before 2.4.x (I'm not sure which one).

    But after update to Vue 2.4.4, this no longer work which makes sense since if the top-level block is falsy, the div should be removed from the Virtual DOM and therefore should not be referable via refs. However, this was not enforced properly by Vue prior to 2.4.x.

    This patch fixes this problem by changing v-if to v-show, which is supposed to be the correct logic.

    Source code(tar.gz)
    Source code(zip)
  • v1.6.3(Jun 5, 2017)

    New props

    Others

    • Fix test to make it work with axios -- by @kiltec
    • Fix field visibility bug in the demo --
    • update build script to webpack 2 -- by @cristijora
    • generate new document from wiki using docsify -- by @cristijora
    • minified and non-minified dist file -- by @cristijora, close #153
    • bundles now also export VuetablePaginationMixin and VuetablePaginationInfoMixin
    Source code(tar.gz)
    Source code(zip)
  • v1.6.0(Apr 25, 2017)

    Vuetable-2 v1.6.0

    • You can now display icon (via CSS class) in column title. See doc here
    • Vuetable now watch changes to api-url prop so that the data gets automatically refresh, thanks to @c0defre4k for PR #58.
    • Replace vue-resource with axios, thanks to @ lmj0011 for PR #65
    • Fix els.forEach compatibility issue that caused error on browsers other than Chrome. Thanks to @bajian for PR #66.
    • Deprecate row-class-callback prop for row-class prop
    • row-class prop is now also accepting Function, thanks to @c0defre4k for PR #82.
    • Add CDN bundle to dist directory, thanks to @cristijora for PR #94.
    • Fix problem with browserify, thanks to @pajtai for PR #100.
    • Move most of the CSS related icon classes into css prop.
    • Support data array via api-mode (which is true by default) and data prop. The default behavior (and still is) of Vuetable-2 is working with API endpoint. The api-mode was added to allow using client side data array with Vuetable. However, all functionalities related to server side are disabled, e.g. sorting, paging, page sizing, etc. Related methods and properties will be marked if they will work on ApiMode only or not.
    • sortFiled is now passed to the __component. Thanks to @SimplyCorey, Close #68.
    • Log error to console when loadData failed. this will help identifying the problem easier when there is problem requesting data from the server
    • Rename sort-icon to handle-icon, rename css.sortHandleIcon to css.handleIcon
    • New method: resetData This will set both tableData and tablePagination to null and fire vuetable:data-reset event.
    • New event: vuetable:data-reset This event will help improve better coordination with pagination and pagination info components when the data has been reset to null.
    • New prop: render-icon -- allow overriding how the icon tag is rendered
    • Thanks the following contributors for helping with documentation
      • @jeitnier for #108
    • Special thanks to @cristijora for helping out on the questions in the issues and improving the CDN bundle, PR #123.
    • Sorry if I missed out anyone, please do not hesitate to let me know.

    Note
    I'm still new to semantic versioning and I learn as I go with this project. That's why the version number is a bit strange.

    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Feb 15, 2017)

  • 1.2.0(Jan 28, 2017)

  • v1.1.1(Jan 19, 2017)

  • v1.1.0(Jan 15, 2017)

    • new prop: track-by replace detail-row-id and default id for __checkbox field
    • new special field: __handle and new css class: sortHandleIcon for working with Sortable.js
    • new events for __checkbox: vuetable:checkbox-toggled and vuetable:checkbox-toggled-all, thanks @abishekrsrikaanth for suggestion.
    • use <transition> tag for detail row
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Dec 17, 2016)

  • v1.0.0(Dec 17, 2016)

    • fix: select all checkbox (in table header) to display indeterminate state correctly for each page
    • fix: multi-sort incorrectly use name instead of sortField
    • fix: sort-icon for component field type, thanks @loshmis #17
    • new prop: row-index for __component field and detail row component
    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(Oct 15, 2016)

Owner
Rati Wannapanop
Rati Wannapanop
vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x

Introduction vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x. The data table component in Vuetify 3 hasn't

HC 222 Dec 30, 2022
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...

vue-easytable English | 中文 Introduction Based on vue2.x flexible table components. v2.0 New Version Complete rewriting of version 1.0. Based on JSX sy

null 3.1k Jan 3, 2023
A Vue.js wrapper component for jquery datatable.

vue-js-datatable vue-js-datatable is wrapper vue package of datatables.net Installation npm install --save @parthfaladu/vue-js-datatable Or using yar

Parthfaladu 9 Dec 6, 2022
A lightweight vue datatable component with no dependencies

v-datatable-light A lightweight, simple and easy data table for Vue. Features Lightweight Provide a Pagination component Provide a Items-per-page comp

Aquiles Boff da Silva 53 Dec 4, 2022
A fancy Materialize CSS datatable VueJS component.

vue-materialize-datatable A fancy Materialize CSS datatable VueJS component BTC donations: 16dt5DdjGvduZ3KZcFrwsBA82qqfrcbeUQ Demo https://microdroid.

Yousef Sultan 172 Dec 8, 2022
Basic DataTable component for Vue3 in typescript and Composition API

Basic DataTable component for Vue3 in typescript and Composition API. It has basic functionality such as Filter/Search, pagination etc.

JoBins 96 Jan 2, 2023
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

Module SonarCloud Status ag-grid-community ag-grid-enterprise ag-Grid ag-Grid is a fully-featured and highly customizable JavaScript data grid. It del

ag-Grid 9.5k Dec 30, 2022
Bulma themed, VueJS powered Datatable with server-side loading and JSON template setup

Tables Data Table package with server-side processing, unlimited exporting and VueJS components. Quickly build any complex table based on a JSON templ

Laravel Enso 617 Dec 21, 2022
A datatable server side mode for vuejs

JL Datatable A datatable server side mode for vuejs ⚙️ It was made for vuejs 3 and to work with laravel 8, however it can work with other backend prog

Jhoni Larico 7 Sep 11, 2022
Arne De Smedt 122 Dec 26, 2022
A simple table component based Vue 2.x: https://dwqs.github.io/v2-table/

中文 README v2-table A simple table component based Vue 2.x. Installation Install the pkg with npm: npm i --save v2-table beautify-scrollbar or yarn ya

Pomy 98 Feb 7, 2022
A fully functional Vue Table, to meet most of the Table all requirements, and perfect compatibility with any component library

s-table A fully functional Vue Table, to meet most of the Table all requirements, and perfect compatibility with any component library.

杨玉杰(Chris Yang) 0 Jun 26, 2020
Data table component for Vue 1.x

Vue Date Table Component Attention: new repo for Vue 2.x: https://github.com/OneWayTech/vue2-datatable Intellectual property of Oneway.mobi Notice Thi

OneWay 22 Jan 31, 2022
The best Data table component for Vue.js

Vue Date Table Component Attention: new repo for Vue 2.x: https://github.com/OneWayTech/vue2-datatable Intellectual property of Oneway.mobi Notice Thi

OneWay 22 Jan 31, 2022
A data table created using Vue.js

Vueye Table Vueye data table is a responsive data table component based on Vue.js, it organizes your data per pages in order to navigate easily. This

Brahim 112 Nov 14, 2022
Simple yet powerful Data Table for Vue with vanilla HTML structure

VueJs Smart Table Vue Smart Table was created out of the need for a simple highly customizable data table plugin that could take advantage of Vue's sl

Hector Romero 196 Jan 7, 2023
A table allowing to group your data by multiple fields for Vue.js

vue-grouped-table Usage Install npm install @acarat/vue-grouped-table Import the component import { GroupedTable } from "@acarat/vue-grouped-table"; U

Antoine Carat 5 May 21, 2020
Simple table view for Speckle data based on Vue.

Simple table view for Speckle data based on Vue.

Speckle 11 Sep 15, 2022
A custom data-table built using vue and uikit3

vue-uikit-datatable A Simple Datatable for the UiKit 3.0 Framework. For npm: npm install vue-uikit-datatable For yarn yarn add vue-uikit-datatable To

Victory Garuba 8 Dec 8, 2022