dwqs / V2 Table
Licence: mit
A simple table component based Vue 2.x: https://dwqs.github.io/v2-table/
Stars: ✭ 96
Projects that are alternatives of or similar to V2 Table
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+375%)
Mutual labels: vuejs-components, vuejs2
Vue Multi Select
This component gives you a multi/single select with the power of Vuejs components.
Stars: ✭ 92 (-4.17%)
Mutual labels: vuejs-components, vuejs2
Vuetify Admin Dashboard
A Crud Admin panel made from Vue js and Vuetify
Stars: ✭ 481 (+401.04%)
Mutual labels: table, vuejs2
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-7.29%)
Mutual labels: vuejs-components, vuejs2
Vue Wordpress Pwa
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
Stars: ✭ 665 (+592.71%)
Mutual labels: vuejs-components, vuejs2
vue-table-for
Easily build a table for your records
Stars: ✭ 33 (-65.62%)
Mutual labels: table, vuejs-components
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+454.17%)
Mutual labels: vuejs-components, vuejs2
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件，包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (+62.5%)
Mutual labels: table, vuejs2
Vue Hotel Datepicker
Vue date range picker component
Stars: ✭ 665 (+592.71%)
Mutual labels: vuejs-components, vuejs2
Vuex I18n
Localization plugin for vue.js 2.0 using vuex as store
Stars: ✭ 657 (+584.38%)
Mutual labels: vuejs-components, vuejs2
Vue Easytable
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...
Stars: ✭ 2,501 (+2505.21%)
Mutual labels: table, vuejs2
V Tag Suggestion
A simple tag component with typeahead
Stars: ✭ 40 (-58.33%)
Mutual labels: vuejs-components, vuejs2
Vue Bootstrap4 Table
Advanced table based on Vue 2 and Bootstrap 4 ⚡️
Stars: ✭ 187 (+94.79%)
Mutual labels: table, vuejs2
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-33.33%)
Mutual labels: vuejs2, vuejs-components
Vue Materialize Datatable
A fancy Materialize CSS datatable VueJS component.
Stars: ✭ 162 (+68.75%)
Mutual labels: table, vuejs2
Vue Input Tag
🔖 Vue.js 2.0 Input Tag Component
Stars: ✭ 507 (+428.13%)
Mutual labels: vuejs-components, vuejs2
Vue2 Perfect Scrollbar
Vue.js wrapper for perfect scrollbar
Stars: ✭ 225 (+134.38%)
Mutual labels: vuejs-components, vuejs2
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+11429.17%)
Mutual labels: table, vuejs2
Vue Virtual Scroller
⚡️ Blazing fast scrolling for any amount of data
Stars: ✭ 6,326 (+6489.58%)
Mutual labels: vuejs-components, vuejs2
Vue2 Datatable
The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Stars: ✭ 867 (+803.13%)
Mutual labels: table, vuejs2
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].