A simple, customizable and pageable table with SSR support, based on vue2 and element-ui

Overview

Build Status Coverage Status Node badgesize download

Documentation

Dev

  • install dependencies
yarn install
  • serve test/play with hot reload at localhost:8081
npm run dev

My projects related to Vue

Buy me a coffee

Comments
  • Custom Table Column cannot be searched and sorted

    Custom Table Column cannot be searched and sorted

    Please follow the issue template, or your issue may be closed automatically.

    For bug report, provide the following section

    Online reproduce

    <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.prop" sortable></el-table-column> <el-table-column label="Due Date" sortable> <template slot-scope="scope" :prop="scope.row.due_date"> <h5>{{scope.row.due_date | dateName }}</h5> </template> </el-table-column>

    I'm using "vue-data-tables": "^3.2.0" & vuejs 2 @njleonzhang

    Expected Behavior

    I hope custom column can be searched & sorted

    Current Behavior

    The custom column cannot be sorted & searched

    Steps to Reproduce

    Detailed Description

    For feature request, provide the following section

    Motivation / Use Case

    Expected Behavior

    Other Information

    opened by icangku 15
  • Can't import vue-data-tables source code

    Can't import vue-data-tables source code

    Detailed Description

    I can't compile the code with webpack when I follow guide from here.

    My webpack.config.js

    const PATH_TO_SRC = path.resolve(__dirname, 'src')
    
    module.exports = {
      // ...
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            include: [
              PATH_TO_SRC,
              path.resolve(PATH_TO_NODE_MODULES, 'vue-data-tables'),
            ],
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: PATH_TO_SRC,
            exclude: file => (
              /node_modules/.test(file) &&
                (!/\.vue\.js/.test(file) &&
                  !/vue-data-tables\/src\/mixins\/ShareMixin\.js/.test(file))
            ),
          },
          // ...
        ],
      },
    }
    

    My .babelrc:

    {
      "presets": ["@vue/babel-preset-app"],
      "plugins": [
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-object-rest-spread",
        "babel-plugin-lodash",
        "babel-plugin-vue-jsx-sync",
        "babel-plugin-jsx-v-model"
      ],
      "env": {
        "test": {
          "plugins": [
            ["babel-plugin-root-import", {
              "rootPathPrefix": "@",
              "rootPathSuffix": "src"
            }]
          ]
        }
      }
    }
    
    

    The error:

    ERROR in ./node_modules/vue-data-tables/src/mixins/ShareMixin.js 53:12
    Module parse failed: Unexpected token (53:12)
    You may need an appropriate loader to handle this file type.
    |         this.toolBarShow
    |           ? (
    >             <div class='tool'>
    |               {
    |                 this.$slots['tool']
     @ ./node_modules/vue-data-tables/src/components/DataTables.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-data-tables/src/components/DataTables.vue?vue&type=script&lang=js&) 7:0-45 14:11-21
     @ ./node_modules/vue-data-tables/src/components/DataTables.vue?vue&type=script&lang=js&
     @ ./node_modules/vue-data-tables/src/components/DataTables.vue
     @ ./node_modules/vue-data-tables/src/index.js
     @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/ClientProfile/RelationshipsTab/RelationshipsTab.vue?vue&type=script&lang=js&
    

    Modules:

    {
      "element-ui": "^2.4.9",
      "vue-data-tables": "^3.4.4",
      "vue-loader": "^15.4.2",
      "webpack": "^4.21.0"
    }
    

    @njleonzhang what did I wrong?

    opened by isnifer 11
  • problem of using display:flex

    problem of using display:flex

    I convert it in a translation site and ask you a question.

    A column continues lengthening aside when I display a table by the following constitution and is pushed outside a screen.


    [email protected] element-ui @ 2.0.4


    // without width, go expand
    -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    It does not occur when I set width in all cols.

    It is in element from [email protected]* Behavior in [parent display:flex][child width: 100%] seemed to be changed; [child flex: 1]It is likely that it is necessary to change of it. It can reappear by setting el-carousel beside el-table aside.


    -- - - - - - - - - - - - - - - - - - - - - - - -

    Because It is not the environment that I can compile, I cannot try it, but probably the correction of the template is necessary


    index.pug el-table( ... style='width: 100% ') ← Cause?


    Please examine It.

    pending on 3nd-party need more info stale 
    opened by TAKA-KII 11
  • Multi Sort

    Multi Sort

    Can we enable many sorts ( at the top columns ( arrows ) ) on the same time ? ( i think no : https://njleonzhang.github.io/vue-data-tables/#/sort ) => tableProps.defaultSort indicate default sort column and order

    I create an application where the multisort will be a good feature I connected alasql with your table and i reproduce all statements of sql with an ui widget ( ORDER BY too )

    Feature Request pending on 3nd-party stale 
    opened by leiha 11
  • JSBin

    JSBin

    Hi @njleonzhang

    I have a problem with vue-data-tables. To demonstrate my issue I wanted to create a JS Bin. Did I do something wrong or isn't it possible to use vue-data-tables without module bundler?

    opened by strebl 11
  • Server pagination: currentPage can't be set as starting page

    Server pagination: currentPage can't be set as starting page

    When setting paginationDef.currentPage on data-tables-server, if I've selected a value greater than 1, it is not honoured in the pagination. It appears to work with normal data-tables.

    See this fiddle: https://jsfiddle.net/v0youfw5/

    Thanks

    bug 
    opened by lochstar 10
  • Search in nested data does not work

    Search in nested data does not work

    Hello!

    Unofrtunately JSFiddle crashed every time I tried to reproduce the issue, but the point is:

    In your table data you have a nested Array, for example : image

    You try to render the data somehow like this: image

    And you try to search in the nested data attribute's value.

    Unfortunately it does not work. Probably I have messed up something, could you please clarify? Thank you very much in advance!

    opened by krean93 9
  • Unable to build vue-data-tables with require or import using Webpack; Element UI works fine

    Unable to build vue-data-tables with require or import using Webpack; Element UI works fine

    Using Webpack, which has properly built Vue and Element UI using both import and require. Running into issues with vue-data-tables, however.

    When using the following:

    import DataTables from 'vue-data-tables'
    Vue.use(DataTables)
    

    I get the error:

    vue.js:4400 
    Uncaught TypeError: Cannot read property 'install' of undefined
        at Function.Vue.use (vue.js:4400)
        at Object._typeof2 (main.js:16)
        at __webpack_require__ (bootstrap 21bdc8c1cd5b778aa7a2:19)
        at _typeof (bootstrap 21bdc8c1cd5b778aa7a2:65)
        at bootstrap 21bdc8c1cd5b778aa7a2:65
    

    From vue.js, here're lines 4388 through 4408 (line 4400 marked with =>):

    /*  */
    
    function initUse (Vue) {
      Vue.use = function (plugin) {
        var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
        if (installedPlugins.indexOf(plugin) > -1) {
          return this
        }
    
        // additional parameters
        var args = toArray(arguments, 1);
        args.unshift(this);
    =>if (typeof plugin.install === 'function') {
          plugin.install.apply(plugin, args);
        } else if (typeof plugin === 'function') {
          plugin.apply(null, args);
        }
        installedPlugins.push(plugin);
        return this
      };
    }
    

    If I change it to:

    const DataTables = require('vue-data-tables');
    Vue.use(DataTables);
    

    I get:

    Unknown custom element: <data-tables> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <Anonymous>
           <Root>
    

    So if I then declare the named component:

    const DataTables = require('vue-data-tables');
    Vue.use(DataTables);
    Vue.component('data-tables', DataTables);
    

    The console error is now:

    Failed to mount component: template or render function not defined.
    
    found in
    
    ---> <DataTables>
           <Anonymous>
             <Root>
    

    Please advise. I'd like to take advantage of the functionality and work you've done, but I simply can't get it to work. Thank you.

    opened by tylertyssedal 9
  • Search action does not fire any events

    Search action does not fire any events

    It is stated in the docs:

    filtered-data trigger when any filter change(search box, checkbox, sort or customFilters), and pass filted data out.

    But actually fires only here: https://github.com/njleonzhang/vue-data-tables/blob/f98b32d4c0a97ca6c072cfd6b524c4fb941058de/src/components/DataTables.vue#L45

    Any ideas on how to fix that?

    Feature Request 
    opened by sobolevn 9
  • Vue warn Computed property

    Vue warn Computed property "validateState" was assigned to but it has no setter

    Online reproduce

    Current Behavior

    [Vue warn]: Computed property "validateState" was assigned to but it has no setter.

    found in

    ---> <ElInput> at packages/input/src/input.vue
           <Jumper>
             <ElPagination>
               <DataTablesServer>
                 <BColxx> at components/common/Colxx.vue
                   <WalletView> at pages/wallet/index.vue
                     <App> at layouts/app.vue
                       <Root>
    

    Steps to Reproduce

              <data-tables-server>
    
              </data-tables-server>
    

    Detailed Description

    I get the warning all the time even in the code given above.

    Other Information

    element-ui 2.5.4 vue-data-tables 3.4.4

    I am using nuxt and marked them ssr false

    {src: '~plugins/element-ui', ssr: false}, {src: '~plugins/vue-data-tables', ssr: false},

    opened by zek 8
  • IE11 - Object doesn't support property or method 'includes'

    IE11 - Object doesn't support property or method 'includes'

    Expected Behavior

    That works on IE11

    Current Behavior

    Not works

    Steps to Reproduce

    Test with IE11

    Detailed Description

    Object doesn't support property or method 'includes', this error appears on IE11 || <, any idea?

    For feature request, provide the following section

    Motivation / Use Case

    Expected Behavior

    Other Information

    opened by iparrabb 8
  • 官方文档打不开了

    官方文档打不开了

    opened by yaowenqiang 0
  • Bump terser from 4.4.0 to 4.8.1

    Bump terser from 4.4.0 to 4.8.1

    Bumps terser from 4.4.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (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 eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • 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
  • 「彻底解放双手」的建议

    「彻底解放双手」的建议

    Please follow the issue template, or your issue may be closed automatically.

    For bug report, provide the following section

    Online reproduce

    感谢作者的 vue-data-tablesel-form-dialog,我的管理后台项目中大量使用了它们,真心舒服~省了很多代码(先舔一波😂)

    不过我觉得这些加起来还是没有彻底解放双手,有个痛点没解决: 平时我们使用的 element table 时候往往是这样写的

        <el-table-column
          label="日期"
          width="180">
          <template scope="scope">
            <el-icon name="time"></el-icon>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag>{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    

    各种 el-table-columntemplate scope="scope 神烦,大量重复冗余不利于维护,而且还不能复用。。

    于是在发现了 Egrid,解决了这个痛点

    Egrid 的源码实现很简单,然后我突发奇想能不能实现 egrid + vue-data-tables 一起使用,结果改了两行 Egrid 的源码后二者完美一起使用(暂未发现 BUG),卧槽,这次真的要解放双手了

    所以建议大家 egrid + vue-data-tables 一起组合使用~或者发起 PR 把 egrid 内置到 vue-data-tables 中

    Expected Behavior

    Current Behavior

    Steps to Reproduce

    Detailed Description

    For feature request, provide the following section

    Motivation / Use Case

    Expected Behavior

    Other Information

    pinned 
    opened by zaxlct 6
  • How to save selection between pages?

    How to save selection between pages?

    Online reproduce

    First table on: https://www.njleonzhang.com/vue-data-tables/#/en-us/event

    Expected Behavior

    Selected rows do not deselectes when page changes

    Current Behavior

    Selection losts when page changed

    Steps to Reproduce

    1. select some rows in table
    2. go to page 2
    3. return to page 1

    Detailed Description

    Simply select some rows in your first sample table, then go to page 2, then return to page 1 - voila! - previously selected rows are not selected now. How to save selection between pages?

    Feature Request pinned 
    opened by moabtools 6
Releases(2.0.2)
Owner
Leon Zhang
FED Architect @美篇        Former C++ engineer @citrix & @trendmicro
Leon Zhang
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
Let element-ui el-table support sortable.js

Let element-ui el-table support sortable.js

Edward Mizuka 79 Nov 13, 2022
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 198 Nov 21, 2022
BeeGridTable , is a Highly Customizable Table UI component library based on Vue.js. Rich functions、More efficient、Easy to use!

BeeGridTable (中文) Description BeeGridTable , is a Highly Customizable Table UI component library based on Vue.js. Rich functions、More efficient、Easy t

刘佳恒 45 Oct 31, 2022
Arne De Smedt 120 Oct 13, 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
Customizable Vue Table Component

prot-table Description A customizable table component in vue. Intended to be used as a web-component or as a component in vue projects. demo jsfiddle

Protronic GmbH 4 Feb 14, 2020
vue table component of vue2

vue-virtual-table Vue table component with virtual dom and easy api. Keep smooth when the data reachs thousands of rows or even more. Easy to use with

Jack Woods 93 Nov 24, 2022
🐶 Combines Form, Table and Pagination components of Element UI together.

Element search table pagination Combines Form, Table and Pagination components of Element UI together. Based on Vue 2.x. You can use this package to s

Zollero 296 Nov 15, 2022
Sticky for element-ui table

element-ui-sticky-table Installation yarn add element-ui-sticky-table import Vue from "vue"; import StickyTable from "element-ui-sticky-table"; // g

Ernest 10 Jul 22, 2022
Simple table view for Speckle data based on Vue.

Simple table view for Speckle data based on Vue.

Speckle 11 Sep 15, 2022
Customize ellipsis-like support for Vue2

vue-ellipsis Customize ellipsis-like support for Vue2. Samples: https://hyjiacan.github.io/vue-ellipsis/ Install yarn add @hyjiacan/vue-ellipsis or np

hyjiacan 15 Jun 10, 2022
Advanced table based on Vue 2 and Bootstrap 4 ⚡️

1. vue-bootstrap4-table Advanced table based on Vue 2 and Bootstrap 4 Quick Demo in Codepen. Docs in gitbook. 2. Features Multi column filtering (Opti

Rubanraj 219 Oct 3, 2022
Combines Table and Pagination components of iview UI together. Based on Vue 2.x.

Combines Table and Page components of iview UI together. Based on Vue 2.x.

null 8 Nov 24, 2022
Vue json based table with bootstrap3

vue-tmx Vue json based table with bootstrap3 Live Demo very easy to use, ready out of the box filters checkbox aggregations like sum, avg, min, max pa

Marco Tomic 13 Dec 28, 2020
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 185 Nov 16, 2022
A very simple table component for vue3

A very simple table component for vue3

Lin Masahiro 149 Nov 25, 2022
A Simple Scheduling Table Built Using Vue

A Simple Scheduling Table Built Using Vue

Shuaihua Chen 15 Nov 10, 2022
Lightweight and flexible table component for the web :zap:

Teible Lightweight and flexible table component for the web. No more hassle writing columns outside the template or customizing render template. Packa

Hiển Đào Vinh 57 Sep 20, 2022