Skip to content

javascript plugin for creating tables complete with CRUD form using vue.js

Notifications You must be signed in to change notification settings

heruujoko/crudtable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Synopsis

This library helps you create more functional table easily.

Sample

sample

Fiddle : https://jsfiddle.net/heruujoko/vj7ds7um/2/

Note: the fiddle is just to show how to set up the HTML tags and may not have the full table functionality since I can't provide an API to serve the table.

Installation

Include crudtable.js to your page, and just wrap it inside a div with id "crudsection"

<div id="crudsection">
  <crud-table endpoint="link_to_your_api_endpoint" columns="your_column_json_spec"></crud-table>
</div>  

Column JSON Spec Sample

[
  { "label": "name" , "type":"text", "required": true},
  { "label": "email" , "type":"email", "required": true},
  { "label": "password" , "type":"password", "required": true},
  { "label": "description" , "type":"textarea", "required": true},
]

Supported form type :

  1. text
  2. textarea
  3. email
  4. password

API endpoint

This library assumes your API has common resources structures and match the JSON Spec for the forms

  1. GET http://your_endpoint/
  [
    {
      "name": "name",
      "email": "email",
      "password": "password",
      "description": "description"
    },
    {
      "name": "name",
      "email": "email",
      "password": "password",
      "description": "description"
    }
  ]
  1. GET http://your_endpoint/{id}
    {
      "name": "name",
      "email": "email",
      "password": "password",
      "description": "description"
    }
  1. POST http://your_endpoint/
  2. PUT http://your_endpoint/{id}
    {
      "name": "name",
      "email": "email",
      "password": "password",
      "description": "description"
    }
  1. DELETE http://your_endpoint/{id}

What's Next

Add select , multiselect and file options for forms.

About

javascript plugin for creating tables complete with CRUD form using vue.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published