Vue.js 2 grid components

Overview

xscode npm version GitHub stars GitHub license npm Build Status Gitter chat Twitter Follow

Foo


Vue 3 package is now available for subscribers

The package is stored on the vue3 branch. Please see instructions here There are almost no breaking changes, so migration from v2 should be easy-peasy

If you haven't subscribed yet you can start a 30 days free trial now.

About Vue Tables 2

Vue Tables 2 was created to give developers a fully featured tool-set for creating beautiful and useful data tables with Vue.js. Used in hundreds of commercial software applications, Vue Tables 2 is constantly growing, improving and getting new features.

License and Premium Features

dual license

As of version 1.6.0, this project is licensed under the GPLv3 license. An MIT licensed version is available for an annual subscription here In addition to the permissive license, paying users will enjoy premium features and receive ongoing priority support for any issue that might arise.

We offer a one month FREE trial so you can check the premium features yourself.

Demo

Click here to see the client component in action and fiddle with the various options or here for a rudimentary server component demo.

Installation

Install with npm or via CDN, Read More.

Documentation

Please click here for GitBook documentation.

Premium Features

  • Selectable rows
  • Sticky Headers
  • Virtual Pagination
  • Download CSV of client component data
  • Multiple-level grouping with data layer backing
  • Tailwind theme
  • Request failed message
  • Axios: automatically cancel pending requests when a new request is sent
  • Server Side: Draw Counter to render only latest request

Feel free to suggest more premium features and I'll consider adding them


Contributing

All contributions are welcome.
Learn more about how you can contribute to this project here.

Author

I’ve been working on Vue Tables 2 for the past 3 years, and I’m here for your questions, suggestions and comments.
We are always happy to hear from you, so we can make Vue Tables 2 better for everyone.
Please feel free to contact me with your feedback - [email protected]

2020 © Copyright. Vue Tables 2 All Rights Reserved. Created by Matanya Fischeimer.

VueJS 1

Users of VueJS 1 should use this package.

