vue-table-editable
Vue Editable Table Component
Project Details
Publish a b-table
customized editable component vue-table-editable as a NPM module
Module Name: vue-table-editable
Latest version: 0.0.5
####Component main configurations
-
tableOptions
name feature descriptions value ttAlign
Table title alignment left
orcenter
ttText
Table title text any text
can usettFontsize
Table title font size any number with px
(ex:15px
)ttColor
Table title text color act as css color
property`rHover
Table rows hover true
orfalse
tBorder
Table cells seperate with border true
orfalse
thColor
Table header background color dark
,light
andnone
deleteAlertTitle
Table row action confirmation alert message ant text with type string
editable
Table rows edit button show or hide true
orfalse
deletable
Table rows delete button show or hide true
orfalse
filterFloats
Table filter align direction left
,center
orright
pgAlign
Table pagination section alignment left
,center
orright
pgPosition
Table pagination display position top
orbottom
pgPerPage
Table rows per page use a number
which more than 1pgSize
Table pagination display size sm
,md
orlg
imgSize
Table rows loading images size sm
,md
orlg
-
items
- The type of the Data which pass to components should be an
Array
- The type of the Data which pass to components should be an
-
fields
name feature descriptions value key
Table header map to items any text
that show the items datalabel
Table header show name any text
can usetype
Table column data type text
,number
andimg
sortable
Table column want to sort true
orfalse
filterOn
Column data want to filter true
orfalse
-
output-change
After edit or delete, a row in table sends an event called
output-change
- Return action
save
when row save after edit - Return action
delete
when row delete success
- Return action
#####How to use editable table component
First add <TableComponent></TableComponent> to vue file
Add props as below
<TableComponent
:items="itemsSet"
:fields="fieldSet"
:tableOptions="tableOptions"
@output-change="handleOutput">
</TableComponent>
Update database when change happened in table rows (Edit or Delete)
handleOutput(action, data) {
if (action === "delete") {
// remove data from database
} else if (action === "save) {
// update data in database
}
}
Test node version: v10.17.0
#####Use only edit button and hide delete button. Table title color change into green
#####Use only edit and delete buttons. Filter and pagination both are in top of the table
#####Edit the row when click the edit button
#####Load images in a table