A vue component of dynamic table
npm install vue-table-dynamicEnglish | 简体中文
vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and oriented to the runtime.
!Demo
$ npm install vue-table-dynamic --save
`Usage
$3
import VueTableDynamic from 'vue-table-dynamic'
$3
#### Global registration
Vue.use(VueTableDynamic)
#### Local registration
$3
Basic table usage
$3
Bordered table usage
-
with border
- border: without border`
$3
Striped rows
-
striped
- stripe: unstriped `
$3
Highlighted rows/columns/cells
-
configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]} if negative, the position from the end of the array.
- highlightedColor: configure highlighted colors `
$3
Select multiple rows
-
show checkbox of rows
- getCheckedRowDatas: get data for all currently selected rows
- setAllRowChecked: toggle all selection
- select: currently selected/unselected rows `
@select="onSelect"
@selection-change="onSelectionChange"
ref="table"
>
$3
Filter rows by keyword
-
enable/disable searching
- search: manual row filtering `
ref="table"
>
$3
Sort rows based on specified column data
-
array members are sortable column indexes. such as: [0, 1]!sort
ref="table"
>
$3
Filter rows based on specified column data and rule
-
specify filterable columns and rules. such as: [{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
- column index
- filter[].content: filter items
- filter[].method: filter rule. `
ref="table"
>
$3
Table with pagination
-
enable/disable pagination
- pageSize?: row count of each page. default: 10
- options of row count per page. default: [10, 20, 50, 100] `
ref="table"
>
$3
Editable table
Support specifying rows/columns/cells for editing
-
configure editable rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array.
- getData: table data changed after editing, get the latest data by this method.
- cell-change: cell data changed event
- edit: all cells can be edited
- if header is 'row', the first row is not editable
- if the type of source data item is number, only acceptable when entering numbers !edit
`
@cell-change="onCellChange"
ref="table"
>
$3
Configure column width
-
such as: [{column: 0, width: 60}, {column: 3, width: '15%'}]
- index of column
- columnWidth[].width width of column. number for pixel value, string for percentage`
$3
-
the first row is header
- header: the first column is header
- header: no header`
$3
Fixed header by configure the height of table
-
table height
- when the value of header is not 'row', the first row is a normal row, will not fixed `
ref="table"
>
$3
Fixed columns by configure
-
the fixed columns
- columns with index less than or equal to fixed will be configured as fixed. such as fixed: 1, the first column and the second column will be fixed
- for fixed columns, need to specify the column width (pixel value) by columnwidth
- multi check box is not in the range of fixed column, it's always in front of the first column
- if need to fix a column in the middle, adjust the column data in params.data to column 0
$3
Fixed header by
. Fixed columns by fixed
$3
Customize cell content by slot
The slot name should be
， n is the index of column `
Slot::{{props.cellData}}--{{props.row}}--{{props.column}}
API
$3
-
is the object that need to be passed to the component props
- the following items are all child properties of the object
- data is required attribute, others are optional| name | description | type | optional value | default value |
| -----| ----------- | ---- | -------------- | ------------- |
|
data | source data | Array<[number, ..., number]> | - | [] |
| header | configure header | string | row: the first row is header; column: the first column is header; '': no header | '' |
| border | table with border | boolean | true/false | false |
| stripe | striped table | boolean | true/false | false |
| highlight | configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array. | {row?:Array<>; column?:Array<>; cell?:Array<>;} | - | {} |
| highlightedColor | highlighted colors | string | - | #EBEBEF |
| wordWrap | word-wrap style of table cell | string | normal/break-word | normal |
| whiteSpace | white-space style of table cell | string | nowrap/normal/pre/pre-wrap/pre-line | nowrap |
| textOverflow | text-overflow style of table cell | string | clip/ellipsis | clip |
| showCheck | show checkbox of rows. Only when the header is 'row', the first cell of the first row is the checkbox of all rows. Otherwise, the first cell is the checkbox of the first row | boolean | true/false | false |
| enableSearch | enable/disable searching, filter rows by keyword | boolean | true/false | false |
| minWidth | min width of table | number | - | 100 |
| maxWidth | max width of table | number | - | 10000 |
| height | table height. fixed header by configure the height of table | number | - | - |
| fixed | fixed columns | number | >= 0 | |
| headerHeight | header height | number | >= 24 | 30 |
| rowHeight | row height | number | >= 24 | 30 |
| columnWidth | Configure column width | Array<{column:number; width:number/string;}> | - | - |
| sort | sort rows based on specified column data | Array | - | - |
| filter | filter rows based on specified column data and rule. column: index; content: filter items; method filter rule. | Array<{column, content, method}> | - | - |
| edit | specifying rows/columns/cells for editing. table data changed after editing, get the latest data by getData method | {row?:Array<>; column?:Array<>; cell?:Array<>;} | - | - |
| pagination | table with pagination | boolean | true/false | false |
| pageSize | row count of each page | number | - | 10 |
| pageSizes | options of row count per page | Array | - | [10, 20, 50, 100]|
| showTotal | show total count of pagination | boolean | true/false | false |
| scrollbar | display of scroll bar | string | show/hover/hidden | show |$3
| method name | description | parameters | return |
| ------- | -------- | --------- | ---------- |
|
getData | table data changed after editing, get the latest data by this method | - | Array<[number, ..., number]> |
| getCheckedRowDatas | get data for all currently selected rows | includeWhenHeaderInfirstRow: boolean include header row when the first row is header，default is false | Array<[number, ..., number]> |
| getRowData | get row data by index | rowIndex:number index；isCurrent: boolean is the index sorted，default is false | Array |
| search | manual row filtering | searchValue:string keyword; included:array match in specified column; excluded:array not match in specified column, priority over included | - |
| clearSearch | clear searching, show all rows | - | - |
| toPage | switch to the target page, when pagination is enable | tagetPage:number page to switch | - |$3
| event name | description | parameters |
| ------------- | ------------- | ---------- |
|
select | event when selecting a row | checked: boolean; index: number; data: Array |
| select-all | event when clicking the checkbox in table header | isCheckedAll: boolean |
| row-click | event when clicking a row | index:number; data:Array |
| cell-click | event when clicking a cell | rowIndex:number; columnIndex:number; data:string\number |
| cell-contextmenu | event when opening a cell's context menu | rowIndex:number; columnIndex:number; data:string\number |
| cell-change | event when edting a cell | rowIndex:number; columnIndex:number; data:string\number |
| sort-change | event when sorting | index: number; value: string` |