Issues
  • v-server-table attempting to generate table before getting data from server

    v-server-table attempting to generate table before getting data from server

    This is reopening bug #166. This is definitely happening.

    • Vue.js version: 2.1.10
    • consumed using: webpack
    • FULL error message (including stack trace):
    dist.min.js:31 TypeError: Cannot read property 'map' of undefined
        at Array.concat.module.exports (1.js:6244)
        at a.<anonymous> (1.js:1807)
        at a.e._render (dist.min.js:32)
        at a.r (dist.min.js:31)
        at So.get (dist.min.js:32)
        at new So (dist.min.js:32)
        at ve (dist.min.js:31)
        at a.pt.$mount (dist.min.js:33)
        at a.pt.$mount (dist.min.js:33)
        at init (dist.min.js:32)
    

    The stack trace comes from compiled/template.js where its var rows = require('./template/rows')(h, this). This seems to then try to map the data property from here:

        var data = that.source == 'client' ? that.filteredData : that.tableData;
        data.map(function (row, index) {
    

    This is failing because that.tableData is undefined. My server is returning the correct data, it just doesn't have it yet. The table does render, but sorting/etc doesn't work because of the javascript error.

    If I manually wrap the map with a check to make sure data is an array, everything works fine. However, that's not probably the best solution.

    opened by jasonlfunk 24
  • on refresh callback

    on refresh callback

    • Vue.js version: 2.3
    • consumed using: webpack

    It is possible to run a callback after refreshing table? Typical scenario would be ondeleting row event to remove spinner overlay after correct table refresh. If it is not possible, i can help to improve...

    opened by beniaminorossini 23
  • Can't resolve 'fs' and require problem

    Can't resolve 'fs' and require problem

    • Vue.js version: ^2.5.13
    • consumed using: webpack
    • FULL error message (including stack trace):
    WARNING in ./node_modules/use/utils.js
    3:34-41 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
     @ ./node_modules/use/utils.js
     @ ./node_modules/use/index.js
     @ ./node_modules/snapdragon/lib/compiler.js
     @ ./node_modules/snapdragon/index.js
     @ ./node_modules/braces/lib/braces.js
     @ ./node_modules/braces/index.js
     @ ./node_modules/micromatch/lib/utils.js
     @ ./node_modules/micromatch/index.js
     @ ./node_modules/filter-array/index.js
     @ ./node_modules/array-intersection/index.js
     @ ./node_modules/vue-tables-2/compiled/methods/has-date-filters.js
     @ ./node_modules/vue-tables-2/compiled/mixins/methods.js
     @ ./node_modules/vue-tables-2/compiled/table.js
     @ ./node_modules/vue-tables-2/compiled/v-client-table.js
     @ ./node_modules/vue-tables-2/compiled/index.js
     @ ./src/main.js
     @ multi ./build/dev-client ./src/main.js
    
    ERROR in ./node_modules/snapdragon/lib/source-maps.js
    Module not found: Error: Can't resolve 'fs' in '/media/arthur/work/Repos/igarape/paraty-web/node_modules/snapdragon/lib'
     @ ./node_modules/snapdragon/lib/source-maps.js 3:9-22
     @ ./node_modules/snapdragon/lib/compiler.js
     @ ./node_modules/snapdragon/index.js
     @ ./node_modules/braces/lib/braces.js
     @ ./node_modules/braces/index.js
     @ ./node_modules/micromatch/lib/utils.js
     @ ./node_modules/micromatch/index.js
     @ ./node_modules/filter-array/index.js
     @ ./node_modules/array-intersection/index.js
     @ ./node_modules/vue-tables-2/compiled/methods/has-date-filters.js
     @ ./node_modules/vue-tables-2/compiled/mixins/methods.js
     @ ./node_modules/vue-tables-2/compiled/table.js
     @ ./node_modules/vue-tables-2/compiled/v-client-table.js
     @ ./node_modules/vue-tables-2/compiled/index.js
     @ ./src/main.js
     @ multi ./build/dev-client ./src/main.js
    

    screenshot from 2018-02-19 11-53-30

    • steps for reproducing the issue: I just imported the lib and got this error message.
    help wanted 
    opened by arthurvasconcelos 20
  • Datepicker not working

    Datepicker not working

    • Vue.js version: 2.2.1
    • consumed using: (browserify/webpack/rollup) webpack
    • FULL error message (including stack trace):
    • relevant code:
    
    window._ = require('lodash');
    
    window.$ = window.jQuery = require('jquery');
    
    window.moment = require('moment');
    require('daterangepicker');
    
    require('bootstrap-sass');
    
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import VueResource from 'vue-resource';
    
    
    import axios from 'axios';
    import noty from 'noty';
    import sweetalert from 'sweetalert';
    
    window.Vue = Vue;
    Vue.use(VueRouter);
    
    window.axios = axios;
    window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
    };
    
    
    import {ServerTable, Event} from 'vue-tables-2';
    Vue.use(ServerTable, {
    filterByColumn: true,
    compileTemplates: true,
    responseAdapter: function (resp) {
        return {
            data: resp.data,
            count: resp.total
        }
    },
    templates: {
        open: 'open-vuetable-resource'
    },
    
    sortIcon: {
        base:'fa',
        up:'fa-sort-amount-asc',
        down:'fa-sort-amount-desc'
    },
    rowClassCallback: function(row) {return `row-${row.id}`},
    
    datepickerOptions: {
        showDropdowns: true
    }
    });
    
    Vue.component('open-vuetable-resource', {
    props: ['data'],
    template: `<a :href="data.ShowAdmin" class='btn btn-primary'><i class="fa        fa-eye"></i></a>`
    });
    
    
    $(document).ready(function() {
    new Vue({
        el: "#people",
        data: {
            columns: ['id', 'username', 'email', 'created_at', 'open'],
    
            options: {
                filterable: ['id', 'username', 'created_at', 'email'],
                sortable: ['id', 'username', 'created_at', 'email'],
                dateColumns: ['created_at']
            }
        }
    });
    });
    

    Datetimepicker is not showing up at all, not even the search box, if i use [moment('created_at')] for the datecolumns the search box shows up but not the datetimepicker.

    bug 
    opened by gergo2007 17
  • React is not defined when using JSX on template

    React is not defined when using JSX on template

    • Vue.js version: 2.0.1
    • consumed using: (browserify/webpack/rollup)
    • Uncaught ReferenceError: React is not defined
    <script>
    export default {
        props: ['url', 'columns'],
        data() {
          return {
            options: {
              templates: {
                name(h, row) {
                  return <a href='/users/id'>row.id</a>
                }
              }
            }
          }
        }
      }
    </script>
    

    If I return a simple string on the template it will be rendered, but if I use the jsx syntax I got the error

    jsx-transform 
    opened by cpgo 17
  • Bus is not listening to event?

    Bus is not listening to event?

    • Vue.js version: 2.0.1
    • consumed using: browserify
    • issue:

    Trying to convert date string to moment using server side tables. console.log('test') does not run, do I have to import. Checked the bus value and it appears the $children is an empty array so I'm guessing the bus is not linked to the table. How do you listen to the event properly?

    • relevant code: the html: <v-server-table url="/items" :columns="columns" :options="options" ref="listTable"></v-server-table>

    the js:

    import moment from 'moment'
    import bus from 'vue-tables-2/lib/bus'
    import ShowLink from './../../components/button/showlink.vue'
    import EditLink from './../../components/button/editlink.vue'
    import DeleteLink from './../../components/button/deletelink.vue'
    
    var tableColumns = ['name', 'stock', 'sku', 'price', 'created_at']
    var options = {
      pagination: {
        dropdown: true,
        chunk: 10
      },
      filterByColumn: true,
      dateColumns: ['created_at'],
      toMomentFormat: true,
      texts: {
        limit: 'Records: '
      },
      datepickerOptions: {
        showDropdowns: true
      },
      debounce: 1000,
      headings: {
        name: 'Nama',
        stock: 'Stok',
        sku: 'SKU',
        price: 'Harga',
        created_at: 'Tanggal',
        action: 'Actions'
      },
      templates: {
        action: function (h, row) {
          return <div class="btn-group">
            <show-link id={row.id} module="item"></show-link>
            <edit-link id={row.id} module="item"></edit-link>
            <delete-link id={row.id} module="item" table={this.$refs.listTable}></delete-link>
          </div>
        }
      },
      customFilters: [
        {
          name: 'formatDate',
          callback: function (row) {
            console.log(row.created_at)
            var value = row.created_at
            if (value == null) return ''
            var fmt = (typeof fmt === 'undefined') ? 'D MMM YYYY' : fmt
            return moment(value, 'YYYY-MM-DD').format(fmt)
          }
        }
      ]
    }
    
    export default {
      name: 'ItemList',
      data: function () {
        return {
          elink: '#',
          options: options,
          columns: tableColumns
        }
      },
      components: {
        ShowLink: ShowLink,
        EditLink: EditLink,
        DeleteLink: DeleteLink
      },
      mounted () {
        document.title = 'List Item - PT. Sukses Mandiri'
      },
      created () {
        this.$on('id-selected', function (e) {
          this.elink = '/item/edit/' + e
        })
    
        bus.$on('vue-tables.loaded', function () {
          console.log('test')
          bus.$emit('vue-tables.filter::formatDate')
        })
      }
    }
    
    
    daterangepicker enhancement question 
    opened by forddyce 16
  • Feature request: ServerTable - load page data and total records count separately

    Feature request: ServerTable - load page data and total records count separately

    Hi,

    it would be great to be able on ServerTable set page data and total count separately/subsequently. It speeds up showing page data. Very often users do not scroll to a pager, so the count is not so important as a data itself. It can be computed in a following request.

    Thx

    brainstorming feature request 
    opened by carrotinside 16
  • Fixing characters disappearing on typing in server table filter

    Fixing characters disappearing on typing in server table filter

    Resolves #521

    When using a server table if you entered a new query right after the debounce finished and the request was sent the letters would temporarily show up then disappear. I have useVuex set to false and can't confirm if this occurs when Vuex is used.

    search_bug (Note: I'm not hitting backspace or deleting those characters)

    I think what is happening is this.query is getting set somewhere and since the value property is set to be equal to _this.query it resets it to what it was when the query was sent.

    I'm not sure if there is a better way to solve this since I don't know the code base that well, but all the tests passed and I tried with both client and server tables and everything seemed to be working as normal.

    This is what happens now when you repeat what I did in the first GIF.

    search_bug_fixed

    Also, @matfish2 do I need to make a similar change in the lib/modules/normal-filter.js file?

    opened by DoubleB123 15
  • Stuck on loading with no errors

    Stuck on loading with no errors

    • Vue.js version: 2.5.16
    • consumed using: webpack
    • FULL error message (including stack trace): no error message
    • relevant code:

    In my view i have: <div id="coins"> <v-server-table url="http://localhost/api/coins" :columns="columns" :options="options"></v-server-table> </div>

    My data is:

    data: { columns: ['name'], options: { requestFunction: function(data) { return axios.get(this.url).catch(function (e) { this.dispatch('error', e); }.bind(this)); } } }

    Api returns:

    return \App\Coin::where('is_available', 1)->paginate();

    My response adapter:

    responseAdapter: function (resp) { return { data: resp.data.data, count: resp.data.total } }

    The table is showing that its loading but i get no errors.

    I have also copied the code from https://jsfiddle.net/matfish2/js4bmdbL/, and its doing the same thing

    opened by gergo2007 15
  • Initial multi column sorting

    Initial multi column sorting

    • Vue.js version: 2.5.21
    • Vue-tables-2 version: 1.4.70

    We are using the server-table with the possibility of sorting mulitple columns. Is there any option to set a default of multiple sorted columns ? Only initial sort by one column is working for us:

    options: {
      orderBy: {
        column: 'name',
        ascending: true
      }
    }
    
    Needs clarification 
    opened by Rickvanderwaal 14
  • Changelog

    Changelog

    Hi!

    Is it possible to add and maintain a CHANGELOG.md file or something like that (i.e. the release page, but up-to-date with details for every release), which describe the latest changes on every releases?

    It would be very useful for updating the dependencies of our projects that use vue-tables-2, making ourselves sure that we don't introduce some regression, and to guide us on possible changes to our code.

    Thanks by advance!

    opened by polosson 0
  • slot: filter__ does not work

    slot: filter__ does not work

    Hi everyone, I have custom filters, like:

    Inside "employees" I want to put a select component, like:

    In old versions, it worked successfully but, in this versión I can not set <select in filter.

    Is there a other way to build custom filter?? Thanks a lot

    needs reproduction 
    opened by alexsantm2019 1
  • Frame loss on scrolling when have stickyHeader on

    Frame loss on scrolling when have stickyHeader on

    • Vue.js version: 3
    • Consumed using: webpack
    • Vue tables version: 0.3.5

    Hi I'm trying to improve browser performance and noticed that when having stickyHeader set to true, there is a frame loss on scrolling down the table (100 rows per page in my test case).

    This is the scrolling performance when have stickyHeader turned off: vue-tables no-sticky

    And this is when it is turned on: vue-tables sticky-header

    Mostly caused by the implementation used in stickyHeader feature, probably not easily solveable without using a completely different solution.

    Many years ago I used https://mkoryak.github.io/floatThead/ to implement stick header together with vue-tables-2; it didn't have the frame loss but obviously it's a hacky solution since I have to opt to use jQuery.

    Would be great if we could find a different solution that's clean but doesn't suffer frame loss on scrolling.

    opened by vincent-lu 0
  • Slow browser performance with EditableCells

    Slow browser performance with EditableCells

    • Vue.js version: 3
    • consumed using: webpack
    • Vue-tables version: 0.3.4

    Hi I've implemented the EditableCells feature outlined here (https://matanya.gitbook.io/vue-tables-2/client-table/editable-cells), here is an example of such implementation:

    <template>
      <v-client-table
        :data="table.data"
        :columns="table.columns"
        :options="table.options"
        @input="(e) => (table.data = e)"
        @update="updateTable"
      >
        <template #title="{ row, update }">
          <input
            v-model="row.title"
            type="text"
            @update:modelValue="update"
          />
        </template>
      </v-client-table>
    </template>
    
    <script>
    import { reactive } from "vue";
    
    export default {
      const table = reactive({
        data: [
          {
            id: 1,
            name: "John",
            title: "Foo bar",
          },
    
           {
            id: 2,
            name: "Tom",
            title: "Hello world",
          },
        ],
        columns: ["id", "name", "title"],
        options: {
          editableColumns: ["title"],
        },
      });
    
      const updateTable = (data) => axios.put("/people", data); // simple example, actual code has debounce on this
    
      return {
        table,
        updateTable,
      };
    };
    </script>
    

    The above code works fine and send the PUT request to my API endpoint just fine.

    However when the table.data contains moderate to large amount of rows and columns (in my case, about 10 columns and 7000 rows). Typing in the <input type="text"> become very slow. To an extent this is normal since we have a large amount of event listeners.

    But if I swap out the EditableCells implementation from vue-tables with my own simple @update funtion on the <input type="text">, the browser performance becomes much more tolerable.

    This change includes:

    • Removes editableColumns: ["title"] from options
    • Change @update:modelValue="update" to @update:modelValue="() => myUpdate(row)"
    • Add myUpdate function:
    const myUpdate = (row) => axios.put("/people", row); // again, just example actual code does debounce on this
    

    So it seems the event chains implemented in vue-tables EditableCells is less performant.

    So is it possible to address this performance issue to make it at least as performant as the simpler implementation above? Or even better is there room to improve performance via some sort of Javascript event delegation, or Vuejs watch?

    Again thanks for your time.

    opened by vincent-lu 4
  • Incomplete template?

    Incomplete template?

    • Vue.js version: 2.6.12

    Hello matfish2,

    I had sent an email to you but perhaps you missed it.

    I am attempting to use the VtTableBody custom template and am having with the grouping as it is still listed as TODO. However, in the compiled js code there is grouping there.

    Thanks, Karman

    opened by karmanbadhesha 2
  • RangeError: Invalid array length

    RangeError: Invalid array length

    I have received an issue when I using v-client-table and try change data of table with length items less than current page activated. image

    opened by VDVT 2
Releases(v2.0.15)
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 7.3k Jun 13, 2021
The fastest open-source data table for web.

Cheetah Grid The fastest open-source data table for web. DEMO & Documents Downloading Cheetah Grid Using Cheetah Grid with a CDN <script src="https://

Future Corp 839 Jun 11, 2021
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 881 Jun 5, 2021
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 18 Jun 4, 2021
A flexible grid component for Vue.js

vue-grid A flexible grid component for Vue.js vue-grid is designed to be an advanced Vue.js grid component allowing for fast loading and rendering of

Dave Williams 113 Dec 7, 2020
A powerful flexbox grid system for Vue.js 2.x, built with inline-styles

vue-grid A powerful flexbox grid system for Vue.js 2.x, built with inline-styles Installation npm install @liqueflies/vue-grid --save # or yarn

Lorenzo Girardi 23 Mar 2, 2021
A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

Gao Qi(高琦) 693 Jun 13, 2021
FancyGrid - JavaScript grid library with charts integration and server communication.

FancyGrid Build v1.7.150 FancyGrid - JavaScript grid library with charts integration and server communication. Install bower bower install fancygrid

FancyGrid 175 Jun 13, 2021
Vue 3 data grid spreadsheet - Powerful data grid component built on top of RevoGrid.

Vue 3 data grid spreadsheet - Powerful data grid component built on top of RevoGrid.

Revolist 15 Jun 9, 2021
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.

Handsontable 15.3k Jun 13, 2021
Spreadsheet data grid component. Handles enormous data processing.

Powerful data grid component built on top of RevoGrid. Millions of cells and thousands columns easy and efficiently. Demo and API • Key Features • How

Revolist 62 Jun 4, 2021
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.

This is the official wrapper of Handsontable data grid for Vue. It provides data binding, data validation, filtering, sorting and more. Installation U

Handsontable 751 May 27, 2021
🍉 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 2.4k Jun 13, 2021
Vue.js 2 grid components

Vue 3 package is now available for subscribers The package is stored on the vue3 branch. Please see instructions here There are almost no breaking cha

Matanya 1.5k Jun 2, 2021