dwqs / v2-table Goto Github PK

View Code? Open in Web Editor NEW

100.0 11.0 24.0 1.19 MB

A simple table component based Vue 2.x: https://dwqs.github.io/v2-table/

License: MIT License

JavaScript 40.29% Vue 48.11% CSS 11.59%

vuejs2 vue-table table vuejs-components

v2-table's Introduction

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

v2-table's People

Contributors

Stargazers

Watchers

v2-table's Issues

List array passed by props

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?

TypeError: i.a is not a constructor

Hello,

Your v2-table is really awesome! But I am getting an error while trying to use it in a single html page design, could you please provide me some suggestions? This is what I did:

Vue.use(V2Table);
[Vue warn]: Error in nextTick: "TypeError: i.a is not a constructor"

found in

---> at src/components/table.vue

Best,

row-class-name attribute function return the row with undefined

The following code in table-body.js on line 44. I found the this.row is undefined, I replaced it with this.rows[index], then will be OK.

if (typeof this.table.rowClassName !== 'undefined') {
  const customRowClass = typeof this.table.rowClassName === 'function' ? this.table.rowClassName({ row: this.row, rowIndex: index }) : this.table.rowClassName;
  cls.push(typeof customRowClass === 'string' ? customRowClass : '');
}

filter table

sorry. Help me !! how to filter table ??

How to working well on SSR (Nuxt)?

Hi guys,

I'm using Nuxt.JS.
I have an error window is not defined, but By using <no-ssr></no-ssr> it works.
But I want better for SEO.

Thanks in advance.

Refreshing data in table + add icon to call method

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 👍

And for QuickStart & Example give 💯

多选时不能取消选中

event to check or uncheck checkboxlist

Hi, I have a table such as below. is there any way to trigger select-change event within the same row?
for example when i click the name column then the checkbox is selected for that row.

Thanks for your great work 👍

无边框多选时选择框的列表出现了 border

Multi-select error when enable lazy-load

Mark and will fix it as soon as possible

Y Scroll Bar Not Always Shown

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

handleSelectChange doesn't work if the HTML in vue is accessing the data point being updated from the handle select change.

<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.

How to insert empty full-width row?

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.

How to show nested objects table

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

Use withouth webpack

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.

Table will not be updated with dynamical columns

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

unable to "select" content of a column

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

the problem with the initialization BeautifyScrollbar

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

Can't show 0 in table

When some data field value is 0, it can't display in table

v2-table scroll issue

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

Is there a way to set specific rows to be checked?

Hello I've been using the v2-table for some design purpose but I could not figure out a way to bind the checked attribute of column with type "selection", so I cannot set some rows to be selected programmably, I've tried using "prop" attribute but it won't work...
e.g:

data: [{checked: true, name: 'jason', state:'CA'}, {checked: false, name: 'mike', state:'CA'}, {checked: true, name: 'Lu', state:'CA'},...]
Do you have any example upon this functionality?

Thank you very much for your help!