dist/index.html

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>vue3-table-lite</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen"><style>body {
            padding-top: 60px;
            /* 60px to make the container go all the way to the bottom of the topbar */
        }</style><link href="./css/app.404ea0a2.css" rel="preload" as="style"><link href="./js/app.356f5654.js" rel="preload" as="script"><link href="./js/chunk-vendors.e6b85b04.js" rel="preload" as="script"><link href="./css/app.404ea0a2.css" rel="stylesheet"></head><body><div class="navbar navbar-inverse navbar-fixed-top"><div class="navbar-inner"><div class="container"><button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="brand" href="#">vue3-table-lite</a><div class="nav-collapse collapse"><ul class="nav"><li class="active"><a href="#home">Home</a></li><li><a href="#demo">Demo</a></li><li><a href="#info">Get Start</a></li><li><a href="#setting">SettingData</a></li><li><a href="#event">Event</a></li></ul></div></div></div></div><div class="container"><div class="hero-unit"><h1 id="home">vue3-table-lite</h1><p>A very simple table for vue3.0!</p><hr><h3>Support</h3><p>Row check event Support</p><p>Custom data display Support</p><p>Pagging Support</p><p>Sorting Support</p><p>Custom message Support</p><p><a href="https://github.com/linmasahiro/vue3-table-lite">Github</a></p><p><iframe src="https://ghbtns.com/github-btn.html?user=linmasahiro&repo=vue3-table-lite&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></p></div><h2 id="demo">Demo</h2><p>Example Sample Demo</p><div id="app"></div><h2 id="info">Get Start</h2><div><ol><li>Use NPM<ol><li><pre><code>npm install vue3-table-lite --save</code></pre></li><li><p>add to your project</p><pre><code>import VueTableLite from 'vue3-table-lite'</code></pre></li><li><p>enjoy it!</p><pre>
                            <code>
                                &lt;vue-table-lite 
                                  :shas-checkbox=&quot;true&quot;
                                  :is-loading=&quot;table.isLoading&quot; 
                                  :is-re-search=&quot;table.isReSearch&quot; 
                                  :columns=&quot;table.columns&quot; 
                                  :rows=&quot;table.rows&quot; 
                                  :total=&quot;table.totalRecordCount&quot; 
                                  :sortable=&quot;table.sortable&quot; 
                                  :messages=&quot;table.messages&quot; 
                                  @do-search=&quot;doSearch&quot; 
                                  @is-finished=&quot;tableLoadingFinish&quot; 
                                  @return-checked-row=&quot;updateCheckedRows&quot; 
                                /&gt;
                            </code>
                        </pre></li></ol></li></ol></div><h2 id="setting">SettingData</h2><p><table class="table table-striped"><tr><th colspan="2">name</th><th width="80">Type</th><th>description</th></tr><tr><td colspan="2">has-checkbox</td><td>Boolean</td><td>Show checkbox on row</td></tr><tr><td colspan="2">is-loading</td><td>Boolean</td><td>Show loading modal</td></tr><tr><td colspan="2">is-re-search</td><td>Boolean</td><td>If reload data, be set true</td></tr><tr><td rowspan="7">columns</td><td colspan="2">Array</td><td>The table columns</td></tr><tr><td>isKey</td><td>Boolean</td><td>If field is primary key. set to true</td></tr><tr><td>label</td><td>String</td><td>Display field lable</td></tr><tr><td>field</td><td>String</td><td>Your data key</td></tr><tr><td>width</td><td>String</td><td>Column's width</td></tr><tr><td>sortable</td><td>Boolean</td><td>If field can sorting. set to true</td></tr><tr><td>display</td><td>String</td><td>You can customize display data in there. (html tag or Etc.)</td></tr><tr><td colspan="2">rows</td><td>Array</td><td>Rows Data</td></tr><tr><td colspan="2">total</td><td>Integer</td><td>Total count</td></tr><tr><td rowspan="3">sortable</td><td colspan="2">Object</td><td>Order field and sort for Sortable</td></tr><tr><td>order</td><td>String</td><td>Field key</td></tr><tr><td>sort</td><td>String</td><td>"asc" or "desc"</td></tr><tr><td rowspan="5">messages</td><td colspan="2">Object</td><td>Message</td></tr><tr><td>pagingInfo</td><td>String</td><td>Default: "Showing {0}-{1} of {2}"</td></tr><tr><td>pageSizeChangeLabel</td><td>String</td><td>Default: "Row count:"</td></tr><tr><td>gotoPageLabel</td><td>String</td><td>Default: "Go to page:"</td></tr><tr><td>noDataAvailable</td><td>String</td><td>Default: "No data"</td></tr></table></p><h2 id="event">Event</h2><p><table class="table table-striped"><tr><th colspan="2">name</th><th width="80">Type</th><th>description</th></tr><tr><td colspan="2">do-search</td><td>Function</td><td>Your search event</td></tr><tr><td colspan="2">is-finished</td><td>Function</td><td>Will be call this function after table rendaring finished</td></tr><tr><td colspan="2">return-checked-rows</td><td>Function</td><td>Will be call this function after table checkbox on checked</td></tr></table></p></div><div id="footer"><div class="container"><p class="muted credit">Copyright © 2020 <a href="https://github.com/linmasahiro" target="_blank">Lin</a> All Rights Reserved.</p></div></div><script src="./js/chunk-vendors.e6b85b04.js"></script><script src="./js/app.356f5654.js"></script></body></html>