njleonzhang / vue-data-tables

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

Documentation

• Full Doc
• Online Demo for front-end pagination
• Online Demo for server-end pagination

Dev

• install dependencies

yarn install

• serve test/play with hot reload at localhost:8081

npm run dev

My projects related to Vue

• element-ui-pro Boilerplate for element-ui 2.0 management website, simulate ant design pro
• el-form-dialog A tool to make el-dialog and el-form work eaiser, especially for creating dialog to support two states, such as add and edit.
• babel-plugin-vue-jsx-sync jsx plugin for vue sync modifier
• docsify-demo-box-vue A plugin for docsify to write Vue demo with instant preview and jsfiddle integration

Buy me a coffee

vue-data-tables's Issues

Sorting error

If i want to short my table, i get this warning to the console:

[Vue warn]: You may have an infinite update loop in a component render function.
(found in component )

I checked your demo, and the 1st table do the same, the others don't.

@filter-change 筛选条件变化事件失效

Online reproduce

It is important to provide an online sample to reproduce the issue. Template for online reproducing

Context

provide more detailed introduction to the issue itself and why it is relevant

filter-method el-table-column

Hi ,

I use "filter-method" and "filters" attributes on "el-table-column" component with pagination on my table.
Can I filter on ALL rows ( all the pages) instead of rows on the current page ?

Indeed filter-method is called only for rows on the current page...

Thanks

console.log in innerPaginationDef in DataTables.vue

Not able to add any options

If I try to add any options to datatable. I get this error:
Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name.

This does not work. I get the above error:

<template>
    <data-tables :data='tableData',
                 :has-action-col='false'>

This works:

<template>
    <data-tables :data='tableData'>

Like I said I am not able to add any options at all.

Thanks for this excellent component.

有提供修改default值的接口么？

support server side?

I base on Meteor.
I have problem with a big data that I get from Mongo.
Support server side or a big data?

Support Element UI Tables component attributes

I just want to use row status class via :row-class-name attribute but it's not supported in on <data-tables> element but works with <el-table>.

So, I think there is no supported <el-table> attributes at all.

Could I use `transition` when insert/update/remove row?

Could I use transition when insert/update/remove row?

Problem searching on every column

Hello!

I installed your module and I'm using it on vue2. I was able to add the table and fill it with data, but I can't seem to make the search work. In the documentation says that the default value of props is All which I assume means it searches on every column? If that's the case, it's not working for me.

I tried passing an array with my column props but it's not working either. Right now I have

<data-tables
	:data='table.rows'
	:search-def='{ placeholder: "Search..." }'
	action-col-width='50'
	action-col-label='Actions'>

	<el-table-column 
		v-for="column in table.columns" 
		:prop="column.id"
		:label="column.label"
		:sortable="column.sortable || true">
	</el-table-column>
</data-tables>

And my table object looks like this:

{
	columns: [
		{
			id: 'name',
			label: 'Brand name'
		},
		{
			id: 'modules',
			label: 'Active modules',
			sortable: false
		},
		{
			id: 'employees',
			label: 'Employees'
		}
	],
	rows: [
		{
			id: 1,
			name: 'Starbucks',
			modules: '[2,3,4]',
			employees: 20
		},
		{
			id: 2,
			name: 'Reebook',
			modules: '[1]',
			employees: 5
		},
		{
			id: 3,
			name: 'Havanna',
			modules: '[2,3]',
			employees: 100
		}
	]
}

