onewaytech/vue2-datatable

(DEPRECATED) The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it!

vue2-datatable-component

The best Datatable for Vue.js 2.x which never sucks
npm i -S vue2-datatable-component

Documentation | Online examples

vue2-datatable's Issues

HeaderSetting needs Jquery?

Hi , I tried the basic example but "Setting" button in top right corner is not working fine. I checked the source, it seems using jquery. I didn't try to import jquery in my project so I am not sure if it is jquery required.
e.g. line 90 : https://github.com/OneWayTech/vue2-datatable/blob/master/lib/HeaderSettings/index.vue

Component Render Issue

Wanted to add this component to a existing project, followed the instructions and nothing is showing as well as no errors in the console.

<datatable /> is replaced with <!--function (e,n,r,o){return re(t,e,n,r,o,!0)}-->

If i add import Datatable from '../../../node_modules/vue2-datatable-component/lib/index.vue' where i want to use this component it start to work. In an other test project i can use <datatable /> globally without to import it.

固定header或列时设计改进建议

1. 滚动时多滚动条问题

刚在看index.vue中SCROLLBAR_WIDTH变量时了解你的组件隐藏滚动条是通过margin负值实现的，但由于我的Mac中将滚动条显示设置为“滚动时”，

这让margin+overflow:hidden起不到作用，如下截图，效果上不如意噢。

设计上将TableHeaderWrapper、TableFooterWrapper设置为overflow:hidden;为佳，其它的一小调整也不多。

2. 左右滚动浮动列会显示抖动问题

这是由于你实现固定使用的是position: absolute;，建议修改成相对限宽后的容器做定位，这样创建出来后就无需修改了。

not compatible with VueI18n

when I use both kazupon/vue-i18n and vue2-datatable. It got conflict and shown Error in render function: "TypeError: _vm.$i18n is not a function".
I rename $i18n -> $i18n2 in index.js and index.vue in vue2-datatable, it is working fine.

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Table

I followed the guide and success, but my console have this warning.

On row click event

Is there a way to listen to row click events? I need to change selection prop upon clicking on any row of the table.

Custom field function?

Hi,

Is there a way to designate a function for a field so that custom formatting can be applied to the rendered cell?

As an example, say a I have separate columns for firstName and lastName and I want to display in a single column as the full name. Something like:

 fullname: function ( data, type, row ) {
     return data +'  '+ row[3];
 }

Thanks!

Lower library dependencies on global libraries.

I think it's a bit overwhelming that this library depends on having jquery (as a global) and the bootstrap scripts.
As far as I see the scripts part look like they could be easily replaced in native vue code.

My current projects use parts of the bootstrap library (loaded as needed per component) no jquery so I might try a to fork this project and remove those dependencies. Let me know if you would be interested in this developments

how to reposition the elements in vue2-datatable

Here is a screenshot of the table i hope to achieve. using vue2-datatable as a requirement all tables must be presented exactly the same way. this used datatable.net but unfortunately vue doesn't play well with it. so i discovered your system and now, i want to achieve this look.. but not seeing slots where i can include the elements without having to rewrite the index of this datatable component. which seems like a rather messy approach to me..

How is this expected to be handled. thanks

Question about relationship object data

Hi, my query data result has another relationship data as below:

{
  id,
  username,
  password,
  profile {
     first_name,
     last_name
  }
}

I tried to as below but not working

{ title: 'First Name', field: 'profile.first_name', sortable: true },

Please advise. Thanks.

detect-scrollbar-width problems

I'm attempting to use this component but I'm getting the following error once I add import the module.

Cannot read property 'appendChild' of null

// Refers to https://davidwalsh.name/detect-scrollbar-width
const div = document.createElement('div')

div.style.width = '100px'
div.style.height = '100px'
div.style.overflow = 'scroll'
div.style.position = 'absolute'
div.style.top = '-9999px'

document.body.appendChild(div) /* <---- ERROR IS THIS LINE */

const SCROLLBAR_WIDTH = div.offsetWidth - div.clientWidth

My guess is that this is running before document has loaded or body doesn't exist at this stage? But why should it exist at the point of import?

I'm using this with default Rails 5.1 + Vue/webpacker setup.

Branch without Local Storage?

Local storage is required to use vue2-datatables?
I think is a good idea to have a version without local storage for server rendered projects

When importing Datatable, Unexpected Token Error?

Following the docs, off the bat when I import it I get:

node_modules/vue2-datatable-component/lib/index.vue:1

^
ParseError: Unexpected token

?

Mapping extra properties to tdComp's

We need to write simple datatable wrapper components like the one below in order to supply them as tdComp values:

<template>
    <user :username="value"></user>
</template>
<script>
    import User from '../../User.vue';

    export default {
        props: ['value'],
        components: {
            User
        }
    }
