diff --git a/demo/apps/apijson_demo/templates/index.html b/demo/apps/apijson_demo/templates/index.html
index 2e630a4..ac3c029 100644
--- a/demo/apps/apijson_demo/templates/index.html
+++ b/demo/apps/apijson_demo/templates/index.html
@@ -28,7 +28,7 @@
     <Row v-if="tab_current==='tab_get'">
         <i-col span="3"><div align="center"><strong>apijson get</strong> request examples</div></i-col>
         <i-col span="8">
-            <i-select v-model="request_data">
+            <i-select v-model="select_current">
                 <i-option v-for="item in request_get" :value="item.value" :key="item.value">{ item.label }</i-option>
             </i-select>
         </i-col>
@@ -41,13 +41,12 @@
     <Row v-if="tab_current==='tab_head'">
         <i-col span="3"><div align="center"><strong>apijson head</strong> request examples</div></i-col>
         <i-col span="8">
-            <i-select v-model="request_data">
+            <i-select v-model="select_current">
                 <i-option v-for="item in request_head" :value="item.value" :key="item.value">{ item.label }</i-option>
             </i-select>
         </i-col>
     </Row>
 
-
     <Row v-if="tab_current==='tab_post'">
             <i-col span="3"><div align="center">POST URL</div></i-col>
             <i-col span="8"><i-input value="/apijson/post" readonly/></i-col>
@@ -55,7 +54,7 @@
     <Row v-if="tab_current==='tab_post'">
         <i-col span="3"><div align="center"><strong>apijson post</strong> request examples</div></i-col>
         <i-col span="8">
-            <i-select v-model="request_data">
+            <i-select v-model="select_current">
                 <i-option v-for="item in request_post" :value="item.value" :key="item.value">{ item.label }</i-option>
             </i-select>
         </i-col>
@@ -68,7 +67,7 @@
     <Row v-if="tab_current==='tab_put'">
         <i-col span="3"><div align="center"><strong>apijson put</strong> request examples</div></i-col>
         <i-col span="8">
-            <i-select v-model="request_data">
+            <i-select v-model="select_current">
                 <i-option v-for="item in request_put" :value="item.value" :key="item.value">{ item.label }</i-option>
             </i-select>
         </i-col>
@@ -81,7 +80,7 @@
     <Row v-if="tab_current==='tab_delete'">
         <i-col span="3"><div align="center"><strong>apijson delete</strong> request examples</div></i-col>
         <i-col span="8">
-            <i-select v-model="request_data">
+            <i-select v-model="select_current">
                 <i-option v-for="item in request_delete" :value="item.value" :key="item.value">{ item.label }</i-option>
             </i-select>
         </i-col>
@@ -108,6 +107,7 @@
         request_put : {{=request_put_json}},
         request_delete : {{=request_delete_json}},
         request_data : "",
+        select_current : "",
         can_post : true,
         response_data : "",
         tab_current : "tab_get",
@@ -122,6 +122,7 @@
     methods: {
         init_default: function(){
             vm.request_data = vm.request_get[0].value
+            vm.select_current = vm.request_data
         },
         post_request_data: function(){
             $.ajax({
@@ -134,7 +135,6 @@
                     vm.can_post = false
                 }
             })
-
         },
         login: function(){window.location.href="{{=url_for('uliweb_apps.login.views.login')}}"},
         logout: function(){window.location.href="{{=url_for('uliweb_apps.login.views.logout')}}"}
@@ -159,7 +159,16 @@
             else if (n=="tab_delete") {
                 vm.request_data = vm.request_delete[0].value
             }
+            vm.select_current = vm.request_data
             vm.response_data = ""
+        },
+        select_current : function(n,o){
+            if (n!=null && n!="" && n!==vm.request_data) {
+                vm.request_data = n
+            }
+            else {
+                vm.select_current = vm.request_data
+            }
         }
     }
 })
