v2-table - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #go #golang #nodejs #java #windows #awesome #security #pytorch #mcp #ios

v2-table

(★ 98)

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

File Explorer

Download Latest Version (.zip)

- dev-server.js
- webpack.base.config.js
- webpack.dev.config.js
- webpack.prod.config.js
- webpack.test.config.js
- index.js
- index.css
- index.js
- - demo-block.vue
- - app.3aaa06ad.js
  - app.3aaa06ad.js.gz
  - app.94d8a9b4.css
  - vendor.738e5512.js
  - vendor.738e5512.js.gz
- app.vue
- common.less
- entry.js
- example.md
- index.html
- tpl.html
- - checkbox-list.vue
  - checkbox.vue
  - empty-icon.vue
  - table-body.js
  - table-cell.js
  - table-column.vue
  - table-footer.js
  - table-header.js
  - table.vue
- - fixed.less
  - icon.less
  - index.less
  - var.less
- bus.js
- debounce.js
- index.js
- karma.conf.js
- table.spec.js
- utils.js
.babelrc
.eslintrc
.gitignore
.travis.yml
codecov.yml
commitlint.config.js
LICENSE
package.json
postcss.config.js
README.md
README_CN.md
webpack.build.config.js

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd v2-table

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i --save v2-table beautify-scrollbar

Type this command into your terminal and run it.

yarn add v2-table beautify-scrollbar

Type this command into your terminal and run it.

npm i

Type this command into your terminal and run it.

npm run dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![build pass](https://api.travis-ci.org/dwqs/v2-table.svg?branch=master)](https://travis-ci.org/dwqs/v2-table?branch=master) ![npm-version](https://img.shields.io/npm/v/v2-table.svg) ![license](https://img.shields.io/npm/l/v2-table.svg)

[中文 README](https://github.com/dwqs/v2-table/blob/master/README_CN.md)
# 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](https://dwqs.github.io/v2-table).

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

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

cd v2-table

npm i

npm run dev
```

## Thanks

* [Element UI](http://element.eleme.io/2.0/#/en-US).
* [浅谈表格组件的实现：固定表头和固定列](https://zhuanlan.zhihu.com/p/33280304)

## LICENSE
MIT