README
vue-sheets
A vue component library based on the JUI components available in vuejs.
Installation
NPM
npm install --save vue-sheets
Browser (Legacy)
If you are using an existing JUI style, Just download dist/vue-sheets.base.js and include it in your HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="dist/vue-sheets.base.js"></script>
<link rel="stylesheet" href="jui-grid.classic.css" />
<!--<link rel="stylesheet" href="jui-grid.dark.css" />-->
Browser
Download the dist/vue-sheets.classic.js and dist/vue-sheets.css and include it in your HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="dist/vue-sheets.classic.js"></script>
<!--<script src="dist/vue-sheets.dark.js"></script>-->
<link rel="stylesheet" href="dist/vue-sheets.css" />
ES Modules
Plug-In
import Vue from 'vue'
import VueSheets from 'vue-sheets'
Vue.use(VueSheets, { theme: 'classic' })
Components (Legacy)
If you are using an existing JUI style, You must load a non-styled view component.
import Vue from 'vue'
import SheetsTable from 'vue-sheets/src/components/table'
Vue.component(SheetsTable.name, SheetsTable);
Components
import Vue from 'vue'
import SheetsTable from 'vue-sheets/src/components/table.classic'
// import SheetsTable from 'vue-sheets/src/components/table.dark'
Vue.component(SheetsTable.name, SheetsTable);
Implemented components
Props
Common
| Name | Type | Required | Watch | Default | Description |
|---|---|---|---|---|---|
| tableType | String | false | false | classic |
Table style type (simple, simple headline, expand) |
| tableSize | String | false | false | normal |
Table size type (small, large) |
| tableEffect | String | false | false | hover |
Table effect type (stripeless, borderless) |
| tableWidth | Number, String | false | false | 100% |
Table width |
| columns | Array | true | false | undefined |
Properties of a column object, Required are key and name (key, name, width, sort, active) |
| data | Array | false | true | undefined |
Table row data, The column key must be the same as the row object's key |
| scroll | String | false | false | vscroll |
Table scroll type (page, s-page, scroll) |
| scrollHeight | Number | false | true | 200 | The maximum height of the tbody tag |
| resize | Boolean | false | false | false | Use resizing of table columns |
| sortKey | String | false | false | null |
Column key to sort by default |
| sortOrder | String | false | false | asc |
Sort order type for default sorting (desc) |
| activeMenu | Boolean | false | false | false | Show or hide the drop-down menu for column activation |
| menuLeft | Number | false | false | 0 | Left coordinate of the drop-down menu |
| menuTop | Number | false | false | 0 | Top coordinate of the drop-down menu |
| selectRowEffect | Boolean | false | false | false | When clicking on a row, apply the selection effect to the row |
| selectRowIndex | Number, String | false | false | false | The index of the row to select when the data is first updated |
| templateRow | String | false | false | null |
Table row template |
| templateNone | String | false | false | null |
If there are no rows, the displayed template |
| templateExpand | String | false | false | null |
Template for table row extension area |
| templateMenu | String | false | false | null |
Template for drop-down menu for column activation |
Table
| Name | Type | Required | Watch | Default | Description |
|---|---|---|---|---|---|
| dragRow | Boolean | false | false | false | Option to change table rows by dragging the mouse |
X-Table
| Name | Type | Required | Watch | Default | Description |
|---|---|---|---|---|---|
| scrollWidth | Number | false | false | 0 | The maximum width of the table tag |
| sortType | String | false | false | 'single' | Only X-Table components support multiple sorting (multi) |
| sortCache | Boolean | false | false | false | Options that maintain column sorting when new data is updated |
| xssFilter | Boolean | false | false | false | Options to enable the xss filter |
| rowHeight | Number | false | false | 26 | When using table virtual scrolling, set the row height for precise calculations |
| pageCount | Number | false | false | 100 | When table scrolling is not used, the number of rows per page |
Events
Common
| Name | Arguments | Description |
|---|---|---|
| click | Row, Event | Events that occur when a table row is clicked |
| rclick | Row, Event | Events that occur when right-clicking a table row |
| dblclick | Row, Event | Events that occur when double-clicking a table row |
| sort | Row, Event | When sorting starts after clicking on a table column |
| sortend | Row, Event | When sorting is completed after clicking on a table column |
| expand | Row, Event | Events that occur when an extension is opened after clicking a table row |
| expandend | Row, Event | Events that occur when an extension is closed after clicking on a table row |
| showcolumn | Column, Event | The event that occurs when the column is shown |
| hidecolumn | Column, Event | The event that occurs when the column is hidden |
| columnmenu | Column, Event | The event that occurs when the drop-down is shown |
Table
| Name | Arguments | Description |
|---|---|---|
| drag | Row, Event | Events that occur when dragging a table row begins |
| dragend | Row, Event | Events that occur when a table row ends dragging |
| edit | Row, Event | Events that occur when you modify a table row |
| editend | Row, Event | Events that occur when the table row is modified |