/home/henzagold/admin_report/js/ Current File: /home/henzagold/admin_report/js/chunk-2d0dddb3.a0feaa04.js
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0dddb3"],{"82be":function(e,t,a){"use strict";a.r(t);var n=function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"table-demo"}},[t("table-default"),t("table-striped"),t("table-state"),t("table-pagination"),t("table-single-selected"),t("table-multiple-selected"),t("table-expandable-data"),t("table-edit-data-table"),t("table-filter-sorter"),t("table-miscellaneous"),t("table-ssr")],1)},s=[],i=(a("7f7f"),function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Default","code-toggler":""}},[t("p",[e._v("To implement a data table we have the component vs-table, also sub components and slots for a better management of the structure and operation")]),t("vx-list",{attrs:{list:e.tableList}}),t("br"),t("vs-alert",{attrs:{color:"primary",icon:"new_releases",active:"true"}},[t("p",[e._v("In order to manipulate the data within the table, it is necessary to add the property: "),t("code",[e._v('data="myDataTable"')]),e._v(" and thus be able to use the "),t("code",[e._v('slot-scope="{data}"')])])]),t("br"),t("br"),t("vs-table",{attrs:{data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].name)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}])},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<template>\n  <vs-table :data="users">\n\n    <template slot="thead">\n      <vs-th>Email</vs-th>\n      <vs-th>Name</vs-th>\n      <vs-th>Website</vs-th>\n      <vs-th>Nro</vs-th>\n    </template>\n\n    <template slot-scope="{data}">\n      <vs-tr :key="indextr" v-for="(tr, indextr) in data">\n\n        <vs-td :data="data[indextr].email">\n          '+e._s("{{ data[indextr].email }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].username">\n          '+e._s("{{ data[indextr].name }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].website }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].id }}")+'\n        </vs-td>\n\n      </vs-tr>\n    </template>\n\n  </vs-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      users: [\n        {\n          "id": 1,\n          "name": "Leanne Graham",\n          "username": "Bret",\n          "email": "Sincere@april.biz",\n          "website": "hildegard.org",\n        },\n        {\n          "id": 2,\n          "name": "Ervin Howell",\n          "username": "Antonette",\n          "email": "Shanna@melissa.tv",\n          "website": "anastasia.net",\n        },\n        {\n          "id": 3,\n          "name": "Clementine Bauch",\n          "username": "Samantha",\n          "email": "Nathan@yesenia.net",\n          "website": "ramiro.info",\n        },\n        {\n          "id": 4,\n          "name": "Patricia Lebsack",\n          "username": "Karianne",\n          "email": "Julianne.OConner@kory.org",\n          "website": "kale.biz",\n        },\n        {\n          "id": 5,\n          "name": "Chelsey Dietrich",\n          "username": "Kamren",\n          "email": "Lucio_Hettinger@annie.ca",\n          "website": "demarco.info",\n        },\n        {\n          "id": 6,\n          "name": "Mrs. Dennis Schulist",\n          "username": "Leopoldo_Corkery",\n          "email": "Karley_Dach@jasper.info",\n          "website": "ola.org",\n        },\n        {\n          "id": 7,\n          "name": "Kurtis Weissnat",\n          "username": "Elwyn.Skiles",\n          "email": "Telly.Hoeger@billy.biz",\n          "website": "elvis.io",\n        },\n        {\n          "id": 8,\n          "name": "Nicholas Runolfsdottir V",\n          "username": "Maxime_Nienow",\n          "email": "Sherwood@rosamond.me",\n          "website": "jacynthe.com",\n        },\n        {\n          "id": 9,\n          "name": "Glenna Reichert",\n          "username": "Delphine",\n          "email": "Chaim_McDermott@dana.io",\n          "website": "conrad.com",\n        },\n        {\n          "id": 10,\n          "name": "Clementina DuBuque",\n          "username": "Moriah.Stanton",\n          "email": "Rey.Padberg@karina.biz",\n          "website": "ambrose.net",\n        },\n      ]\n    }\n  },\n}\n<\/script>\n        ')])],2)}),r=[],l={data:function(){return{tableList:["vs-th: Component","vs-tr: Component","vs-td: Component","thread: Slot","tbody: Slot","header: Slot"],users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},d=l,o=a("2877"),m=Object(o["a"])(d,i,r,!1,null,null,null),c=m.exports,u=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Striped","code-toggler":""}},[t("p",[e._v("You can have a sebra effect by adding the property "),t("code",[e._v("stripe")])]),t("br"),t("vs-table",{attrs:{stripe:"",data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].name)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}])},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<template>\n  <vs-table :data="users">\n\n    <template slot="thead">\n      <vs-th>Email</vs-th>\n      <vs-th>Name</vs-th>\n      <vs-th>Website</vs-th>\n      <vs-th>Nro</vs-th>\n    </template>\n\n    <template slot-scope="{data}">\n      <vs-tr :key="indextr" v-for="(tr, indextr) in data">\n\n        <vs-td :data="data[indextr].email">\n          '+e._s("{{ data[indextr].email }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].username">\n          '+e._s("{{ data[indextr].name }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].website }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].id }}")+"\n        </vs-td>\n      </vs-tr>\n    </template>\n\n  </vs-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      users: [......]\n    }\n  },\n}\n<\/script>\n        ")])],2)},v=[],h={data:function(){return{users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},b=h,p=Object(o["a"])(b,u,v,!1,null,null,null),_=p.exports,w=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"State","code-toggler":""}},[t("p",{staticClass:"mb-4"},[e._v("There are times when we need to add a state to our tr in the table so we have the property "),t("strong",[e._v("state")]),e._v(" inside the component "),t("code",[e._v("vs-tr")])]),t("vs-table",{attrs:{data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s,attrs:{state:2==s||5==s?"success":6==s?"danger":null}},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].name)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}])},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<template>\n  <vs-table :data="users">\n\n    <template slot="thead">\n      <vs-th>Email</vs-th>\n      <vs-th>Name</vs-th>\n      <vs-th>Website</vs-th>\n      <vs-th>Nro</vs-th>\n    </template>\n\n    <template slot-scope="{data}">\n      <vs-tr :state="indextr == 2 || indextr == 5 ? \'success\':indextr == 6 ? \'danger\':null" :key="indextr" v-for="(tr, indextr) in data">\n\n        <vs-td :data="data[indextr].email">\n          '+e._s("{{ data[indextr].email }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].username">\n          '+e._s("{{ data[indextr].name }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].website }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].id }}")+"\n        </vs-td>\n      </vs-tr>\n    </template>\n\n  </vs-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      users: [......]\n    }\n  },\n}\n<\/script>\n        ")])],2)},y=[],f={data:function(){return{users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},g=f,x=Object(o["a"])(g,w,y,!1,null,null,null),k=x.exports,S=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Pagination","code-toggler":""}},[t("p",[e._v("You can add a paginated table with the pagination property")]),t("vs-alert",{staticClass:"my-3",attrs:{color:"primary",icon:"new_releases",active:"true"}},[t("p",[e._v("by default the maximum number of elements per page is 5 to change it using the max-items property")])]),t("br"),t("vs-table",{attrs:{"max-items":"3",pagination:"",data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].username)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}])},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<template lang="html">\n  <div>\n    <vs-table max-items="3" pagination :data="users">\n\n      <template slot="thead">\n        <vs-th>Email</vs-th>\n        <vs-th>Name</vs-th>\n        <vs-th>Website</vs-th>\n        <vs-th>Nro</vs-th>\n      </template>\n\n      <template slot-scope="{data}">\n        <vs-tr :key="indextr" v-for="(tr, indextr) in data">\n\n          <vs-td :data="data[indextr].email">\n            '+e._s("{{ data[indextr].email }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].username">\n            '+e._s("{{ data[indextr].username }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].id">\n            '+e._s("{{ data[indextr].website }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].id">\n            '+e._s("{{ data[indextr].id }}")+'\n          </vs-td>\n\n        </vs-tr>\n      </template>\n    </vs-table>\n  </div>\n</template>\n\n<script>\nexport default {\n  data: () => ({\n    users: [\n      {\n        "id": 1,\n        "name": "Leanne Graham",\n        "username": "Bret",\n        "email": "Sincere@april.biz",\n        "website": "hildegard.org",\n      },\n      {\n        "id": 2,\n        "name": "Ervin Howell",\n        "username": "Antonette",\n        "email": "Shanna@melissa.tv",\n        "website": "anastasia.net",\n      },\n      {\n        "id": 3,\n        "name": "Clementine Bauch",\n        "username": "Samantha",\n        "email": "Nathan@yesenia.net",\n        "website": "ramiro.info",\n      },\n      {\n        "id": 4,\n        "name": "Patricia Lebsack",\n        "username": "Karianne",\n        "email": "Julianne.OConner@kory.org",\n        "website": "kale.biz",\n      },\n      {\n        "id": 5,\n        "name": "Chelsey Dietrich",\n        "username": "Kamren",\n        "email": "Lucio_Hettinger@annie.ca",\n        "website": "demarco.info",\n      },\n      {\n        "id": 6,\n        "name": "Mrs. Dennis Schulist",\n        "username": "Leopoldo_Corkery",\n        "email": "Karley_Dach@jasper.info",\n        "website": "ola.org",\n      },\n      {\n        "id": 7,\n        "name": "Kurtis Weissnat",\n        "username": "Elwyn.Skiles",\n        "email": "Telly.Hoeger@billy.biz",\n        "website": "elvis.io",\n      },\n      {\n        "id": 8,\n        "name": "Nicholas Runolfsdottir V",\n        "username": "Maxime_Nienow",\n        "email": "Sherwood@rosamond.me",\n        "website": "jacynthe.com",\n      },\n      {\n        "id": 9,\n        "name": "Glenna Reichert",\n        "username": "Delphine",\n        "email": "Chaim_McDermott@dana.io",\n        "website": "conrad.com",\n      },\n      {\n        "id": 10,\n        "name": "Clementina DuBuque",\n        "username": "Moriah.Stanton",\n        "email": "Rey.Padberg@karina.biz",\n        "website": "ambrose.net",\n      }\n    ]\n  }),\n}\n<\/script>\n        ')])],2)},C=[],D={data:function(){return{users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},N=D,z=Object(o["a"])(N,S,C,!1,null,null,null),L=z.exports,M=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Single Selected","code-toggler":""}},[t("p",[e._v("You can add the functionality of select a specific "),t("strong",[e._v("tr")]),e._v(" to do this add the property "),t("code",[e._v("data")]),e._v(" with the value to be selected, it is usually the triterated")]),t("vs-alert",{staticClass:"mt-3",attrs:{color:"primary",icon:"new_releases",active:"true"}},[t("p",[e._v("if you need to execute a certain function to select the user, we have the property "),t("code",[e._v("@selected")]),e._v(", as the first parameter the data is returned")])]),t("br"),t("vs-table",{attrs:{data:e.users},on:{selected:e.handleSelected},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s,attrs:{data:a}},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].username)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].website}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}]),model:{value:e.selected,callback:function(t){e.selected=t},expression:"selected"}},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("br"),t("prism",{staticClass:"rounded-lg",attrs:{language:"js"}},[e._v("\n"+e._s(e.selected)+"\n        ")]),t("template",{slot:"codeContainer"},[e._v('\n<template>\n    <vs-table v-model="selected" @selected="handleSelected" :data="users">\n\n      <template slot="thead">\n        <vs-th>Email</vs-th>\n        <vs-th>Name</vs-th>\n        <vs-th>Website</vs-th>\n        <vs-th>Nro</vs-th>\n      </template>\n\n      <template slot-scope="{data}">\n        <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">\n\n          <vs-td :data="data[indextr].email">\n            '+e._s("{{ data[indextr].email }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].username">\n            '+e._s("{{ data[indextr].username }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].website">\n            '+e._s("{{ data[indextr].website }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].id">\n            '+e._s("{{ data[indextr].id }}")+"\n          </vs-td>\n\n        </vs-tr>\n      </template>\n    </vs-table>\n\n    <br>\n\n    <pre>"+e._s("{{ selected }}")+"</pre>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      selected: [],\n      users: [.....],\n    }\n  },\n  methods: {\n    handleSelected(tr) {\n      this.$vs.notify({\n        title: `Selected ${tr.username}`,\n        text: `Email: ${tr.email}`\n      })\n    }\n  }\n}\n<\/script>\n        ")])],2)},E=[],K=a("8d51"),j=a.n(K),R={data:function(){return{selected:[],users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}},components:{Prism:j.a},methods:{handleSelected:function(e){this.$vs.notify({title:"Selected ".concat(e.username),text:"Email: ".concat(e.email)})}}},B=R,H=Object(o["a"])(B,M,E,!1,null,null,null),P=H.exports,T=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Multiple Selected","code-toggler":""}},[t("p",[e._v("To select multiples "),t("strong",[e._v("tr")]),e._v(" we have the property "),t("code",[e._v("multiple")]),e._v(" and each of the selected items will be added to the "),t("code",[e._v("v-model")])]),t("vs-alert",{staticClass:"mt-3",attrs:{color:"primary",icon:"new_releases",active:"true"}},[t("p",[e._v("if you need to execute a certain function to select the user, we have the property "),t("code",[e._v("@selected")]),e._v(", as the first parameter the data is returned")])]),t("br"),t("vs-table",{attrs:{multiple:"",data:e.users},on:{selected:e.handleSelected},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s,attrs:{data:a}},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].username)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].website}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}]),model:{value:e.selected,callback:function(t){e.selected=t},expression:"selected"}},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("br"),t("prism",{staticClass:"rounded-lg",attrs:{language:"js"}},[e._v("\n"+e._s(e.selected)+"\n        ")]),t("template",{slot:"codeContainer"},[e._v('\n<template>\n    <vs-table multiple v-model="selected" @selected="handleSelected" :data="users">\n\n      <template slot="thead">\n        <vs-th>Email</vs-th>\n        <vs-th>Name</vs-th>\n        <vs-th>Website</vs-th>\n        <vs-th>Nro</vs-th>\n      </template>\n\n      <template slot-scope="{data}">\n        <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">\n\n          <vs-td :data="data[indextr].email">\n            '+e._s("{{ data[indextr].email }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].username">\n            '+e._s("{{ data[indextr].username }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].website">\n            '+e._s("{{ data[indextr].website }}")+'\n          </vs-td>\n\n          <vs-td :data="data[indextr].id">\n            '+e._s("{{ data[indextr].id }}")+"\n          </vs-td>\n\n        </vs-tr>\n      </template>\n    </vs-table>\n\n    <br>\n\n    <pre>"+e._s("{{ selected }}")+"</pre>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      selected: [],\n      users: [.....],\n    }\n  },\n  methods: {\n    handleSelected(tr) {\n      this.$vs.notify({\n        title: `Selected ${tr.username}`,\n        text: `Email: ${tr.email}`\n      })\n    }\n  }\n}\n<\/script>\n        ")])],2)},W=[],G={data:function(){return{selected:[],users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}},components:{Prism:j.a},methods:{handleSelected:function(e){this.$vs.notify({title:"Selected ".concat(e.username),text:"Email: ".concat(e.email)})}}},O=G,J=Object(o["a"])(O,T,W,!1,null,null,null),$=J.exports,q=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"ExpandableData","code-toggler":""}},[t("p",[e._v("You can add the functionality of expanding a "),t("strong",[e._v("tr")]),e._v(" to visualize more data to make a structure of data or more complex functionalities")]),t("br"),t("vs-table",{attrs:{data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,n){return t("vs-tr",{key:n,attrs:{data:a}},[t("vs-td",{attrs:{data:a.email}},[e._v("\n                        "+e._s(a.email)+"\n                    ")]),t("vs-td",{attrs:{data:a.username}},[e._v("\n                        "+e._s(a.name)+"\n                    ")]),t("vs-td",{attrs:{data:a.website}},[e._v("\n                        "+e._s(a.website)+"\n                    ")]),t("vs-td",{attrs:{data:a.id}},[e._v("\n                        "+e._s(a.id)+"\n                    ")]),t("template",{staticClass:"expand-user",slot:"expand"},[t("div",{staticClass:"con-expand-users w-full"},[t("div",{staticClass:"con-btns-user flex items-center justify-between"},[t("div",{staticClass:"con-userx flex items-center justify-start"},[t("vs-avatar",{attrs:{badge:a.id,size:"45px",src:"https://randomuser.me/api/portraits/women/".concat(a.id,".jpg")}}),t("span",[e._v(e._s(a.name))])],1),t("div",{staticClass:"flex"},[t("vs-button",{staticClass:"mr-2",attrs:{type:"border",size:"small","icon-pack":"feather",icon:"icon-phone"}}),t("vs-button",{staticClass:"mr-2",attrs:{type:"border",size:"small","icon-pack":"feather",icon:"icon-send",color:"success"}}),t("vs-button",{attrs:{type:"border",size:"small","icon-pack":"feather",icon:"icon-trash",color:"danger"}})],1)]),t("vs-list",[t("vs-list-item",{attrs:{"icon-pack":"feather",icon:"icon-mail",title:a.email}}),t("vs-list-item",{attrs:{"icon-pack":"feather",icon:"icon-globe",title:a.website}})],1)],1)])],2)}))}}])},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Website")]),t("vs-th",[e._v("Nro")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<template>\n  <vs-table :data="users">\n\n    <template slot="thead">\n      <vs-th>Email</vs-th>\n      <vs-th>Name</vs-th>\n      <vs-th>Website</vs-th>\n      <vs-th>Nro</vs-th>\n    </template>\n\n    <template slot-scope="{data}">\n      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">\n        <vs-td :data="tr.email">\n          '+e._s("{{ tr.email }}")+'\n        </vs-td>\n        <vs-td :data="tr.username">\n          '+e._s("{{ tr.name }}")+'\n        </vs-td>\n        <vs-td :data="tr.website">\n          '+e._s("{{ tr.website }}")+'\n        </vs-td>\n        <vs-td :data="tr.id">\n          '+e._s("{{ tr.id }}")+'\n        </vs-td>\n\n          <template class="expand-user" slot="expand">\n            <div class="con-expand-users w-full">\n              <div class="con-btns-user flex items-center justify-between">\n                <div class="con-userx flex items-center justify-start">\n                  <vs-avatar :badge="tr.id" size="45px" :src="`https://randomuser.me/api/portraits/women/${indextr}.jpg`" />\n                  <span>'+e._s("{{ tr.name }}")+'</span>\n                </div>\n                <div class="flex">\n                  <vs-button type="border" size="small" icon-pack="feather" icon="icon-phone" class="mr-2"></vs-button>\n                  <vs-button type="border" size="small" icon-pack="feather" icon="icon-send" color="success" class="mr-2"></vs-button>\n                  <vs-button type="border" size="small" icon-pack="feather" icon="icon-trash" color="danger"></vs-button>\n                </div>\n              </div>\n              <vs-list>\n                <vs-list-item icon-pack="feather" icon="icon-mail" :title="tr.email"></vs-list-item>\n                <vs-list-item icon-pack="feather" icon="icon-globe" :title="tr.website"></vs-list-item>\n              </vs-list>\n            </div>\n          </template>\n      </vs-tr>\n    </template>\n  </vs-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      users: [.....]\n    }\n  },\n}\n<\/script>\n        ')])],2)},A=[],V={data:function(){return{users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},Y=V,U=Object(o["a"])(Y,q,A,!1,null,null,null),F=U.exports,I=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Edit Data Table","code-toggler":""}},[t("p",{staticClass:"mb-4"},[e._v("You can edit the data with "),t("strong",[e._v("slot")]),t("code",[e._v("edit")]),e._v(", so you have better flexibility and mastery of what you need")]),t("vs-table",{attrs:{data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,n){return t("vs-tr",{key:n},[t("vs-td",{attrs:{data:a.email}},[e._v("\n                        "+e._s(a.email)+"\n                        "),t("template",{slot:"edit"},[t("vs-input",{staticClass:"inputx",attrs:{placeholder:"Email"},model:{value:a.email,callback:function(t){e.$set(a,"email",t)},expression:"tr.email"}})],1)],2),t("vs-td",{attrs:{data:a.username}},[e._v("\n                        "+e._s(a.username)+"\n                        "),t("template",{slot:"edit"},[t("vs-select",{attrs:{label:"Users"},model:{value:a.username,callback:function(t){e.$set(a,"username",t)},expression:"tr.username"}},e._l(e.users,(function(e,a){return t("vs-select-item",{key:a,attrs:{value:e.name,text:e.name}})})),1)],1)],2),t("vs-td",{attrs:{data:a.id}},[e._v("\n                        "+e._s(a.id)+"\n                        "),t("template",{slot:"edit"},[t("vs-input-number",{model:{value:a.id,callback:function(t){e.$set(a,"id",t)},expression:"tr.id"}})],1)],2),t("vs-td",{attrs:{data:a.id}},[e._v("\n                        "+e._s(a.id)+"\n                        "),t("template",{slot:"edit"},[t("vs-slider",{attrs:{max:20},model:{value:a.id,callback:function(t){e.$set(a,"id",t)},expression:"tr.id"}})],1)],2)],1)}))}}])},[t("template",{slot:"thead"},[t("vs-th",[e._v("Email")]),t("vs-th",[e._v("Name")]),t("vs-th",[e._v("Nro1")]),t("vs-th",[e._v("Nro2")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<template>\n  <vs-table :data="users">\n\n    <template slot="thead">\n      <vs-th>Email</vs-th>\n      <vs-th>Name</vs-th>\n      <vs-th>Nro1</vs-th>\n      <vs-th>Nro2</vs-th>\n    </template>\n\n    <template slot-scope="{data}">\n      <vs-tr :key="indextr" v-for="(tr, indextr) in data">\n\n        <vs-td :data="tr.email">\n          '+e._s("{{ tr.email }}")+'\n          <template slot="edit">\n            <vs-input v-model="tr.email" class="inputx" placeholder="Email" />\n          </template>\n        </vs-td>\n\n        <vs-td :data="tr.username">\n          '+e._s("{{ tr.username }}")+'\n          <template slot="edit">\n            <vs-select label="Users" v-model="tr.username">\n              <vs-select-item :key="index" :value="item.name" :text="item.name" v-for="(item,index) in users" />\n            </vs-select>\n          </template>\n        </vs-td>\n\n        <vs-td :data="tr.id">\n          '+e._s("{{ tr.id }}")+'\n          <template slot="edit">\n            <vs-input-number v-model="tr.id" />\n          </template>\n        </vs-td>\n\n        <vs-td :data="tr.id">\n          '+e._s("{{ tr.id }}")+'\n          <template slot="edit">\n            <vs-slider :max="20" v-model="tr.id" />\n          </template>\n        </vs-td>\n\n      </vs-tr>\n    </template>\n  </vs-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      users: [......]\n    }\n  },\n}\n<\/script>\n        ')])],2)},Q=[],X={data:function(){return{users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},Z=X,ee=Object(o["a"])(Z,I,Q,!1,null,null,null),te=ee.exports,ae=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Filter and Sorter","code-toggler":""}},[t("p",[e._v("You can add the Filter functionality by adding the "),t("code",[e._v("search")]),e._v(" property.")]),t("p",[e._v("if you need a property to be sorted you just have to add the "),t("code",[e._v("sort-key")]),e._v(" property and the value you need to be sorted.")]),t("vs-table",{attrs:{search:"",data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].username)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}])},[t("template",{slot:"thead"},[t("vs-th",{attrs:{"sort-key":"email"}},[e._v("Email")]),t("vs-th",{attrs:{"sort-key":"username"}},[e._v("Name")]),t("vs-th",{attrs:{"sort-key":"id"}},[e._v("Nro")])],1)],2),t("template",{slot:"codeContainer"},[e._v('\n<vs-table search :data="users">\n\n  <template slot="thead">\n    <vs-th sort-key="email">Email</vs-th>\n    <vs-th sort-key="username">Name</vs-th>\n    <vs-th sort-key="id">Nro</vs-th>\n  </template>\n\n  <template slot-scope="{data}">\n    <vs-tr :key="indextr" v-for="(tr, indextr) in data">\n\n      <vs-td :data="data[indextr].email">\n        '+e._s("{{ data[indextr].email }}")+'\n      </vs-td>\n\n      <vs-td :data="data[indextr].username">\n        '+e._s("{{ data[indextr].username }}")+'\n      </vs-td>\n\n      <vs-td :data="data[indextr].id">\n        '+e._s("{{ data[indextr].id }}")+"\n      </vs-td>\n    </vs-tr>\n  </template>\n</vs-table>\n\n<script>\nexport default {\n  data() {\n    return {\n      users: [......]\n    }\n  },\n}\n<\/script>\n        ")])],2)},ne=[],se={data:function(){return{users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}}},ie=se,re=Object(o["a"])(ie,ae,ne,!1,null,null,null),le=re.exports,de=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"Miscellaneous","code-toggler":""}},[t("p",[e._v("You can add a "),t("strong",[e._v("filtered, sorted, paginated and multi selected")]),e._v(" table with combination of the "),t("code",[e._v("search")]),e._v(", "),t("code",[e._v("multiple")]),e._v(" and "),t("code",[e._v("pagination")]),e._v(" properties for example")]),t("br"),t("vs-table",{attrs:{multiple:"",pagination:"","max-items":"3",search:"",data:e.users},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s,attrs:{data:a}},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                        "+e._s(n[s].email)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                        "+e._s(n[s].username)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].website)+"\n                    ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                        "+e._s(n[s].id)+"\n                    ")])],1)}))}}]),model:{value:e.selected,callback:function(t){e.selected=t},expression:"selected"}},[t("template",{slot:"thead"},[t("vs-th",{attrs:{"sort-key":"email"}},[e._v("Email")]),t("vs-th",{attrs:{"sort-key":"username"}},[e._v("Name")]),t("vs-th",{attrs:{"sort-key":"website"}},[e._v("Website")]),t("vs-th",{attrs:{"sort-key":"id"}},[e._v("Nro")])],1)],2),t("prism",{staticClass:"rounded-lg",attrs:{language:"js"}},[e._v("\n"+e._s(e.selected)+"\n        ")]),t("template",{slot:"codeContainer"},[e._v('\n<template>\n  <vs-table multiple v-model="selected" pagination max-items="3" search :data="users">\n\n    <template slot="thead">\n      <vs-th sort-key="email">Email</vs-th>\n      <vs-th sort-key="username">Name</vs-th>\n      <vs-th sort-key="website">Website</vs-th>\n      <vs-th sort-key="id">Nro</vs-th>\n    </template>\n\n    <template slot-scope="{data}">\n      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">\n\n        <vs-td :data="data[indextr].email">\n          '+e._s("{{ data[indextr].email }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].username">\n          '+e._s("{{ data[indextr].username }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].website }}")+'\n        </vs-td>\n\n        <vs-td :data="data[indextr].id">\n          '+e._s("{{ data[indextr].id }}")+"\n        </vs-td>\n\n      </vs-tr>\n    </template>\n  </vs-table>\n\n  <pre> "+e._s("{{ selected }}")+' </pre>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      selected: [],\n      \'tableList\': [\n        \'vs-th: Component\',\n        \'vs-tr: Component\',\n        \'vs-td: Component\',\n        \'thread: Slot\',\n        \'tbody: Slot\',\n        \'header: Slot\'\n      ],\n      users: [\n        {\n          "id": 1,\n          "name": "Leanne Graham",\n          "username": "Bret",\n          "email": "Sincere@april.biz",\n          "website": "hildegard.org",\n        },\n        {\n          "id": 2,\n          "name": "Ervin Howell",\n          "username": "Antonette",\n          "email": "Shanna@melissa.tv",\n          "website": "anastasia.net",\n        },\n        {\n          "id": 3,\n          "name": "Clementine Bauch",\n          "username": "Samantha",\n          "email": "Nathan@yesenia.net",\n          "website": "ramiro.info",\n        },\n        {\n          "id": 4,\n          "name": "Patricia Lebsack",\n          "username": "Karianne",\n          "email": "Julianne.OConner@kory.org",\n          "website": "kale.biz",\n        },\n        {\n          "id": 5,\n          "name": "Chelsey Dietrich",\n          "username": "Kamren",\n          "email": "Lucio_Hettinger@annie.ca",\n          "website": "demarco.info",\n        },\n        {\n          "id": 6,\n          "name": "Mrs. Dennis Schulist",\n          "username": "Leopoldo_Corkery",\n          "email": "Karley_Dach@jasper.info",\n          "website": "ola.org",\n        },\n        {\n          "id": 7,\n          "name": "Kurtis Weissnat",\n          "username": "Elwyn.Skiles",\n          "email": "Telly.Hoeger@billy.biz",\n          "website": "elvis.io",\n        },\n        {\n          "id": 8,\n          "name": "Nicholas Runolfsdottir V",\n          "username": "Maxime_Nienow",\n          "email": "Sherwood@rosamond.me",\n          "website": "jacynthe.com",\n        },\n        {\n          "id": 9,\n          "name": "Glenna Reichert",\n          "username": "Delphine",\n          "email": "Chaim_McDermott@dana.io",\n          "website": "conrad.com",\n        },\n        {\n          "id": 10,\n          "name": "Clementina DuBuque",\n          "username": "Moriah.Stanton",\n          "email": "Rey.Padberg@karina.biz",\n          "website": "ambrose.net",\n        },\n      ]\n    }\n  },\n}\n<\/script>\n        ')])],2)},oe=[],me={data:function(){return{selected:[],tableList:["vs-th: Component","vs-tr: Component","vs-td: Component","thread: Slot","tbody: Slot","header: Slot"],users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}},components:{Prism:j.a}},ce=me,ue=Object(o["a"])(ce,de,oe,!1,null,null,null),ve=ue.exports,he=function(){var e=this,t=e._self._c;return t("vx-card",{attrs:{title:"SSR","code-toggler":""}},[t("p",[e._v("To create table with SSR support just add "),t("code",[e._v("sst")]),e._v(" prop and then handle appropriate events like searching, sorting & pagination.")]),t("vs-table",{attrs:{sst:!0,pagination:"","max-items":"3",search:"",data:e.users},on:{search:e.handleSearch,"change-page":e.handleChangePage,sort:e.handleSort},scopedSlots:e._u([{key:"default",fn:function(a){var n=a.data;return e._l(n,(function(a,s){return t("vs-tr",{key:s,attrs:{data:a}},[t("vs-td",{attrs:{data:n[s].email}},[e._v("\n                "+e._s(n[s].email)+"\n              ")]),t("vs-td",{attrs:{data:n[s].username}},[e._v("\n                "+e._s(n[s].username)+"\n              ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                "+e._s(n[s].website)+"\n              ")]),t("vs-td",{attrs:{data:n[s].id}},[e._v("\n                "+e._s(n[s].id)+"\n              ")])],1)}))}}]),model:{value:e.selected,callback:function(t){e.selected=t},expression:"selected"}},[t("template",{slot:"header"},[t("h3",[e._v("Users")])]),t("template",{slot:"thead"},[t("vs-th",{attrs:{"sort-key":"email"}},[e._v("Email")]),t("vs-th",{attrs:{"sort-key":"username"}},[e._v("Name")]),t("vs-th",{attrs:{"sort-key":"website"}},[e._v("Website")]),t("vs-th",{attrs:{"sort-key":"id"}},[e._v("Nro")])],1)],2),t("prism",{staticClass:"rounded-lg"},[e._v("\n"+e._s(e.log.join("\n"))+"\n        ")]),t("template",{slot:"codeContainer"},[e._v('\n<template>\n    <vs-table\n      :sst="true"\n      @search="handleSearch"\n      @change-page="handleChangePage"\n      @sort="handleSort"\n      v-model="selected"\n      pagination\n      max-items="3"\n      search\n      :data="users">\n\n        <template slot="header">\n            <h3>Users</h3>\n        </template>\n\n        <template slot="thead">\n            <vs-th sort-key="email">Email</vs-th>\n            <vs-th sort-key="username">Name</vs-th>\n            <vs-th sort-key="website">Website</vs-th>\n            <vs-th sort-key="id">Nro</vs-th>\n        </template>\n\n        <template slot-scope="{data}">\n            <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">\n                <vs-td :data="data[indextr].email">\n                    '+e._s("{{ data[indextr].email }}")+'\n                </vs-td>\n                <vs-td :data="data[indextr].username">\n                    '+e._s("{{ data[indextr].username }}")+'\n                </vs-td>\n                <vs-td :data="data[indextr].id">\n                    '+e._s("{{ data[indextr].website }}")+'\n                </vs-td>\n                <vs-td :data="data[indextr].id">\n                    '+e._s("{{ data[indextr].id }}")+'\n                </vs-td>\n            </vs-tr>\n        </template>\n    </vs-table>\n</template>\n\n<script>\nexport default {\n  data:()=>({\n    selected:[],\n    log: [],\n    users:[\n      {\n        "id": 1,\n        "name": "Leanne Graham",\n        "username": "Bret",\n        "email": "Sincere@april.biz",\n        "website": "hildegard.org",\n      },\n      {\n        "id": 2,\n        "name": "Ervin Howell",\n        "username": "Antonette",\n        "email": "Shanna@melissa.tv",\n        "website": "anastasia.net",\n      },\n      {\n        "id": 3,\n        "name": "Clementine Bauch",\n        "username": "Samantha",\n        "email": "Nathan@yesenia.net",\n        "website": "ramiro.info",\n      },\n      {\n        "id": 4,\n        "name": "Patricia Lebsack",\n        "username": "Karianne",\n        "email": "Julianne.OConner@kory.org",\n        "website": "kale.biz",\n      },\n      {\n        "id": 5,\n        "name": "Chelsey Dietrich",\n        "username": "Kamren",\n        "email": "Lucio_Hettinger@annie.ca",\n        "website": "demarco.info",\n      },\n      {\n        "id": 6,\n        "name": "Mrs. Dennis Schulist",\n        "username": "Leopoldo_Corkery",\n        "email": "Karley_Dach@jasper.info",\n        "website": "ola.org",\n      },\n      {\n        "id": 7,\n        "name": "Kurtis Weissnat",\n        "username": "Elwyn.Skiles",\n        "email": "Telly.Hoeger@billy.biz",\n        "website": "elvis.io",\n      },\n      {\n        "id": 8,\n        "name": "Nicholas Runolfsdottir V",\n        "username": "Maxime_Nienow",\n        "email": "Sherwood@rosamond.me",\n        "website": "jacynthe.com",\n      },\n      {\n        "id": 9,\n        "name": "Glenna Reichert",\n        "username": "Delphine",\n        "email": "Chaim_McDermott@dana.io",\n        "website": "conrad.com",\n      },\n      {\n        "id": 10,\n        "name": "Clementina DuBuque",\n        "username": "Moriah.Stanton",\n        "email": "Rey.Padberg@karina.biz",\n        "website": "ambrose.net",\n      }\n    ]\n  }),\n  methods:{\n    handleSearch(searching) {\n      console.log(`The user searched for: ${searching}`)\n    },\n    handleChangePage(page) {\n      console.log(`The user changed the page to: ${page}`)\n    },\n    handleSort(key, active) {\n      console.log(`the user ordered: ${key} ${active}`)\n    }\n  }\n}\n<\/script>\n        ')])],2)},be=[],pe={components:{Prism:j.a},data:function(){return{selected:[],log:[],users:[{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",website:"ambrose.net"}]}},methods:{handleSearch:function(e){this.log.push("The user searched for: ".concat(e))},handleChangePage:function(e){this.log.push("The user changed the page to: ".concat(e))},handleSort:function(e,t){this.log.push("the user ordered: ".concat(e," ").concat(t))}}},_e=pe,we=Object(o["a"])(_e,he,be,!1,null,null,null),ye=we.exports,fe={components:{TableDefault:c,TableStriped:_,TableState:k,TablePagination:L,TableSingleSelected:P,TableMultipleSelected:$,TableExpandableData:F,TableEditDataTable:te,TableFilterSorter:le,TableMiscellaneous:ve,TableSsr:ye}},ge=fe,xe=Object(o["a"])(ge,n,s,!1,null,null,null);t["default"]=xe.exports}}]);
//# sourceMappingURL=chunk-2d0dddb3.a0feaa04.js.map