English | 简体中文
vue-snb-table
vue-snb-table is a table componen for Vue.js. Display multiple data with similar format. You can sort your data in a table.
Demo
You can see a demo here: https://cherislive.github.io/projrct/vue-snb-table/
Install
$ npm install vue-snb-table
Import
Import using module
Import components to your project:
// in ES6 modules;// in CommonJSconst SnbTable SnbTableColumn SnbTableHeader = ;// in Global variableconst SnbTable SnbTableColumn SnbTableHeader = VueSnbTable;
And register components:
Vue;Vue;Vue;
Import using script tag
const SnbTable = VueSnbTableSnbTable;const SnbTableColumn = VueSnbTableSnbTableColumn;const SnbTableHeader = VueSnbTableSnbTableHeader;el: 'body'components:'snb-table': SnbTable'snb-table-column': SnbTableColumn'snb-table-header': SnbTableHeader;
Usage
Work on a Vue instance:
<SnbTableHeader :columns="columns" :colsWidth="colsWidth" /><snb-table> <snb-table-column prop="data1" label="data1" /> <snb-table-column prop="data2" label="data2" /> <snb-table-column prop="data3" label="data3"> <template slot-scope="scope">{{scope.data3}}</template> </snb-table-column></snb-table>
Table
Attributes
Option | Type | Description | Accepted Values | Default |
---|---|---|---|---|
data | Array | Table data | - | - |
showHeader | Boolean | whether Table header is visible | - | true |
headerFixed | Object | whether Table header is fixed | state : true/false |
null |
defaultSort | Object | 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 |
order : asc, desc |
if prop is set, and order is not set, then order is default to ascending |
sortState | Object | set the handle sort column and order. property prop is used to set default sort column, property order is used to set default sort order |
order : asc, desc |
- |
headerColsWidth | Array | columns width | - | - |
Events
Event Name | Description | params |
---|---|---|
columnsReady | triggers when table element is ready | columns |
sortChange | triggers when sort state or sort order changes | {sort: {prop, order}, column} |
colsWidth | triggers when table data changes | widths |
distanXChange | triggers when drag table rest assured is horizontal | width |
rowClick | triggers when clicking a row | row |
Table-column
Attributes
Option | Type | Description | Accepted Values | Default |
---|---|---|---|---|
prop | String | field name. You can also use its alias: property | - | - |
label | String | column label | - | - |
align | String | alignment | left/center/right | left |
width | String | column width | - | - |
fixed | String | whether column is fixed. Will be fixed at left if true | true, false | false |
sortable | Boolean | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the sort-change event of Table | true, false | false |
formatter | Function(row, column, cellValue, index) | function that formats cell content | - | - |
Table-header
Attributes
Option | Type | Description | Accepted Values | Default |
---|---|---|---|---|
columns | Array | columns | - | - |
colsWidth | Array | columns width | - | - |
distanX | Number | table rest assured is horizontal | left/center/right | left |
defaultSort | Object | 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 |
order : asc, desc |
if prop is set, and order is not set, then order is default to ascending |
sortState | Object | set the handle sort column and order. property prop is used to set default sort column, property order is used to set default sort order |
order : asc, desc |
- |
Events
Event Name | Description | params |
---|---|---|
sortChange | triggers when sort state or sort order changes | {sort: {prop, order}, column} |
headerColsWidth | triggers when table columns changes | widths |
Development
Watching with hot-reload:
$ npm run dev
Develop on real remote device:
$ npm run remote-dev {{ YOUR IP ADDRESS }}
License
MIT