w-component-vue 2.5.26 → 2.5.27

package/src/AppZoneWTableDyn.vue

@@ -1,888 +1,971 @@
-<template>
-    <div class="bkh">
-
-
-        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-table-dyn</span></div>
-
-
-        <div style="font-size:0.9rem; margin-bottom:10px;">
-            <span style="margin-right:10px;">Wrap from:</span>
-            <a href="//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp=w-aggrid-vue-dyn" target="_blank" rel="noreferrer noopener">w-aggrid-vue-dyn</a>
-        </div>
-
-
-        <div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'default'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'name & description'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'no enableInfor'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :enableInfor="false"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'no enableMenu'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :enableMenu="false"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'opt.kpHead'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt3"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'sortColIds (sort by order)'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :sortColIds="'order'"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'hideIds (hide mappingId)'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :hideIds="'mappingId'"
-                    _hideIds="['id','mappingId','order']"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'fixIds (fix id)'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :fixIds="'id'"
-                    _fixIds="['id','mappingId']"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'removeIdsWhenDownload (remove id, mappingId, order, isActive)'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :removeIdsWhenDownload="['id','mappingId','order','isActive']"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot infor (name & description)'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:infor="{infor}">
-                        <div msg="外層有flex故添加一層div避免影響">
-                            <div style="display:flex; align-items:center;">
-                                <div style="color:#62f;">{{infor.name}}</div>
-                                <div style="margin-left:5px; padding:0px 7px; color:#fff; font-size:0.7rem; border-radius:30px; background:#f26;">Agent</div>
-                                <div style="margin-left:5px; padding:0px 7px; color:#fff; font-size:0.7rem; border-radius:30px; background:#fa6;">Dealer</div>
-                            </div>
-                            <div style="color:#888; font-size:0.7rem;">[{{infor.description}}]</div>
-                        </div>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot btns-left'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:btns-left="props">
-                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
-                            <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
-                            <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
-                            <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
-                            <option :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`" value="3" :disabled="!props.editable">Ipsum</option>
-                        </select>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot btns-right'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:btns-right="props">
-                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
-                            <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
-                            <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
-                            <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
-                            <option :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`" value="3" :disabled="!props.editable">Ipsum</option>
-                        </select>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot cell-render'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:cell-render="props">
-                        <span style="color:#aaa;" v-if="props.key==='make'">{{ props.value }}</span>
-                        <span style="color:#2c6;" v-else-if="props.key==='model'">{{ props.value }}</span>
-                        <span style="color:#f26;" v-else-if="props.key==='price'">{{ props.value }}</span>
-                        <span style="color:#aaa;" v-else>{{ props.value }}</span>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot cell-tooltip'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:cell-tooltip="props">
-                        <div v-if="props.key==='make'"><div style="font-size:9pt; color:#ecf;">[生產製造商]</div>{{ props.value }}</div>
-                        <div v-else-if="props.key==='model'"><div style="font-size:9pt; color:#6f9;">[車款型號]</div>{{ props.value }}</div>
-                        <div v-else-if="props.key==='price'"><div style="font-size:9pt; color:#fa6;">[虛擬販售價格]</div>{{ props.value }}</div>
-                        <div v-else>{{ props.value }}</div>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot head-render'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:head-render="props">
-                        <span v-if="props.key==='make'"><span style="color:#aaa;">生產製造商</span><sup>{{ props.value }}</sup></span>
-                        <span v-else-if="props.key==='model'"><span style="color:#2c6;">車款型號</span><sup>{{ props.value }}</sup></span>
-                        <span v-else-if="props.key==='price'"><span style="color:#f26;">虛擬販售價格</span><sup>{{ props.value }}</sup></span>
-                        <span v-else>{{ props.value }}</span>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'slot head-tooltip'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:head-tooltip="props">
-                        <div v-if="props.key==='make'"><div style="font-size:8pt; font-weight:bold; color:#6fe;">[{{ props.value }}]</div><div>生產製造商</div></div>
-                        <div v-else-if="props.key==='model'"><div style="font-size:8pt; font-weight:bold; color:#6fe;">[{{ props.value }}]</div><div>車款型號</div></div>
-                        <div v-else-if="props.key==='price'"><div style="font-size:8pt; font-weight:bold; color:#6fe;">[{{ props.value }}]</div><div>虛擬販售價格</div></div>
-                        <div v-else>{{ props.value }}</div>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'opt.kpCellFormat'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt8"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & no enableInfor'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :enableInfor="false"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & no enableMenu'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :enableMenu="false"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & inforPaddingStyle & menuBackgroundColor'"
-                ></demolink>
-
-                <div style="background:#fafafa;">
-                    <w-table-dyn
-                        style="width:600px; height:400px;"
-                        :name="WTableDyn.name"
-                        :description="WTableDyn.description"
-                        :opt="WTableDyn.opt2"
-                        :editable="true"
-                        :inforPaddingStyle="{top:15,right:20,bottom:20,left:20}"
-                        :menuBackgroundColor="'#eaeaea'"
-                        @success="evSuccess"
-                        @error="evError"
-                    ></w-table-dyn>
-                </div>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & checkId'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    :checkId="'id'"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & opt.beforeAddRow'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt4"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & opt.kpConvertKeysWhenUploadData'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt5"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & opt.optForUploadData'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt6"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & language & textLabelDataName & textPlaceholderDataName & textLabelDataDescription & textPlaceholderDataDescription'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    :language="'zh-tw'"
-                    :textLabelDataName="'名稱'"
-                    :textPlaceholderDataName="'請輸入數據名稱'"
-                    :textLabelDataDescription="'說明'"
-                    :textPlaceholderDataDescription="'請輸入數據說明'"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & language & checkId & tooltipAddRow & tooltipDeleteSelectedRows & tooltipDownloadExcelFile & tooltipDownloadExcelFileForDisplay & tooltipUploadExcelFile & uploadModeTitle & uploadModeTextForReplace & uploadModeTextForAppend'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    :language="'zh-tw'"
-                    :checkId="'id'"
-                    :tooltipAddRow="'新增數據'"
-                    :tooltipDeleteSelectedRows="'刪除選擇數據'"
-                    :tooltipDownloadExcelFile="'下載數據成為 Excel(xlsx) 檔案'"
-                    :tooltipDownloadExcelFileForDisplay="'下載過濾後數據成為 Excel(xlsx) 檔案'"
-                    :tooltipUploadExcelFile="'上傳 Excel(xlsx) 數據檔案'"
-                    :uploadModeTitle="'請選擇上傳模式：'"
-                    :uploadModeTextForReplace="'取代'"
-                    :uploadModeTextForAppend="'於最後加入'"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & checkId & successMsgFromAddRow & errorMsgFromAddRow & errorMsgFromRemoveRow & errorMsgFromUploadEmptyData & errorMsgFromUploadData & successMsgFromDownloadData & errorMsgFromDownloadData'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt2"
-                    :editable="true"
-                    :checkId="'id'"
-                    :successMsgFromAddRow="'新增數據成功'"
-                    :errorMsgFromAddRow="'無法新增數據'"
-                    :errorMsgFromRemoveRow="'移除數據失敗'"
-                    :successMsgFromUploadData="'上傳數據成功'"
-                    :errorMsgFromUploadData="'無法上傳數據'"
-                    :errorMsgFromUploadEmptyData="'上傳檔案中無有效數據'"
-                    :successMsgFromDownloadData="'下載檔案成功'"
-                    :errorMsgFromDownloadData="'無法下載檔案'"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & slot btns-right'"
-                ></demolink>
-
-                <w-table-dyn
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt1"
-                    :editable="true"
-                    @success="evSuccess"
-                    @error="evError"
-                >
-                    <template v-slot:btns-right="props">
-                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
-                            <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
-                            <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
-                            <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
-                            <option :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`" value="3" :disabled="!props.editable">Ipsum</option>
-                        </select>
-                    </template>
-                </w-table-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-table-dyn'"
-                    :casename="'editable & checkId & opt.modifyDataWhenSave & save(call cmp. method) & errorMsgFromNoName & errorMsgFromNoData'"
-                ></demolink>
-
-                <w-button-chip :text="'save data'" :borderRadius="4" @click="saveData"></w-button-chip>
-
-                <w-table-dyn
-                    ref="table"
-                    style="width:600px; height:400px;"
-                    :name="WTableDyn.name"
-                    :description="WTableDyn.description"
-                    :opt="WTableDyn.opt7"
-                    :editable="true"
-                    :checkId="'id'"
-                    :errorMsgFromNoName="'未輸入數據名稱'"
-                    :errorMsgFromNoData="'未給予有效數據'"
-                    @success="evSuccess"
-                    @error="evError"
-                ></w-table-dyn>
-
-                <pre id="disp-save-data" style="font-size:0.7rem; width:600px; height:200px; overflow-y:auto;"></pre>
-
-            </div>
-
-
-        </div>
-
-
-    </div>
-</template>
-
-<script>
-import demolink from './components/demolink.vue'
-import WTableDyn from './components/WTableDyn.vue'
-import WButtonChip from './components/WButtonChip.vue'
-
-
-export default {
-    components: {
-        demolink,
-        WTableDyn,
-        WButtonChip,
-    },
-    props: {
-    },
-    data: function() {
-        let keys1 = ['make', 'model', 'price']
-        let kpHeadFilterType1 = { //default: num (num,text,time,set)
-            'make': 'text',
-            'model': 'text',
-            'price': 'num',
-        }
-        let rows1 = [
-            { make: 'Toyota', model: 'Celica', price: 35000 },
-            { make: 'Ford', model: 'Mondeo', price: 32000 },
-            { make: 'Porsche', model: 'Boxter', price: 72000 },
-            { make: 'BMW', model: 'Sedan', price: 66000 },
-            { make: 'Nissan', model: 'March', price: 61000 },
-            { make: 'Lexus', model: 'RX', price: 56000 },
-            { make: 'Audi', model: 'A6 Allroad', price: 45000 },
-            { make: 'Mazda', model: 'MX-5', price: 36000 },
-            { make: 'Mercedes-Benz', model: 'Cabriolet', price: 86000 },
-            { make: 'Volkswagen', model: 'Beetle', price: 68000 },
-            { make: 'Honda', model: 'City', price: 69000 },
-            { make: 'Volvo', model: 'S60', price: 71000 },
-            { make: 'Subaru', model: 'BRZ', price: 48000 },
-        ]
-        let keys2 = ['id', 'mappingId', 'order', 'make', 'model', 'price', 'isActive']
-        let kpHeadFilterType2 = { //default: num (num,text,time,set)
-            'id': 'text',
-            'mappingId': 'text',
-            'order': 'num',
-            'make': 'text',
-            'model': 'text',
-            'price': 'num',
-            'isActive': 'text',
-        }
-        let rows2 = [
-            { id: 'id-Toyota', mappingId: 'car_table', order: 0, make: 'Toyota', model: 'Celica', price: 35000, isActive: 'y' },
-            { id: 'id-Ford', mappingId: 'car_table', order: 1, make: 'Ford', model: 'Mondeo', price: 32000, isActive: 'y' },
-            { id: 'id-Porsche', mappingId: 'car_table', order: 2, make: 'Porsche', model: 'Boxter', price: 72000, isActive: 'y' },
-            { id: 'id-BMW', mappingId: 'car_table', order: 11, make: 'BMW', model: 'Sedan', price: 66000, isActive: 'y' },
-            { id: 'id-Nissan', mappingId: 'car_table', order: 8, make: 'Nissan', model: 'March', price: 61000, isActive: 'y' },
-            { id: 'id-Lexus', mappingId: 'car_table', order: 4, make: 'Lexus', model: 'RX', price: 56000, isActive: 'y' },
-            { id: 'id-Audi', mappingId: 'car_table', order: 5, make: 'Audi', model: 'A6 Allroad', price: 45000, isActive: 'y' },
-            { id: 'id-Mazda', mappingId: 'car_table', order: 6, make: 'Mazda', model: 'MX-5', price: 36000, isActive: 'y' },
-            { id: 'id-Mercedes', mappingId: 'car_table', order: 7, make: 'Mercedes-Benz', model: 'Cabriolet', price: 86000, isActive: 'y' },
-            { id: 'id-Volkswagen', mappingId: 'car_table', order: 9, make: 'Volkswagen', model: 'Beetle', price: 68000, isActive: 'y' },
-            { id: 'id-Honda', mappingId: 'car_table', order: 10, make: 'Honda', model: 'City', price: 69000, isActive: 'y' },
-            { id: 'id-Volvo', mappingId: 'car_table', order: 12, make: 'Volvo', model: 'S60', price: 71000, isActive: 'y' },
-            { id: 'id-Subaru', mappingId: 'car_table', order: 3, make: 'Subaru', model: 'BRZ', price: 48000, isActive: 'y' },
-        ]
-        let keys3 = ['id', 'mappingId', 'order', 'make', 'model', 'price', 'isActive']
-        let kpHeadFilterType3 = { //default: num (num,text,time,set)
-            'id': 'text',
-            'mappingId': 'text',
-            'order': 'num',
-            'make': 'text',
-            'model': 'text',
-            'price': 'num',
-            'isActive': 'text',
-        }
-        let rows3 = [
-            { id: '', mappingId: '', order: 0, make: 'Toyota', model: 'Celica', price: 35000 },
-            { id: '', mappingId: '', order: 1, make: 'Ford', model: 'Mondeo', price: 32000 },
-            { id: '', mappingId: '', order: 2, make: 'Porsche', model: 'Boxter', price: 72000 },
-            { id: '', mappingId: '', order: 11, make: 'BMW', model: 'Sedan', price: 66000 },
-            { id: '', mappingId: '', order: 8, make: 'Nissan', model: 'March', price: 61000 },
-            { id: '', mappingId: '', order: 4, make: 'Lexus', model: 'RX', price: 56000 },
-            { id: '', mappingId: '', order: 5, make: 'Audi', model: 'A6 Allroad', price: 45000 },
-            { id: '', mappingId: '', order: 6, make: 'Mazda', model: 'MX-5', price: 36000 },
-            { id: '', mappingId: '', order: 7, make: 'Mercedes-Benz', model: 'Cabriolet', price: 86000 },
-            { id: '', mappingId: '', order: 9, make: 'Volkswagen', model: 'Beetle', price: 68000 },
-            { id: '', mappingId: '', order: 10, make: 'Honda', model: 'City', price: 69000 },
-            { id: '', mappingId: '', order: 12, make: 'Volvo', model: 'S60', price: 71000 },
-            { id: '', mappingId: '', order: 3, make: 'Subaru', model: 'BRZ', price: 48000 },
-        ]
-        return {
-            'WTableDyn': {
-                'name': 'Car Price',
-                'description': 'The relationship between different car types and prices',
-                'opt1': {
-                    keys: keys1,
-                    kpHeadFilterType: kpHeadFilterType1,
-                    rows: rows1,
-                },
-                'opt2': {
-                    keys: keys2,
-                    kpHeadFilterType: kpHeadFilterType2,
-                    rows: rows2,
-                },
-                'opt3': {
-                    keys: keys2,
-                    kpHeadFilterType: kpHeadFilterType2,
-                    rows: rows2,
-                    kpHead: {
-                        id: '主鍵',
-                        mappingId: '所屬主鍵',
-                        order: '順序',
-                        make: 'Ecirp',
-                        model: 'Ledom',
-                        price: 'Ecirp',
-                        isActive: '有效',
-                    },
-                },
-                'opt4': {
-                    keys: keys2,
-                    kpHeadFilterType: kpHeadFilterType2,
-                    rows: rows2,
-                    beforeAddRow: function(newRow) {
-                        newRow.id = 'id-random-' + Math.random()
-                        return newRow
-                    },
-                },
-                'opt5': {
-                    keys: keys2,
-                    kpHeadFilterType: kpHeadFilterType2,
-                    rows: rows2,
-                    kpConvertKeysWhenUploadData: {
-                        makeTemp: 'make',
-                        modelTemp: 'model',
-                        priceTemp: 'price',
-                    },
-                },
-                'opt6': {
-                    keys: keys2,
-                    rows: rows2,
-                    optForUploadData: { //input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
-                        pathItems: null,
-                        beforeUpload: null,
-                        parseSheetInd: 1, //取第2個sheet, 預設0(取第1個sheet)
-                    },
-                },
-                'opt7': {
-                    keys: keys3,
-                    kpHeadFilterType: kpHeadFilterType3,
-                    rows: rows3,
-                    modifyDataWhenSave: function(rows) {
-                        console.log('modifyDataWhenSave', rows)
-                        for (let k = 0; k < rows.length; k++) {
-                            let v = rows[k]
-                            v.id = 'id-random-' + Math.random()
-                            v.mappingId = 'auto_car_table'
-                            v.order = k
-                            v.isActive = 'y'
-                        }
-                        return rows
-                    },
-                },
-                'opt8': {
-                    keys: keys1,
-                    kpHeadFilterType: kpHeadFilterType1,
-                    rows: rows1,
-                    kpCellFormat: { //格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
-                        'make': function(value, key, row, params) {
-                            //空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
-                            if (value === null || value === undefined || value === '') {
-                                return null
-                            }
-                            return String(value).toUpperCase()
-                        },
-                        'price': function(value, key, row, params) {
-                            //空值不可直接Number(), 否則''與null會變成0.00
-                            if (value === null || value === undefined || value === '') {
-                                return null
-                            }
-                            return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                        },
-                    },
-                },
-            },
-            'actions': [
-            ],
-        }
-    },
-    methods: {
-        evSuccess: function(msg) {
-            console.log('evSuccess:', msg)
-        },
-        evError: function(msg) {
-            console.log('evError:', msg)
-        },
-        saveData: function() {
-            let data = this.$refs.table.save()
-            document.querySelector('#disp-save-data').innerHTML = JSON.stringify(data, null, 2)
-            console.log('saveData:', data)
-        },
-    },
-}
-</script>
-
-<style scoped>
-</style>
+<template>
+    <div class="bkh">
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-table-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Wrap from:</span>
+            <a href="//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp=w-aggrid-vue-dyn" target="_blank" rel="noreferrer noopener">w-aggrid-vue-dyn</a>
+        </div>
+
+
+        <div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'name & description'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'no enableInfor'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :enableInfor="false"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'no enableMenu'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :enableMenu="false"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'opt.kpHead'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt3"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'sortColIds (sort by order)'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :sortColIds="'order'"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'hideIds (hide mappingId)'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :hideIds="'mappingId'"
+                    _hideIds="['id','mappingId','order']"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'fixIds (fix id)'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :fixIds="'id'"
+                    _fixIds="['id','mappingId']"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'removeIdsWhenDownload (remove id, mappingId, order, isActive)'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :removeIdsWhenDownload="['id','mappingId','order','isActive']"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot infor (name & description)'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:infor="{infor}">
+                        <div msg="外層有flex故添加一層div避免影響">
+                            <div style="display:flex; align-items:center;">
+                                <div style="color:#62f;">{{infor.name}}</div>
+                                <div style="margin-left:5px; padding:0px 7px; color:#fff; font-size:0.7rem; border-radius:30px; background:#f26;">Agent</div>
+                                <div style="margin-left:5px; padding:0px 7px; color:#fff; font-size:0.7rem; border-radius:30px; background:#fa6;">Dealer</div>
+                            </div>
+                            <div style="color:#888; font-size:0.7rem;">[{{infor.description}}]</div>
+                        </div>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot btns-left'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:btns-left="props">
+                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
+                            <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
+                            <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
+                            <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
+                            <option :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`" value="3" :disabled="!props.editable">Ipsum</option>
+                        </select>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot btns-right'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:btns-right="props">
+                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
+                            <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
+                            <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
+                            <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
+                            <option :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`" value="3" :disabled="!props.editable">Ipsum</option>
+                        </select>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot cell-render'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:cell-render="props">
+                        <span style="color:#aaa;" v-if="props.key==='make'">{{ props.value }}</span>
+                        <span style="color:#2c6;" v-else-if="props.key==='model'">{{ props.value }}</span>
+                        <span style="color:#f26;" v-else-if="props.key==='price'">{{ props.value }}</span>
+                        <span style="color:#aaa;" v-else>{{ props.value }}</span>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot cell-tooltip'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:cell-tooltip="props">
+                        <div v-if="props.key==='make'"><div style="font-size:9pt; color:#ecf;">[生產製造商]</div>{{ props.value }}</div>
+                        <div v-else-if="props.key==='model'"><div style="font-size:9pt; color:#6f9;">[車款型號]</div>{{ props.value }}</div>
+                        <div v-else-if="props.key==='price'"><div style="font-size:9pt; color:#fa6;">[虛擬販售價格]</div>{{ props.value }}</div>
+                        <div v-else>{{ props.value }}</div>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot head-render'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:head-render="props">
+                        <span v-if="props.key==='make'"><span style="color:#aaa;">生產製造商</span><sup>{{ props.value }}</sup></span>
+                        <span v-else-if="props.key==='model'"><span style="color:#2c6;">車款型號</span><sup>{{ props.value }}</sup></span>
+                        <span v-else-if="props.key==='price'"><span style="color:#f26;">虛擬販售價格</span><sup>{{ props.value }}</sup></span>
+                        <span v-else>{{ props.value }}</span>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'slot head-tooltip'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:head-tooltip="props">
+                        <div v-if="props.key==='make'"><div style="font-size:8pt; font-weight:bold; color:#6fe;">[{{ props.value }}]</div><div>生產製造商</div></div>
+                        <div v-else-if="props.key==='model'"><div style="font-size:8pt; font-weight:bold; color:#6fe;">[{{ props.value }}]</div><div>車款型號</div></div>
+                        <div v-else-if="props.key==='price'"><div style="font-size:8pt; font-weight:bold; color:#6fe;">[{{ props.value }}]</div><div>虛擬販售價格</div></div>
+                        <div v-else>{{ props.value }}</div>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'opt.kpCellFormat'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt8"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & no enableInfor'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :enableInfor="false"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & no enableMenu'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :enableMenu="false"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & inforPaddingStyle & menuBackgroundColor'"
+                ></demolink>
+
+                <div style="background:#fafafa;">
+                    <w-table-dyn
+                        style="width:600px; height:400px;"
+                        :name="WTableDyn.name"
+                        :description="WTableDyn.description"
+                        :opt="WTableDyn.opt2"
+                        :editable="true"
+                        :inforPaddingStyle="{top:15,right:20,bottom:20,left:20}"
+                        :menuBackgroundColor="'#eaeaea'"
+                        @success="evSuccess"
+                        @error="evError"
+                    ></w-table-dyn>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & checkId'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    :checkId="'id'"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & opt.beforeAddRow'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt4"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & opt.kpConvertKeysWhenUploadData'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt5"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & opt.optForUploadData'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt6"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & opt.optForUploadData.uploadMode (append, no popup)'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt9"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & tooltipDownloadExcelFileForHead (empty rows, download headers) & useHeadWhenDownload & opt.kpConvertKeysWhenUploadData'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt10"
+                    :editable="true"
+                    :tooltipDownloadExcelFileForHead="'下載表頭範本'"
+                    :useHeadWhenDownload="true"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & language & textLabelDataName & textPlaceholderDataName & textLabelDataDescription & textPlaceholderDataDescription'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    :language="'zh-tw'"
+                    :textLabelDataName="'名稱'"
+                    :textPlaceholderDataName="'請輸入數據名稱'"
+                    :textLabelDataDescription="'說明'"
+                    :textPlaceholderDataDescription="'請輸入數據說明'"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & language & checkId & tooltipAddRow & tooltipDeleteSelectedRows & tooltipDownloadExcelFile & tooltipDownloadExcelFileForDisplay & tooltipUploadExcelFile & uploadModeTitle & uploadModeTextForReplace & uploadModeTextForAppend'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    :language="'zh-tw'"
+                    :checkId="'id'"
+                    :tooltipAddRow="'新增數據'"
+                    :tooltipDeleteSelectedRows="'刪除選擇數據'"
+                    :tooltipDownloadExcelFile="'下載數據成為 Excel(xlsx) 檔案'"
+                    :tooltipDownloadExcelFileForDisplay="'下載過濾後數據成為 Excel(xlsx) 檔案'"
+                    :tooltipUploadExcelFile="'上傳 Excel(xlsx) 數據檔案'"
+                    :uploadModeTitle="'請選擇上傳模式：'"
+                    :uploadModeTextForReplace="'取代'"
+                    :uploadModeTextForAppend="'於最後加入'"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & checkId & successMsgFromAddRow & errorMsgFromAddRow & errorMsgFromRemoveRow & errorMsgFromUploadEmptyData & errorMsgFromUploadData & successMsgFromDownloadData & errorMsgFromDownloadData'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt2"
+                    :editable="true"
+                    :checkId="'id'"
+                    :successMsgFromAddRow="'新增數據成功'"
+                    :errorMsgFromAddRow="'無法新增數據'"
+                    :errorMsgFromRemoveRow="'移除數據失敗'"
+                    :successMsgFromUploadData="'上傳數據成功'"
+                    :errorMsgFromUploadData="'無法上傳數據'"
+                    :errorMsgFromUploadEmptyData="'上傳檔案中無有效數據'"
+                    :successMsgFromDownloadData="'下載檔案成功'"
+                    :errorMsgFromDownloadData="'無法下載檔案'"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & slot btns-right'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt1"
+                    :editable="true"
+                    @success="evSuccess"
+                    @error="evError"
+                >
+                    <template v-slot:btns-right="props">
+                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
+                            <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
+                            <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
+                            <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
+                            <option :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`" value="3" :disabled="!props.editable">Ipsum</option>
+                        </select>
+                    </template>
+                </w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & opt.kpCellFormat & no useCellFormatWhenDownload'"
+                ></demolink>
+
+                <w-table-dyn
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt8"
+                    :editable="true"
+                    :useCellFormatWhenDownload="false"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-table-dyn'"
+                    :casename="'editable & checkId & opt.modifyDataWhenSave & save(call cmp. method) & errorMsgFromNoName & errorMsgFromNoData'"
+                ></demolink>
+
+                <w-button-chip :text="'save data'" :borderRadius="4" @click="saveData"></w-button-chip>
+
+                <w-table-dyn
+                    ref="table"
+                    style="width:600px; height:400px;"
+                    :name="WTableDyn.name"
+                    :description="WTableDyn.description"
+                    :opt="WTableDyn.opt7"
+                    :editable="true"
+                    :checkId="'id'"
+                    :errorMsgFromNoName="'未輸入數據名稱'"
+                    :errorMsgFromNoData="'未給予有效數據'"
+                    @success="evSuccess"
+                    @error="evError"
+                ></w-table-dyn>
+
+                <pre id="disp-save-data" style="font-size:0.7rem; width:600px; height:200px; overflow-y:auto;"></pre>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WTableDyn from './components/WTableDyn.vue'
+import WButtonChip from './components/WButtonChip.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WTableDyn,
+        WButtonChip,
+    },
+    props: {
+    },
+    data: function() {
+        let keys1 = ['make', 'model', 'price']
+        let kpHeadFilterType1 = { //default: num (num,text,time,set)
+            'make': 'text',
+            'model': 'text',
+            'price': 'num',
+        }
+        let rows1 = [
+            { make: 'Toyota', model: 'Celica', price: 35000 },
+            { make: 'Ford', model: 'Mondeo', price: 32000 },
+            { make: 'Porsche', model: 'Boxter', price: 72000 },
+            { make: 'BMW', model: 'Sedan', price: 66000 },
+            { make: 'Nissan', model: 'March', price: 61000 },
+            { make: 'Lexus', model: 'RX', price: 56000 },
+            { make: 'Audi', model: 'A6 Allroad', price: 45000 },
+            { make: 'Mazda', model: 'MX-5', price: 36000 },
+            { make: 'Mercedes-Benz', model: 'Cabriolet', price: 86000 },
+            { make: 'Volkswagen', model: 'Beetle', price: 68000 },
+            { make: 'Honda', model: 'City', price: 69000 },
+            { make: 'Volvo', model: 'S60', price: 71000 },
+            { make: 'Subaru', model: 'BRZ', price: 48000 },
+        ]
+        let keys2 = ['id', 'mappingId', 'order', 'make', 'model', 'price', 'isActive']
+        let kpHeadFilterType2 = { //default: num (num,text,time,set)
+            'id': 'text',
+            'mappingId': 'text',
+            'order': 'num',
+            'make': 'text',
+            'model': 'text',
+            'price': 'num',
+            'isActive': 'text',
+        }
+        let rows2 = [
+            { id: 'id-Toyota', mappingId: 'car_table', order: 0, make: 'Toyota', model: 'Celica', price: 35000, isActive: 'y' },
+            { id: 'id-Ford', mappingId: 'car_table', order: 1, make: 'Ford', model: 'Mondeo', price: 32000, isActive: 'y' },
+            { id: 'id-Porsche', mappingId: 'car_table', order: 2, make: 'Porsche', model: 'Boxter', price: 72000, isActive: 'y' },
+            { id: 'id-BMW', mappingId: 'car_table', order: 11, make: 'BMW', model: 'Sedan', price: 66000, isActive: 'y' },
+            { id: 'id-Nissan', mappingId: 'car_table', order: 8, make: 'Nissan', model: 'March', price: 61000, isActive: 'y' },
+            { id: 'id-Lexus', mappingId: 'car_table', order: 4, make: 'Lexus', model: 'RX', price: 56000, isActive: 'y' },
+            { id: 'id-Audi', mappingId: 'car_table', order: 5, make: 'Audi', model: 'A6 Allroad', price: 45000, isActive: 'y' },
+            { id: 'id-Mazda', mappingId: 'car_table', order: 6, make: 'Mazda', model: 'MX-5', price: 36000, isActive: 'y' },
+            { id: 'id-Mercedes', mappingId: 'car_table', order: 7, make: 'Mercedes-Benz', model: 'Cabriolet', price: 86000, isActive: 'y' },
+            { id: 'id-Volkswagen', mappingId: 'car_table', order: 9, make: 'Volkswagen', model: 'Beetle', price: 68000, isActive: 'y' },
+            { id: 'id-Honda', mappingId: 'car_table', order: 10, make: 'Honda', model: 'City', price: 69000, isActive: 'y' },
+            { id: 'id-Volvo', mappingId: 'car_table', order: 12, make: 'Volvo', model: 'S60', price: 71000, isActive: 'y' },
+            { id: 'id-Subaru', mappingId: 'car_table', order: 3, make: 'Subaru', model: 'BRZ', price: 48000, isActive: 'y' },
+        ]
+        let keys3 = ['id', 'mappingId', 'order', 'make', 'model', 'price', 'isActive']
+        let kpHeadFilterType3 = { //default: num (num,text,time,set)
+            'id': 'text',
+            'mappingId': 'text',
+            'order': 'num',
+            'make': 'text',
+            'model': 'text',
+            'price': 'num',
+            'isActive': 'text',
+        }
+        let rows3 = [
+            { id: '', mappingId: '', order: 0, make: 'Toyota', model: 'Celica', price: 35000 },
+            { id: '', mappingId: '', order: 1, make: 'Ford', model: 'Mondeo', price: 32000 },
+            { id: '', mappingId: '', order: 2, make: 'Porsche', model: 'Boxter', price: 72000 },
+            { id: '', mappingId: '', order: 11, make: 'BMW', model: 'Sedan', price: 66000 },
+            { id: '', mappingId: '', order: 8, make: 'Nissan', model: 'March', price: 61000 },
+            { id: '', mappingId: '', order: 4, make: 'Lexus', model: 'RX', price: 56000 },
+            { id: '', mappingId: '', order: 5, make: 'Audi', model: 'A6 Allroad', price: 45000 },
+            { id: '', mappingId: '', order: 6, make: 'Mazda', model: 'MX-5', price: 36000 },
+            { id: '', mappingId: '', order: 7, make: 'Mercedes-Benz', model: 'Cabriolet', price: 86000 },
+            { id: '', mappingId: '', order: 9, make: 'Volkswagen', model: 'Beetle', price: 68000 },
+            { id: '', mappingId: '', order: 10, make: 'Honda', model: 'City', price: 69000 },
+            { id: '', mappingId: '', order: 12, make: 'Volvo', model: 'S60', price: 71000 },
+            { id: '', mappingId: '', order: 3, make: 'Subaru', model: 'BRZ', price: 48000 },
+        ]
+        return {
+            'WTableDyn': {
+                'name': 'Car Price',
+                'description': 'The relationship between different car types and prices',
+                'opt1': {
+                    keys: keys1,
+                    kpHeadFilterType: kpHeadFilterType1,
+                    rows: rows1,
+                },
+                'opt2': {
+                    keys: keys2,
+                    kpHeadFilterType: kpHeadFilterType2,
+                    rows: rows2,
+                },
+                'opt3': {
+                    keys: keys2,
+                    kpHeadFilterType: kpHeadFilterType2,
+                    rows: rows2,
+                    kpHead: {
+                        id: '主鍵',
+                        mappingId: '所屬主鍵',
+                        order: '順序',
+                        make: 'Ecirp',
+                        model: 'Ledom',
+                        price: 'Ecirp',
+                        isActive: '有效',
+                    },
+                },
+                'opt4': {
+                    keys: keys2,
+                    kpHeadFilterType: kpHeadFilterType2,
+                    rows: rows2,
+                    beforeAddRow: function(newRow) {
+                        newRow.id = 'id-random-' + Math.random()
+                        return newRow
+                    },
+                },
+                'opt5': {
+                    keys: keys2,
+                    kpHeadFilterType: kpHeadFilterType2,
+                    rows: rows2,
+                    kpConvertKeysWhenUploadData: {
+                        makeTemp: 'make',
+                        modelTemp: 'model',
+                        priceTemp: 'price',
+                    },
+                },
+                'opt6': {
+                    keys: keys2,
+                    rows: rows2,
+                    optForUploadData: { //input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
+                        pathItems: null,
+                        beforeUpload: null,
+                        parseSheetInd: 1, //取第2個sheet, 預設0(取第1個sheet)
+                    },
+                },
+                'opt7': {
+                    keys: keys3,
+                    kpHeadFilterType: kpHeadFilterType3,
+                    rows: rows3,
+                    modifyDataWhenSave: function(rows) {
+                        console.log('modifyDataWhenSave', rows)
+                        for (let k = 0; k < rows.length; k++) {
+                            let v = rows[k]
+                            v.id = 'id-random-' + Math.random()
+                            v.mappingId = 'auto_car_table'
+                            v.order = k
+                            v.isActive = 'y'
+                        }
+                        return rows
+                    },
+                },
+                'opt8': {
+                    keys: keys1,
+                    kpHeadFilterType: kpHeadFilterType1,
+                    rows: rows1,
+                    kpCellFormat: { //格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
+                        'make': function(value, key, row, params) {
+                            //空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
+                            if (value === null || value === undefined || value === '') {
+                                return null
+                            }
+                            return String(value).toUpperCase()
+                        },
+                        'price': function(value, key, row, params) {
+                            //空值不可直接Number(), 否則''與null會變成0.00
+                            if (value === null || value === undefined || value === '') {
+                                return null
+                            }
+                            return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                        },
+                    },
+                },
+                'opt9': {
+                    keys: keys1,
+                    kpHeadFilterType: kpHeadFilterType1,
+                    rows: rows1,
+                    optForUploadData: {
+                        uploadMode: 'append', //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
+                    },
+                },
+                'opt10': {
+                    keys: keys1,
+                    kpHeadFilterType: kpHeadFilterType1,
+                    kpHead: { //表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
+                        make: '製造商',
+                        model: '型號',
+                        price: '價格',
+                    },
+                    kpConvertKeysWhenUploadData: { //kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
+                        '製造商': 'make',
+                        '型號': 'model',
+                        '價格': 'price',
+                    },
+                    rows: [], //無數據列時下載數據按鈕仍會顯示, 可下載只有表頭之Excel檔案供填寫後上傳
+                },
+            },
+            'actions': [
+            ],
+        }
+    },
+    methods: {
+        evSuccess: function(msg) {
+            console.log('evSuccess:', msg)
+        },
+        evError: function(msg) {
+            console.log('evError:', msg)
+        },
+        saveData: function() {
+            let data = this.$refs.table.save()
+            document.querySelector('#disp-save-data').innerHTML = JSON.stringify(data, null, 2)
+            console.log('saveData:', data)
+        },
+    },
+}
+</script>
+
+<style scoped>
+</style>