</script>

If only some there was a mechanism like defining a property mapping to the tdComp, maybe something like:

{title: 'User', field: 'creatorUserName', tdComp:'User', propertyMap: {'username': value}}

Or I am just missing an easier approach.

Syntax error: Unexpected token

I have just installed the package by yarn
yarn add vue2-datatable-component --dev

In my entry point

import Datatable from 'vue2-datatable-component'
Vue.use(Datatable);

After yarn run dev
It gives me this

import Datatable from '../../'

不好意思，在新学vue，这块确实没看懂

Search boxes in the demos are broken

Instead of the search box, I only see:
query: { "limit": 10, "offset": 0, "sort": "", "order": "" }

Documentation and Examples not working

neither the documentation nor the examples are working. Where to find a basic documentation on the usage of vue2-datatable?

你这个排序查询分页是不是要自己写的？另外固定列的宽度有问题

排序分页翻页都是需要自己实现的？

固定列的宽度没考虑固定的列宽度太宽把其他列遮住的情况

Add tdComp: blank

Hi. I'm having trouble composing tdComp. The element I created is not showing. Is there something missing?
Code https://pastebin.com/WTu9ege4

Feature request - multiple column sorting

Hi, thank you for your awsome work!
I would be nice to hve multiple column sorting possibility incliude query using ctrl / shift + column select.
Thank you!

Custom row

how to add custom row for the data?
thanks

Installation Issue

How can i require them in my app.js file?

Can't seem to require this component, doesn't seem to have Datatable.vue main file component?

Pagination not reducing table content

I'm unable to get pagination working. the docs don't explain much to my understanding.
I have datatables loaded as per documentation. using the advanced code example.
Now footer appears to have pagination displayed and it responds to page select. However, the data on the table does not. I have 31 rows on the table, after switching page select to 5, table doesn't get limited to 5 rows.

i'm using Vue 2.5.3
vue2-datatable 2.1.18

Highlighting Selected Rows from Selection

Hi @kenberkeley,

Is there a way to configure this datatable to highlight the selected row whenever the checkbox for selection is checked?

BTW, I'm really delighted to find this datatable. Thank you so much for creating this! :)

Can you pls guide us.. how can I run this... Step by step procedure

Can you please guide us.. how can I run this, what are the prerequisite for this code to run like... npm install xyz etc...

Nested Table

Hi! Is there a way that nested table can only be shown one at a time across the table? Thank you much. Your datatable is awesome btw.

Unexpected token: name (scrollWidth)

I'm having an error when building nuxtjs applications
npm run build

Output:
ERROR in common.a99f74b351f8a391ae27.js from UglifyJs
Unexpected token: name (scrollWidth) [./node_modules/vue2-datatable-component/src/utils/getScrollWidth.js:2,0][common.a99f74b351f8a391ae27.js:10963,4]

If you do not use UglifyJs, then everything is successful.

How can this problem be solved?

Complication Issues

Hey Thanks for such great plugin.

But when I load dependency with NPM and tried to install but getting below error.
https://www.screencast.com/t/EoaolScJs8A

Can you please help me on this.

vue build无法使用

使用npm run build:lib时提示vue-cli中去除了build功能，需要使用Poi工具，

但我在使用Poi工具构建时(poi build --config build/lib.js --prod)提示编译错误，看不到具体的错误信息

Conflict: Multiple assets emit to the same filename min.js

vue-cli V2.9.1

Search on each column

how can we search based on column
not search all

Is there a way to let the user resize column width?

Thanks!

replace-with 404

Hi, in your docs you say that "replace-with" is a requirement, but the url results in a 404 error.

请问你的组件思路？

最近需要写表单组件，想问问您写的思路是什么？

Error in mounted hook: "ReferenceError: $ is not defined"

I first ran into issue #30 and fixed it now I am have this error.
Error in mounted hook: "ReferenceError: $ is not defined"

My html look like

    <div v-if="showTable">
      <code>query: {{ dataTable.query }}</code>
      <datatable
        v-bind="dataTable"/>
    </div>

my data is

      dataTable: {
        data: [],
        query: {},
        total: 10,
        columns: [
          { title: 'Name', field: 'name', sortable: true },
          { title: 'Length', field: 'len', sortable: true },
          { title: 'Access', field: 'access', sortable: true },
          { title: 'Bit Rate', field: 'bit_rate', sortable: true },
          { title: 'Duration', field: 'duration', sortable: true },
          { title: 'Size', field: 'width' }
        ]
      }

I send a RPC request for data and display the result

    clk_b (evt) {
      this.sendRpc('say_bye', [42, 23], (full) => {
        let data = JSON.parse(full.result)
        console.log('Bye', data)
        this.showTable = true
        this.dataTable.data = data
      })
    },

