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 or center ttText | Table title text| any text can use ttFontsize | Table title font size| any number with px (ex:15px) ttColor | Table title text color| act as css color property rHover| Table rows hover|trueorfalse tBorder| Table cells seperate with border|trueorfalse thColor| Table header background color|dark,lightandnone deleteAlertTitle| Table row action confirmation alert message| ant text with typestring editable| Table rows edit button show or hide|trueorfalse deletable| Table rows delete button show or hide|trueorfalse filterFloats| Table filter align direction|left, centerorright pgAlign| Table pagination section alignment|left, centerorright pgPosition| Table pagination display position|toporbottom pgPerPage| Table rows per page| use anumberwhich more than 1 pgSize| Table pagination display size|sm,mdorlg imgSize| Table rows loading images size|sm,mdorlg`

• items

  • The type of the Data which pass to components should be an Array

• fields

  name | feature descriptions | value ------ | -------| ------- key | Table header map to items| any text that show the items data label | Table header show name| any text can use type | Table column data type| text,number and img sortable | Table column want to sort|true or false filterOn | Column data want to filter| true or false

• 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

#####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