vue-crud-tables

Smart Vue table component with crud functionality

Example

Demo: https://vue-crud-tables.herokuapp.com

Uses

    npm install vue-crud-tables

    import VueTables from 'vue-crud-tables'
    
    Vue.use(VueTables);

     <vue-table :columns="my-columns" :data="my-data" :options="table-options"></vue-table>

Documentation

vue-crud-tables props

:columns (type: Array)

| Option | Type | Values(default) | Description | | ------------- |---------|---------------------------| -------------| | name | String |(empty string) | Name of column. It must be the same as the corresponding attribute name i data props | | label | String |(empty string) | Column label in table header | | type | String |text(default), select | Type of table cell| | require | Boolean |true(default), false | If cell is required before save| | filtrable | Boolean |true, false(default) | If column is filtrable| | sortable | Boolean |true, false(default) | If column is sortable| | editable | Boolean |true, false(default) | If column is editable| | data | Array |[{id: Number,label: String}] (empty array) | Array of options to select in editable mode|

Example

    var columns = [
        {
          name: 'firstName',
          label: 'First name',
          type: 'text',
          require: true,
          filtrable: true,
          sortable: true,
          editable: true
        },
        {
          name: 'lastName',
          label: 'Last name',
          type: 'text',
          require: true,
          filtrable: true,
          sortable: true,
          editable: true
        },
        {
          name: 'city',
          label: 'City',
          type: 'select',
          data: [
            {
              id: 1,
              label: 'Warsaw'
            },{
              id: 2,
              label: 'New York'
            },{
              id: 3,
              label: 'Moscow'
            }
          ],
          require: true,
          filtrable: true,
          sortable: true,
          editable: true
        }
    ]

:data (type: Array)

Array of data objects. Object attributes must be the same as names attributes in columns.

:options (type: Object)

| Option | Type | Values(default) | Description | | ------------- |---------|---------------------------| -------------| | tableName | String |"table"(default) | Name of table| | style | String |"bootstrap"(default) | Choose default style of table | | classes | String |"table"(default) | class attribute in table tag| | url | String |null(default) |Url it is address of endpoint for table data. It can also be an address to the CRUD operations API implemented same like below example: Fetch table data GET /post Add new row POST /posts Edit Row PUT /posts/1 Delete row DELETE /posts/1 | | editMode | String |"row"(default), "modal" | Choose method of editing row, "modal" option is aviable only for "bootstrap" style | | editButtonTmp | String |<a href="#">edit</a> (default) | Edit button template| | deleteButtonTmp | String | <a href="#">delete</a> (default) | Delete button template| | cancelButtonTmp | String |<a href="#">cancel</a> (default) | Cancel button template| | saveButtonTmp | String |<a href="#">save</a> (default) | Save button template| | customActionTmp | String |(empty string) | Custom buttons template| | buttonsFloat | String |"left"(default), "right" |Location of action buttons in table | | deleteFn | Function |(default function) | Default delete method| | saveFn | Function |(default function) | Default save method| | deleteCallbackFn | Function |(default callback function) | Default delete callback method| | saveCallBackFn | Function |(default callback function) | Default save callback method|

Example

 var options = {       
        classes: 'table',
        tableName: 'my-table',
        editMode: 'row',  
        url: 'https://jsonplaceholder.typicode.com/posts',             
        customActionTmp: '', 
        buttonsFloat: 'left'
  }

Extra functions

| Function | Parameters(Type) | Description | Example | | ------------- |--------- |-------------|------------- | | addRow | tableName(String) |Adding new row to table | this.$VueTable.addRow('my-table'); |