1.0.0-alpha.7 • Published 3 years ago
vuetytable v1.0.0-alpha.7
This Vue Component can draw a table dynamically.
Prepare The Environment
$ npm install
Dependencies
- Bootstrap 4
- Fontawesome 4
- VueJs
Usage
import vuetytable from "vuetytable";
new Vue({
components: {
vuetytable,
},
data() {
return {
data: [{ id: 1, name: "lorem" }],
actions: [
{
tag: "a",
btn: "btn-dark",
url: "example.com",
text: "lorem",
icon: "fa-edit",
alert: "any message",
},
],
};
},
}).$mount("app_root_element");
import the component css file
import "vuetytable/dist/vuetytable.css";
<vuetytable
:data="data"
:actions="actions"
:classes="`my-custom-css-class`"
:options="{
image: {
column: 'picture',
width: 50,
height: 50,
lightbox: true
},
columns: {
thead: {
align: 'center',
styles: {
'text-transform': 'capitalize',
'font-weight': 'bold',
'font-style': 'italic',
}
},
tbody: {
align: 'center',
styles: {
'text-transform': 'capitalize',
'font-weight': 'bold',
'font-style': 'italic',
}
},
},
urlColumnCode: 'id',
}"
/>
- Data prop is the records that you want to display in the table.
- Actions key have different options:
- The Required Are
- tag should be
<a>
or<form>
- btn is your preferred bootstrap class for buttons
- url
- tag should be
- The optional Are
- icon is your preferred icon from the fontawesome library
- text that will be displayed on the action
- alert for authorization before submitting the form
- The Required Are
NEW:
- The Library Supports Vue 3
- Added Lightbox Plugin
With The
Classes
Prop Now You Can Add Your Preffered Css ClassesWith the options prop you can customize the table even more.
- if you want to display an image in the table you can now do that by passing the image object which contains the following keys:
column
is the column name of the picture.height
of the picture.width
of the picture.lightbox
key if you want to use lightbox plugincolumns
which contains customizable options for the table head and the table body.urlColumnCode
if you want to change the code in the url.
Note:
- alert option works with
<form>
tag only - icon or text options at least one of them should appear.
1.0.0-alpha.7
3 years ago
1.0.0-alpha.6
3 years ago
1.0.0-alpha.5
3 years ago
1.0.0-alpha.4
3 years ago
1.0.0-alpha.3
3 years ago
1.0.0-alpha.2
3 years ago
1.0.0-alpha.1
3 years ago
1.0.0-alpha.0
3 years ago
0.3.4
3 years ago
0.3.3
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago