Vuejs-V2 table v3.0.1: v2-table - A simple table component based Vue 2.x.

icon
Latest Release: v3.0.1

Change Log

  • fix #11
  • Add isReset parameter for updateScrollbar methods.
Source code(tar.gz)
Source code(zip)

build pass npm-version license

中文 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

yarn add  v2-table beautify-scrollbar

Get Started

import Vue from 'vue';

import 'beautify-scrollbar/dist/index.css'; 
import 'v2-table/dist/index.css'; 
import V2Table from 'v2-table';

Vue.use(V2Table)
<template>
  <v2-table :data="list">
    <v2-table-column label="Name" prop="name"></v2-table-column>
    <v2-table-column label="Date" prop="date"></v2-table-column>
    <v2-table-column label="Address" prop="address"></v2-table-column>  
  </v2-table>  
</template>

<script>
  export default {
    data () {
      return {
        list: [{
          date: '2017-12-02',
          name: 'test1',
          address: 'Shenzhen,China'
        }, {
          date: '2017-11-02',
          name: 'test2',
          address: 'Guangzhou,China'
        }, {
          date: '2018-01-02',
          name: 'test3',
          address: 'Shaoyang,Hunan'
        }, {
          date: '2017-10-02',
          name: 'test4',
          address: 'Changsha,Hunan'
        }]
      }
    }
  }
</script>

More demo to visit here.

Available Props

The v2-table component

Attribute Type Accepted Values Default Description
data Array - [] table data
border Boolean - false whether show table border
stripe Boolean - false whether table is striped
loading Boolean - false show loading component
empty-text String - No Data Displayed text when data is empty. You can customize this area with slot="empty"
default-sort Object order: ascending/descending if prop is set, and order is not set, then order is default to ascending set the default sort column and order. property prop is used to set default sort column, property order is used to set default sort order
row-class-name String/Function({row, rowIndex}) - - function that returns custom class names for a row, or a string assigning class names for every row
pagination-info Object - { text: '', pageSize: 10, nextPageText: 'Next', prevPageText: 'Prev' } pagination info for table data
shown-pagination Boolean - false whether showing pagination of table data
total Number - 0 all data of table, it's needed when shown-pagination is true
height Number/String - auto table's height
cell-height Number/String - 44 cell's height
show-summary Boolean - false whether to display a summary row
sum-text String - Sum displayed text for the first column of summary row
summary-method Function({ columns, data }) - - custom summary method
lazy-load Boolean - false whether enable lazy-load
col-height Number/String - 40 header columns' height

Table Events

Event Name Description Parameters
sort-change triggers when table's sorting changes { prop, order }
page-change triggers when table's page changes currentPage
select-change triggers when selection changes rows

Table Methods

Event Name Description Parameters
toggleRowSelection used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected row, selected
updateScrollbar update the scrollbar config for the table isReset(whether reset scrollbar, default value is false)

Table Slot

Name Description
empty custom empty component, it's will show when data is empty
loading custom loading component, it's will show when loading property of table is true

The v2-table-column component

Attribute Type Accepted Values Default Description
label String - - column label
prop String - - field name
width String/Number - - column width
sortable Boolean true/false false whether column can be sorted.
align String left/center/right center alignment
fixed String left/right - fixed column to left or right
type String - - type of the column
render-header Function(h, { column }) - - render function for table header of this column

Development

git clone git@github.com:dwqs/v2-table.git

cd v2-table

npm i 

npm run dev

Thanks

LICENSE

MIT