But when I search, nothing happens and nothing gets filtered. No error on console either :(
Thanks for your time and hope you can help me out here!

Remote filtering and searching

Hi,

How to do server side processing for search and filtering?

Problem with `Meteor + Vue-Meteor`.

I base on Meteor + Vue-Meteor.
Get warning

"!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-739f43f1!../../node_modules/sass-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./DataTables.vue"
in /Users/theara/Desktop/meteor-app/vue-element/node_modules/vue-data-tables/dist/data-tables.js (web.browser)

"!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-5ef578ba!../../node_modules/sass-loader/index.js!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./ScCheckboxGroup.vue"
in /Users/theara/Desktop/meteor-app/vue-element/node_modules/vue-data-tables/dist/data-tables.js (web.browser)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save !!..

=> Started your app.

=> App running at: http://localhost:3000/

But it work fine

Events for pagination

Is there a way to trigger the pagination event current-change?
Thanks

could you detail how to use attr of `<el-table-column>`?

Please detail how to use attr of <el-table-column> such as prop, label, sortable.....
Or check on Element UI???

Table row hover - CSS issue

On every 2nd row hover, the background didn't change, because the default color's css selector is stronger.

This will override:
.el-table--striped .el-table__body tr:nth-child(2n) td { background: #FAFAFA; }

this:
.el-table--enable-row-hover tr:hover>td { background-color: #eef1f6; }

Possible solution:
.el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #eef1f6; }

Is there a way to make the search NOT case sensitive?

Is there a way to make the search NOT case sensitive?

没有监听selection-change事件

表格可以添加多选列，但是没有监听selection-change事件，这样如果要获取多选的结果就没办法了

建议支持自定义actions按钮type属性

建议actions(which belongs to table)按钮支持el-button的type属性，而不是默认不可修改的type='primary'
just like row-actions(which belongs to row)

How to set to English?

How to display the picture

How to display the picture？ Thank you

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?

Could search with `format date field`?

Could search with format date field?

sort-method is not call

I had el-table-column with sort-method works fine in el-table,
after moved into data-tables it's not called.

checkbox-filter-def: 来定义选择过滤的控件

这个控件，是否存在一个bug？
例子中是写死的，如果我要异步拉取选项会怎样？
通过试验，写死的可以出现这个控件，但是异步之后没有任何显示
问题原因：checkbox-filter-def属性的变化没有让组件更新，这个属性的逻辑处理是否写在mounted钩子里？
如果是，这可能是问题出现的原因，可以使用深度的watch的再次执行该属性的逻辑

Actions column to be fixed

Please make it possible to fix the action column with the Elements UI fixed prop.

Have any plan for sever side data?

Have any plan for sever data?

Optionally disable pagination

Hi, thanks for the awesome component!

I would like to disable pagination in some cases. I would really like to have something like has-pagination property.

Would you mind a PR from me with this feature?

Could example to use `dropdown list` in `row-action-def`?

I would like to use dropdown list in row-action-def

Please example

请求添加报表导出为pdf和excel的功能

`<el-table-column>`width属性

不知道大佬发现没有，<el-table-column>width属性有BUG，无论设置什么值，都会变的很大，不知道是不是我使用的方式不对？

你好，请问怎么设置固定表头height？

Chinese language showing on my table

I have successfully render my table but there are chinese characters on it. Please how can I remove them

Context

This is occurring at the level of pagination

在el-table-column 中使用 :formatter='dateFormater' 的问题

我在el-table-column 中用了

:formatter='dateFormater'

去转换时间的显示格式，
我发现search box会用el-table-column内prop的值(e.g. 2017-07-14T09:17:18.824Z) 作为搜索条件， 而不是用转换後的值(e.g. 2017-07-14 05:17 PM )
请问这个问题可以怎样解决？

谢谢？

define the actions for every row

If I don't need to operate, how can I cancel the last column

Custom col template

How can I modify the output of data in a column?

Example 1: I'm getting a url from the API and I would like make it a full working link:
<a href="url from api">something</a>

Example 2: I receive the first name and last name as seperate values. I would like to join them to first name + last name and display them in one column

unable to figure out how to do a v-if on each table row

Sorry putting this in issues. Didn't find where to ask for this help.
I'm using lib on my project a couldn't figure how to do something.
Please how do a v-if so it will show a row on depending a condition. I have look a your get start but couldn't find a solution. please can you just give a link jsfiddle.
Thanks. close this only if you have a solution to it.

Why not default filters function to format?

There is a way to use default filters function to format table contents? The ":formatter" function is not a goog way for many cases.

Sort by default

Can I use the element's "default-sort" property in a data-tables?

服务端分页如何设置总条数和获取当前页号，当前每页数呢

服务端分页如何设置总条数和获取当前页号，当前每页数呢

如何获得所选单元格?限定操作按钮的显示,点击"添加"后在最后一列

感谢你的贡献，data-tables很美观，目前看起来也很好用。
我在使用中遇到点问题，希望能帮我解答下
如题
1、我想在点击某单元格时能通过触发方法,获取该单元格内容,或者说将该单元格修改为input 状态,该如何办到?
2、在某些情况下，我并不想action-col内的按钮显示，我该如何操作？
3、点击某个按钮之后，能否在table最下方或者最上方添加一行均为input 单元格的内容列？

Data Table doesn't refresh after update

Hi guy,

First , thanks for your work , it is very good.
I have one problem with data table when I update a row in the table.

My "data table" is a getter object in vuex and when I use the mutation "UPDATE_TABLE" to update one row in the data table object , the table render does not take into account the update.
I checked my data Table and it is well updated.

After update, Curiously , when I click on filters on my table, the table render take into account the update.

Can you see this ?

Thank you.

建议增加 row-key设置

http://element.eleme.io/#/zh-CN/component/table

row-key

个别属性为何不使用计算属性

在使用中遇到一些问题，由于我有一些数据也是动态算出来的，请问一下比如 innerCheckboxFilterDef 这个属性为什么不改用计算属性，而在created 的时候就定义好？

`row-action-def` should be a function

I want to set different actions to different rows based on the data in the row.
But right now it seems impossible to me.

Any ideas on how to achieve that?

Search placeholder

Please, make it possible to pass a placeholder to the search input item. Something like this for example:

      getSearchDef() {
        return {
          offset: 12,
          placeholder: 'my placeholder text',
          props: ['title', 'author'], // can be string or Array
        };
      },

Set total count of tableData

Hello, how can I set ":total" value for pagination. In the src pagination total is computed value, but is there any way to change it?

thx =)

建议能设置操作按钮type属性

1. 建议能够设置el-button内的type属性,而不是单一的只有text类型
2. 建议能设置"操作"列的fixed属性,实际操作中"操作"列应该第一眼给用户看到

请问怎么自定义下拉菜单过滤器

请问有没有例子或者详细一点的文档介绍自定义过滤器，我想定义两个下拉菜单过滤器 请问该怎么写，急需，麻烦解答一下，谢谢

筛选能加个下拉吗？自己加了个时间筛选

如题，自己加了个时间筛选成功了，下拉没加出效果，尴尬，第一次用

支持远程筛选吗

比如，从别的地方，传过来一个 {value:'未解决'}，我想将value这个字段，作为表格的筛选条件，有接口可以调用吗？ 麻烦啦