Vue components based on the JUI grids available in Vue.js

Vue components based on the JUI grids available in Vue.js

vue-sheets A vue component library based on the JUI components available in vuejs.

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

Download Details:

Author: juijs

Demo: https://codepen.io/collection/nWjJdG/

Source Code: https://github.com/juijs/vue-sheets

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.