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

• Table
• X-Table

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 |