the picture is

found in

---> at node_modules/vue2-datatable-component/src/HeaderSettings/index.vue
at node_modules/vue2-datatable-component/src/index.vue
at src/components/HelloWorld.vue
at src/App.vue

tdComp of a table inside a nested component is not loading

I have used two datatable. From the Parent table I use the nested component. Inside the nested component is another datatable with column using tdComp. For some reasons, I can't load the content of the column of the inner datatable. I have checked the Vue console, the dynamic component for the tdcomp table is not included to the tree.

Error in render: "TypeError: _vm.$i18nForDatatable is not a function"

It seems that $i18nForDatatable is not defined.

How to Implement This with Laravel

Thanks for such great plugin.

My query is how can i we implement this with Laravel latest version. and I want my all data on pagination using Ajax call and Also each filter should be work with Ajax call.

Can you please help me how can I use this great plugin with Laravel + Ajax.
Thanks in Advance.

how to change to elementui

hi,
this datatable is great, but how to change to elementui?

Tried using fix headers and columns

Hi! Just tried the fix column to display fix column and some dynamic scrollable columns next to it and so I set the columns that are fixed to 'fixed: true'. The column duplicates when i set it to fixed.

Here is my code on my table:

  fixHeaderAndSetBodyMaxHeight: 200,
  tblStyle: 'table-layout: fixed',
  tblClass: 'table-bordered',
  columns: [
    {
      title: 'Item Code',
      field: 'itemCode',
      thComp: 'FilterTh',
      sort: true,
      fixed: true
    },
    {
      title: 'Item Name',
      field: 'itemName',
      sort: true,
      fixed: true
    },
    {
      title: 'UOM',
      field: 'uom',
      sort: true,
      fixed: true
    }
  ],
  data: [],
  total: 0,
  selection: [],
  query: {},
  fieldCols: ['itemCode', 'itemName', 'uom']

Thank you so much. Hope you can help me with this :)

Pagination

Hi! I have problem on pagination. My scenario is I put input text on tdComp then fillup it until row 10, then on the page 2, the whole row copies the value of page 1 and vice versa. My code on the tdComp is here.

<template>
  <div>
    <input name="quantity" type="number" class="form-control quantity" min="1" v-model="quantity" @keyup="onFieldEdit()" step="0.01">
  </div>
</template>

<script>
import { EventBus } from '../../../eventbus.js'

export default {
  props: ['row', 'key'],

  data () {
    return {
      quantity: 1
    }
  },

  mounted () {
    EventBus.$emit('onCompositionValueChange', [this.row['key'], this.quantity])
  },

  methods: {
    onFieldEdit () {
      EventBus.$emit('onCompositionValueChange', [this.row['key'], this.quantity])
    }
  }
}
</script>

Advance example: Create time+ more items

steps to reproduce:

1. go https://onewaytech.github.io/vue2-datatable/examples/dist/#advanced
2. select another create time ... e.g. "Year"
3. show more items per page
   now "Create time" shows mixed formatting.

I think this is only a bug in example not in component itself?

Clickable table?

Is it possible to make a link from text?

is any searchable function？

please add Fuzzy search function ，I very need it

ES6 有問題

vue2-datatable/examples/src/Advanced/comps/

這些組件在 index.js 裡 require 時要加 .default, 因為ES6 的 babel 修正了這種用法.

如下:

export default {
DisplayRow: require('./nested-DisplayRow').default,
Color: require('./td-Color').default,
CreatetimeTd: require('./td-Createtime').default,
CreatetimeTh: require('./th-Createtime').default,
Email: require('./td-Email').default,
IP: require('./td-IP').default,
Opt: require('./td-Opt').default,
FilterTh: require('./th-Filter').default
// [Vue warn]: Do not use built-in or reserved HTML elements as component id: Filter
// Filter: require('./th-Filter')
}

nothing search

I can't add search componencts, not in documentation. please give me how to do it.

Feature request

Hi,
Thanks for your quick response for #4 .will respsonive table be supported? Or I can do something to make vue2-datatable responsive?

'javascript:;' in anchor links breaks Content-Security-Policy

There are several anchor links like:

<a href="javascript:;">

Which breaks content security policy.

Omit select checkbox based on criteria

Love the ease of adding the select check boxes to a datatable. I do have situations where I would like to have the select check boxes / select all option, except for some. Is there a way to not display the checkbox in specific rows, for example, I may have locked records that I do not want to be selectable, but still need to display?

Doesn't compatible with UglifyJs?

ERROR in static/js/vendor.a06c4cf127ec568bec06.js from UglifyJs
Unexpected token: punc (() [./node_modules/vue2-datatable-component/src/_mixins/props.js:19,0][static/js/vendor.a06c4cf127ec568bec06.js:5041,7]