diff --git a/demo/apps/tables/templates/vue/inc_apijson_table.html b/demo/apps/tables/templates/vue/inc_apijson_table.html
deleted file mode 100644
index c7bc3c6..0000000
--- a/demo/apps/tables/templates/vue/inc_apijson_table.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-Vue.component('apijson-table', {
-    delimiters: ['{', '}'],
-    props: ["table_name"],
-    template: `<div>
-    <i-table stripe border :columns="tcolumns" :data="tlist" @on-sort-change="table_on_sort_change"></i-table>
-    <page :total="total" :page-size="query_count" :current.sync="current_page" :page-size-opts="[10, 20, 50, 100]" show-sizer @on-change="page_on_change" @on-page-size-change="page_on_page_size_change"></page>
-</div>`,
-    data: function(){
-        return {
-            tcolumns:[
-                {title:'#',key:'id'}
-            ],
-            tcolumns_init: false,
-            tlist:[],
-            query_count: 10,
-            current_page: 1,
-            total: 0,
-            sort_key: "id",
-            sort_order: "-"
-        }
-    },
-    methods: {
-        update_list: function(){
-            var thisp = this
-            var arr_params = {
-                "@count":thisp.query_count,
-                "@page":thisp.current_page-1,
-                "@query":2
-            }
-            arr_params[this.table_name] = {
-                "@order":thisp.sort_key+thisp.sort_order,
-                "@role":"{{=role}}"
-            }
-            var params = {
-                "[]":arr_params,
-                "total@":"/[]/total"
-            }
-            $.ajax({
-                type: "POST",
-                url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}",
-                contentType: 'application/json',
-                data: JSON.stringify(params),
-                success: function (data) {
-                    if (data.code==200) {
-                        var arr = data["[]"]
-                        if (!thisp.tcolumns_init) {
-                            if (arr.length>0) {
-                                var item = arr[0]
-                                for (var k in item){
-                                    if (k!="id") {
-                                        thisp.tcolumns.push({title:k,key:k})
-                                    }
-                                }
-                                thisp.tcolumns_init = true
-                            }
-                        }
-                        thisp.tlist = arr
-                        thisp.total = data.total
-                    }
-                }
-            })
-        },
-        table_on_sort_change: function(){
-
-        },
-        page_on_change: function(data) {
-            this.update_list()
-        },
-        page_on_page_size_change: function(data) {
-            this.query_count = data
-            this.current_page = 0
-            this.update_list()
-        }
-    },
-    mounted: function(){
-        this.update_list()
-    }
-})
-</script>
diff --git a/uliweb_apijson/apijson/templates/vue/inc_apijson_table.html b/uliweb_apijson/apijson/templates/vue/inc_apijson_table.html
new file mode 100644
index 0000000..2ed75a6
--- /dev/null
+++ b/uliweb_apijson/apijson/templates/vue/inc_apijson_table.html
@@ -0,0 +1,189 @@
+<script>
+Vue.component('apijson-table', {
+    delimiters: ['{', '}'],
+    props: ["table_name"],
+    template: `<div>
+    <i-table stripe border :columns="tcolumns" :data="tlist" @on-sort-change="table_on_sort_change"></i-table>
+    <page :total="total" :page-size="query_count" :current.sync="current_page" :page-size-opts="[10, 20, 50, 100]" show-sizer @on-change="page_on_change" @on-page-size-change="page_on_page_size_change"></page>
+    <modal v-model="modal_view" title="View">
+        <i-form @submit.native.prevent :label-width="80">
+            <form-item v-for="item in view_items" :key="item.key" :label="item.key">
+                <i-input v-if="typeof item.value !=='boolean'" v-model="item.value" :readonly=true></i-input>
+                <checkbox v-if="typeof item.value ==='boolean'" v-model="item.value" disabled></checkbox>
+            </form-item>
+        </i-form>
+    </modal>
+    <modal v-model="modal_delete" title="Confirm to delete" @on-ok="real_remove">
+        <p>Confirm to delete #{delete_params.row&&delete_params.row.id} in table '{table_name}'?</p>
+    </modal>
+</div>`,
+    data: function(){
+        var thisp = this
+        return {
+            modal_view: false,
+            view_items: [],
+            modal_delete: false,
+            delete_params:{},
+            tcolumns: [
+                {title:'#',key:'id',width:80},
+                {
+                    title: 'Action',
+                    width: 140,
+                    render: (h, params) => {
+                        return h('div', [
+                            h('Button', {
+                                props: {
+                                    type: 'primary',
+                                    size: 'small'
+                                },
+                                style: {
+                                    marginRight: '5px'
+                                },
+                                on: {
+                                    click: function(){
+                                        thisp.show(params)
+                                    }
+                                }
+                            }, 'View'),
+                            h('Button', {
+                                props: {
+                                    type: 'error',
+                                    size: 'small'
+                                },
+                                on: {
+                                    click: function(){
+                                        thisp.remove(params)
+                                    }
+                                }
+                            }, 'Delete')
+                        ]);
+                    }
+                }
+            ],
+            tcolumns_init: false,
+            tlist:[],
+            query_count: 10,
+            current_page: 1,
+            total: 0,
+            sort_key: "id",
+            sort_order: "-"
+        }
+    },
+    methods: {
+        update_list: function(){
+            var thisp = this
+            var arr_params = {
+                "@count":thisp.query_count,
+                "@page":thisp.current_page-1,
+                "@query":2
+            }
+            arr_params[this.table_name] = {
+                "@order":thisp.sort_key+thisp.sort_order,
+                "@role":"{{=role}}"
+            }
+            var params = {
+                "[]":arr_params,
+                "total@":"/[]/total"
+            }
+            $.ajax({
+                type: "POST",
+                url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}",
+                contentType: 'application/json',
+                data: JSON.stringify(params),
+                success: function (data) {
+                    if (data.code==200) {
+                        var arr = data["[]"]
+                        if (!thisp.tcolumns_init) {
+                            if (arr.length>0) {
+                                var item = arr[0]
+                                for (var k in item){
+                                    if (k!="id") {
+                                        var col = {title:k,key:k}
+                                        if (typeof item[k] ==="boolean") {
+                                            col["width"] = 80
+                                        }
+                                        else if (typeof item[k] ==="number") {
+                                            col["width"] = 100
+                                        }
+                                        thisp.tcolumns.push(col)
+                                    }
+                                }
+                                thisp.tcolumns_init = true
+                            }
+                        }
+                        thisp.tlist = arr
+                        thisp.total = data.total
+                    }
+                }
+            })
+        },
+        show: function(params){
+            var row = params.row
+            this.view_items = []
+            this.view_items.push({key:"id",value:row.id})
+            for (var k in row){
+                if (k!="id" && k[0]!="_") {
+                    value = row[k]
+                    this.view_items.push({key:k,value:value})
+                }
+            }
+            this.modal_view = true
+        },
+        remove: function(params){
+            this.delete_params = params
+            this.modal_delete = true
+        },
+        real_remove: function(){
+            var thisp = this
+            var params = {
+                "@tag": thisp.table_name
+            }
+            params[thisp.table_name] = {
+                "id": thisp.delete_params.row.id
+            }
+            $.ajax({
+                type: "POST",
+                url: "{{=url_for('uliweb_apijson.apijson.views.ApiJson.delete')}}",
+                contentType: 'application/json',
+                data: JSON.stringify(params),
+                success: function (data) {
+                    if (data.code!=200){
+                        thisp.$Notice.error({
+                            title: 'error when remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
+                            desc: data.msg
+                        })
+                        return
+                    }
+                    var result = data[thisp.table_name]
+                    if (result.code!=200){
+                        thisp.$Notice.error({
+                            title: 'error when remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
+                            desc: result.msg
+                        })
+                        return
+                    }
+                    thisp.$Notice.success({
+                        title: 'success remove #'+thisp.delete_params.row.id+' in table '+thisp.table_name,
+                        desc: result.msg
+                    });
+                    thisp.update_list()
+                }
+            })
+        },
+        table_on_sort_change: function(){
+
+        },
+        page_on_change: function(data) {
+            this.update_list()
+        },
+        page_on_page_size_change: function(data) {
+            this.query_count = data
+            this.current_page = 0
+            this.update_list()
+        }
+    },
+    mounted: function(){
+        this.update_list()
+    }
+})
+</script>