vt

v2-table

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

Showing:

Popularity

Downloads/wk

140

GitHub Stars

98

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

16.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Table

Readme

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

AttributeTypeAccepted ValuesDefaultDescription
dataArray-[]table data
borderBoolean-falsewhether show table border
stripeBoolean-falsewhether table is striped
loadingBoolean-falseshow loading component
empty-textString-No DataDisplayed text when data is empty. You can customize this area with slot="empty"
default-sortObjectorder: ascending/descendingif prop is set, and order is not set, then order is default to ascendingset 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-nameString/Function({row, rowIndex})--function that returns custom class names for a row, or a string assigning class names for every row
pagination-infoObject-{ text: '', pageSize: 10, nextPageText: 'Next', prevPageText: 'Prev' }pagination info for table data
shown-paginationBoolean-falsewhether showing pagination of table data
totalNumber-0all data of table, it\'s needed when shown-pagination is true
heightNumber/String-autotable\'s height
cell-heightNumber/String-44cell\'s height
show-summaryBoolean-falsewhether to display a summary row
sum-textString-Sumdisplayed text for the first column of summary row
summary-methodFunction({ columns, data })--custom summary method
lazy-loadBoolean-falsewhether enable lazy-load
col-heightNumber/String-40header columns\' height

Table Events

Event NameDescriptionParameters
sort-changetriggers when table's sorting changes{ prop, order }
page-changetriggers when table's page changescurrentPage
select-changetriggers when selection changesrows

Table Methods

Event NameDescriptionParameters
toggleRowSelectionused in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selectedrow, selected
updateScrollbarupdate the scrollbar config for the tableisReset(whether reset scrollbar, default value is false)

Table Slot

NameDescription
emptycustom empty component, it's will show when data is empty
loadingcustom loading component, it's will show when loading property of table is true

The v2-table-column component

AttributeTypeAccepted ValuesDefaultDescription
labelString--column label
propString--field name
widthString/Number--column width
sortableBooleantrue/falsefalsewhether column can be sorted.
alignStringleft/center/rightcenteralignment
fixedStringleft/right-fixed column to left or right
typeString--type of the column
render-headerFunction(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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100