Comments

  • Table will not be updated with dynamical columns
    Table will not be updated with dynamical columns

    Aug 1, 2018

    My columns are the date, which is depended on the user's time select. Such as 2018-08-01, 2018-08-02,2018-08-03 and so on. So my column slot like following:

    <v2-table>
      <v2-table-column v-for="(column,index) in columns" :key="index" :label="column.label" :width="column.width" :prop="column.key"></v2-table-column>
    </v2-table>
    

    when columns are updated, table will not be updated

    Reply
  • Use withouth webpack
    Use withouth webpack

    Oct 27, 2018

    Hi there. I would like to ask you if is it possible to use this component vue without having all the flow with webpack and stuff related. I am a .Net core developer and I really like to use it on old way,.. you know, adding the script tag , css, and just register the component and use it.

    Thanks.

    Reply
  • List array passed by props
    List array passed by props

    Dec 10, 2018

    Hello, I have a list of data passed by props, when I accessed the table component I ended up receiving this data and doing a "for" within the "v2-table-column" element, eg: <v2-table-column v-for="coluna in colunas" :label="coluna.label" :prop="coluna.prop" sortable width="200"></v2-table-column>

    where "coluna " receives an array of categories, for example: list[0].departamentos[0].nome

    How do I list these arrays within the current column?

    Another question, why is the table not 100% wide?

    Reply
  • How to insert empty full-width row?
    How to insert empty full-width row?

    Jan 21, 2019

    Hello! Thank you for the great package!

    I have a question. Can you please tell me, how can I insert an empty row to the table? Can you show me how to do it on this example called "Fixed columns and header"?

    The problem is that I want to insert several empty rows with specific text in it.

    Reply
  • How to show nested  objects table
    How to show nested objects table

    May 16, 2019

    Hello,

    how can i use v2 table to print a nested objects table. let's say i got from backend (laravel controller) a list of products with their sales (product->with('sales')->get()), and each product has a different number of sales.

    i want to show them like this : ( sales table inside each product row)

     id      |            Product       |                sales                         |   
    
      1      |           Product_1      |   id      |      sale        |     price
    
                                           1        |    sale_1        |    price_1                                                                              
                                           2        |    sale_2        |    price_2
    
      2      |           Product_2      |   id      |      sale        |     price
    
                                           3        |    sale_3        |    price_3                                                                                
                                           4        |    sale_4        |    price_4
                                           5        |    sale_5        |    price_5
    
    Reply
  • handleSelectChange doesn't work if the HTML in vue is accessing the data point being updated from the handle select change.
    handleSelectChange doesn't work if the HTML in vue is accessing the data point being updated from the handle select change.

    Sep 9, 2021

    <div v-if="selectedLength > 0" style="text-align: center;">Test</div>

    methods: {
        handleSelectChange(rows) {
          this.selectedRequests = [].concat(rows);
          this.selectedLength = rows.length
        },
    }
    
    <v2-table
          :data="filterAndSortData(requests)"
          stripe
          :default-sort="{
            prop: 'timestamp',
            order: ascending ? 'ascending' : 'descending',
          }"
          :total="requests.length"
          :shown-pagination="true"
          :pagination-info="paginationInfo"
          :row-class-name="getRowClassName"
          @sort-change="handleSortChange"
          @page-change="handlePageChange"
          @select-change="handleSelectChange"
        >
    

    I haven't be able to understand why, but if I remove the v-if="selectedLength > 0" then my check and uncheck on the boxes works perfectly fine.

    however when I need to actually use the information being checked and unchecked, it seems like its basically freezing my app. I can't even use my sort by ascending/descending but as soon as I remove v-if="selectedLength" the problem resolves itself.

    Reply
  • unable to
    unable to "select" content of a column

    Feb 23, 2018

    I want to copy some content in a column in a row but I am unable to select any text in any row.

    Reply
  • Y Scroll Bar Not Always Shown
    Y Scroll Bar Not Always Shown

    Mar 13, 2018

    At first initialization, Y Scrollbar not shown. But after second redrawn, the scroll bar will be shown (I use tab view)

    duplicate 
    Reply
  • this.xThumb is null
    this.xThumb is null

    Feb 3, 2018

    Hey thanks for that nice component, I have an issue when I try to destroy that component (route change) it always throws that error:

    this.xThumb is null

    Any idea?

    Reply
  • Refreshing data in table + add icon to call method
    Refreshing data in table + add icon to call method

    May 30, 2018

    I think about opportunity refresh my data. How to call method on demand

    fetchData() {
          this.$http.get('v_sim.php').then(response => {
            this.list = response.body 
          }, response => { return 'error' })
        }
    

    Maybe some simple solutions e.g. some icon similar to sortable in first header column? Or maybe is something similar in library?

    Thanks for v2-table :+1:

    And for QuickStart & Example give :100:

    Reply
  • the problem with the initialization BeautifyScrollbar
    the problem with the initialization BeautifyScrollbar

    Mar 13, 2018

    the page displays several tables, some of them are hidden and initially, there is no data in them, after switching to the tab, the data is loaded but the scroll bar does not appear

    bug 
    Reply
  • v2-table scroll issue
    v2-table scroll issue

    May 13, 2018

    Hi there!

    I'm facing a problem with table's scroll. The mentioned table is inside a b-modal (bootstrap vue) I'm using a fixed height enough to display 3 rows If I scroll all it down to see the 5#,6#,7# row and then switch to other modal containing <= 3 rows these 3 rows arent displayed. But i can scroll up back and see those rows

    https://hastebin.com/zamuxovowo.xml

    Reply