(window.webpackJsonp=window.webpackJsonp||[]).push([[13,2,3],{1179:function(t,e,n){"use strict";n.r(e);n(106),n(640);var o={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},l=n(81),component=Object(l.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page-anchor"},[n("a-anchor",{attrs:{targetOffset:80,offsetTop:85}},t._l(t.anchors,(function(title,e){return n("a-anchor-link",{key:e,attrs:{href:t.url+"#"+e,title:title}})})),1)],1)}),[],!1,null,null,null);e.default=component.exports},1180:function(t,e,n){"use strict";n.r(e);var o={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},l=n(81),component=Object(l.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"highlight-section"},[n("a-button",{directives:[{name:"clipboard",rawName:"v-clipboard:copy",value:t.code.trim(),expression:"code.trim()",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:t.onCopy,expression:"onCopy",arg:"success"}],staticClass:"btn-copy",attrs:{type:"primary",icon:"copy",size:"small"}},[t._v("Copy")]),t._v(" "),n("highlight-code",{staticStyle:{"max-height":"500px"},attrs:{lang:t.lang?t.lang:"html"}},[t._v("\n\t\t"+t._s(t.code)+"\n\t")])],1)}),[],!1,null,null,null);e.default=component.exports},1227:function(t,e,n){"use strict";n.r(e);var o=[{title:"AUTHOR",dataIndex:"author",scopedSlots:{customRender:"author"}},{title:"FUNCTION",dataIndex:"func",scopedSlots:{customRender:"func"}},{title:"STATUS",dataIndex:"status",scopedSlots:{customRender:"status"}},{title:"EMPLOYED",dataIndex:"employed",class:"text-muted"},{title:"",scopedSlots:{customRender:"editBtn"},width:50}],l=[{key:"1",author:{avatar:"/images/face-2.jpg",name:"Michael John",email:"michael@mail.com"},func:{job:"Manager",department:"Organization"},status:1,employed:"23/04/18"},{key:"2",author:{avatar:"/images/face-3.jpg",name:"Alexa Liras",email:"alexa@mail.com"},func:{job:"Programator",department:"Developer"},status:0,employed:"23/12/20"},{key:"3",author:{avatar:"/images/face-1.jpg",name:"Laure Perrier",email:"laure@mail.com"},func:{job:"Executive",department:"Projects"},status:1,employed:"13/04/19"},{key:"4",author:{avatar:"/images/face-4.jpg",name:"Miriam Eric",email:"miriam@mail.com"},func:{job:"Marketing",department:"Organization"},status:1,employed:"03/04/21"},{key:"5",author:{avatar:"/images/face-5.jpeg",name:"Richard Gran",email:"richard@mail.com"},func:{job:"Manager",department:"Organization"},status:0,employed:"23/03/20"},{key:"6",author:{avatar:"/images/face-6.jpeg",name:"John Levi",email:"john@mail.com"},func:{job:"Tester",department:"Developer"},status:0,employed:"14/04/17"}],r=[{title:"COMPANIES",dataIndex:"company",scopedSlots:{customRender:"company"},width:300},{title:"BUDGET",dataIndex:"budget",class:"font-semibold text-muted"},{title:"STATUS",dataIndex:"status",class:"font-semibold text-muted text-sm"},{title:"COMPLETION",scopedSlots:{customRender:"completion"},dataIndex:"completion"},{title:"",scopedSlots:{customRender:"editBtn"},width:50}],c=[{key:"1",company:{name:"Spotify Version",logo:"/images/logos/logo-spotify.svg"},status:"working",budget:"$14,000",completion:60},{key:"2",company:{name:"Progress Track",logo:"/images/logos/logo-atlassian.svg"},status:"working",budget:"$3,000",completion:10},{key:"3",company:{name:"Jira Platform Errors",logo:"/images/logos/logo-slack.svg"},status:"done",budget:"Not Set",completion:{status:"success",value:100}},{key:"4",company:{name:"Launch new Mobile App",logo:"/images/logos/logo-spotify.svg"},status:"canceled",budget:"$20,600",completion:{status:"exception",value:50}},{key:"5",company:{name:"Web Dev",logo:"/images/logos/logo-webdev.svg"},status:"working",budget:"$4,000",completion:80},{key:"6",company:{name:"Redesign Online Store",logo:"/images/logos/logo-invision.svg"},status:"canceled",budget:"$2,000",completion:{status:"exception",value:0}}],m={head:function(){return{title:"Table | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"description",name:"description",content:"A table displays rows of data."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use","Authors-Table":"Authors Table","Projects-Table":"Projects Table"},data:l,columns:o,table2Data:c,table2Columns:r,authorsTableCode:"\n<template>\n\t<a-table :columns=\"columns\" :data-source=\"data\" :pagination=\"false\">\n\n\t\t<template slot=\"author\" slot-scope=\"author\">\n\t\t\t<div class=\"table-avatar-info\">\n\t\t\t\t<a-avatar shape=\"square\" :src=\"author.avatar\" />\n\t\t\t\t<div class=\"avatar-info\">\n\t\t\t\t\t<h6>{{ author.name }}</h6>\n\t\t\t\t\t<p>{{ author.email }}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template slot=\"func\" slot-scope=\"func\">\n\t\t\t<div class=\"author-info\">\n\t\t\t\t<h6 class=\"m-0\">{{ func.job }}</h6>\n\t\t\t\t<p class=\"m-0 font-regular text-muted\">{{ func.department }}</p>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template slot=\"status\" slot-scope=\"status\">\n\t\t\t<a-tag class=\"tag-status\" :class=\"status ? 'ant-tag-primary' : 'ant-tag-muted'\">\n\t\t\t\t{{ status ? \"ONLINE\" : \"OFFLINE\" }}\n\t\t\t</a-tag>\n\t\t</template>\n\n\t\t<template slot=\"editBtn\" slot-scope=\"row\">\n\t\t\t<a-button type=\"link\" :data-id=\"row.key\" class=\"btn-edit\">\n\t\t\t\tEdit\n\t\t\t</a-button>\n\t\t</template>\n\n\t</a-table>\n</template>\n<script>\n\tconst columns = [\n\t\t{\n\t\t\ttitle: 'AUTHOR',\n\t\t\tdataIndex: 'author',\n\t\t\tscopedSlots: { customRender: 'author' },\n\t\t},\n\t\t{\n\t\t\ttitle: 'FUNCTION',\n\t\t\tdataIndex: 'func',\n\t\t\tscopedSlots: { customRender: 'func' },\n\t\t},\n\t\t{\n\t\t\ttitle: 'STATUS',\n\t\t\tdataIndex: 'status',\n\t\t\tscopedSlots: { customRender: 'status' },\n\t\t},\n\t\t{\n\t\t\ttitle: 'EMPLOYED',\n\t\t\tdataIndex: 'employed',\n\t\t\tclass: 'text-muted',\n\t\t},\n\t\t{\n\t\t\ttitle: '',\n\t\t\tscopedSlots: { customRender: 'editBtn' },\n\t\t\twidth: 50,\n\t\t},\n\t];\n\n\tconst data = [\n\t\t{\n\t\t\tkey: '1',\n\t\t\tauthor: {\n\t\t\t\tavatar: '/images/face-2.jpg',\n\t\t\t\tname: 'Michael John',\n\t\t\t\temail: 'michael@mail.com',\n\t\t\t},\n\t\t\tfunc: {\n\t\t\t\tjob: 'Manager',\n\t\t\t\tdepartment: 'Organization',\n\t\t\t},\n\t\t\tstatus: 1,\n\t\t\temployed: '23/04/18',\n\t\t},\n\t\t{\n\t\t\tkey: '2',\n\t\t\tauthor: {\n\t\t\t\tavatar: '/images/face-3.jpg',\n\t\t\t\tname: 'Alexa Liras',\n\t\t\t\temail: 'alexa@mail.com',\n\t\t\t},\n\t\t\tfunc: {\n\t\t\t\tjob: 'Programator',\n\t\t\t\tdepartment: 'Developer',\n\t\t\t},\n\t\t\tstatus: 0,\n\t\t\temployed: '23/12/20',\n\t\t},\n\t\t{\n\t\t\tkey: '3',\n\t\t\tauthor: {\n\t\t\t\tavatar: '/images/face-1.jpg',\n\t\t\t\tname: 'Laure Perrier',\n\t\t\t\temail: 'laure@mail.com',\n\t\t\t},\n\t\t\tfunc: {\n\t\t\t\tjob: 'Executive',\n\t\t\t\tdepartment: 'Projects',\n\t\t\t},\n\t\t\tstatus: 1,\n\t\t\temployed: '13/04/19',\n\t\t},\n\t\t{\n\t\t\tkey: '4',\n\t\t\tauthor: {\n\t\t\t\tavatar: '/images/face-4.jpg',\n\t\t\t\tname: 'Miriam Eric',\n\t\t\t\temail: 'miriam@mail.com',\n\t\t\t},\n\t\t\tfunc: {\n\t\t\t\tjob: 'Marketing',\n\t\t\t\tdepartment: 'Organization',\n\t\t\t},\n\t\t\tstatus: 1,\n\t\t\temployed: '03/04/21',\n\t\t},\n\t\t{\n\t\t\tkey: '5',\n\t\t\tauthor: {\n\t\t\t\tavatar: '/images/face-5.jpeg',\n\t\t\t\tname: 'Richard Gran',\n\t\t\t\temail: 'richard@mail.com',\n\t\t\t},\n\t\t\tfunc: {\n\t\t\t\tjob: 'Manager',\n\t\t\t\tdepartment: 'Organization',\n\t\t\t},\n\t\t\tstatus: 0,\n\t\t\temployed: '23/03/20',\n\t\t},\n\t\t{\n\t\t\tkey: '6',\n\t\t\tauthor: {\n\t\t\t\tavatar: '/images/face-6.jpeg',\n\t\t\t\tname: 'John Levi',\n\t\t\t\temail: 'john@mail.com',\n\t\t\t},\n\t\t\tfunc: {\n\t\t\t\tjob: 'Tester',\n\t\t\t\tdepartment: 'Developer',\n\t\t\t},\n\t\t\tstatus: 0,\n\t\t\temployed: '14/04/17',\n\t\t},\n\t];\n\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tdata,\n\t\t\t\tcolumns,\n\t\t\t};\n\t\t},\n\t};\n<\/script>",projectsTableCode:'\n<template>\n\t<a-table :columns="columns" :data-source="data" :pagination="false">\n\n\t\t<template slot="name" slot-scope="text">\n\t\t\t<a>{{ text }}</a>\n\t\t</template>\n\n\t\t<a-space slot="members" slot-scope="members" :size="-12" class="avatar-chips">\n\t\t\t<template v-for="member in members">\n\t\t\t\t<a-avatar :key="member" size="small" :src="member" />\n\t\t\t</template>\n\t\t</a-space>\n\n\t\t<template slot="company" slot-scope="company">\n\t\t\t<h6 class="m-0">\n\t\t\t\t<img :src="company.logo" width="25" style="margin-right: 10px;">\n\t\t\t\t{{ company.name }}\n\t\t\t</h6>\n\t\t</template>\n\n\t\t<template slot="completion" slot-scope="completion">\n\t\t\t<div class="progress-right">\n\t\t\t\t<div class="text-right text-sm font-semibold text-muted pr-15">{{ completion.value || completion.value == 0 ? completion.value : completion }}%</div>\n\t\t\t\t<a-progress class="m-0" :percent="completion.value || completion.value == 0 ? completion.value : completion" :show-info="false" size="small" :status="completion.status ? completion.status : \'normal\'" />\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template slot="editBtn" slot-scope="row">\n\t\t\t<a-button type="link" :data-id="row.key">\n\t\t\t\t<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t\t\t\t\t<path class="fill-gray-7" d="M13.5858 3.58579C14.3668 2.80474 15.6332 2.80474 16.4142 3.58579C17.1953 4.36683 17.1953 5.63316 16.4142 6.41421L15.6213 7.20711L12.7929 4.37868L13.5858 3.58579Z"/>\n\t\t\t\t\t<path class="fill-gray-7" d="M11.3787 5.79289L3 14.1716V17H5.82842L14.2071 8.62132L11.3787 5.79289Z"/>\n\t\t\t\t</svg>\n\t\t\t</a-button>\n\t\t</template>\n\n\t</a-table>\n</template>\n<script>\n\tconst columns = [\n\t\t{\n\t\t\ttitle: \'COMPANIES\',\n\t\t\tdataIndex: \'company\',\n\t\t\tscopedSlots: { customRender: \'company\' },\n\t\t\twidth: 300,\n\t\t},\n\t\t{\n\t\t\ttitle: \'BUDGET\',\n\t\t\tdataIndex: \'budget\',\n\t\t\tclass: \'font-semibold text-muted\',\n\t\t},\n\t\t{\n\t\t\ttitle: \'STATUS\',\n\t\t\tdataIndex: \'status\',\n\t\t\tclass: \'font-semibold text-muted text-sm\',\n\t\t},\n\t\t{\n\t\t\ttitle: \'COMPLETION\',\n\t\t\tscopedSlots: { customRender: \'completion\' },\n\t\t\tdataIndex: \'completion\',\n\t\t},\n\t\t{\n\t\t\ttitle: \'\',\n\t\t\tscopedSlots: { customRender: \'editBtn\' },\n\t\t\twidth: 50,\n\t\t},\n\t];\n\n\tconst data = [\n\t\t{\n\t\t\tkey: \'1\',\n\t\t\tcompany: {\n\t\t\t\tname: \'Spotify Version\',\n\t\t\t\tlogo: \'/images/logos/logo-spotify.svg\',\n\t\t\t},\n\t\t\tstatus: "working",\n\t\t\tbudget: \'$14,000\',\n\t\t\tcompletion: 60,\n\t\t},\n\t\t{\n\t\t\tkey: \'2\',\n\t\t\tcompany: {\n\t\t\t\tname: \'Progress Track\',\n\t\t\t\tlogo: \'/images/logos/logo-atlassian.svg\',\n\t\t\t},\n\t\t\tstatus: "working",\n\t\t\tbudget: \'$3,000\',\n\t\t\tcompletion: 10,\n\t\t},\n\t\t{\n\t\t\tkey: \'3\',\n\t\t\tcompany: {\n\t\t\t\tname: \'Jira Platform Errors\',\n\t\t\t\tlogo: \'/images/logos/logo-slack.svg\',\n\t\t\t},\n\t\t\tstatus: "done",\n\t\t\tbudget: \'Not Set\',\n\t\t\tcompletion: {\n\t\t\t\tstatus: \'success\',\n\t\t\t\tvalue: 100,\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tkey: \'4\',\n\t\t\tcompany: {\n\t\t\t\tname: \'Launch new Mobile App\',\n\t\t\t\tlogo: \'/images/logos/logo-spotify.svg\',\n\t\t\t},\n\t\t\tstatus: "canceled",\n\t\t\tbudget: \'$20,600\',\n\t\t\tcompletion: {\n\t\t\t\tstatus: \'exception\',\n\t\t\t\tvalue: 50,\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tkey: \'5\',\n\t\t\tcompany: {\n\t\t\t\tname: \'Web Dev\',\n\t\t\t\tlogo: \'/images/logos/logo-webdev.svg\',\n\t\t\t},\n\t\t\tstatus: "working",\n\t\t\tbudget: \'$4,000\',\n\t\t\tcompletion: 80,\n\t\t},\n\t\t{\n\t\t\tkey: \'6\',\n\t\t\tcompany: {\n\t\t\t\tname: \'Redesign Online Store\',\n\t\t\t\tlogo: \'/images/logos/logo-invision.svg\',\n\t\t\t},\n\t\t\tstatus: "canceled",\n\t\t\tbudget: \'$2,000\',\n\t\t\tcompletion: {\n\t\t\t\tstatus: \'exception\',\n\t\t\t\tvalue: 0,\n\t\t\t},\n\t\t},\n\t];\n\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tdata,\n\t\t\t\tcolumns,\n\t\t\t};\n\t\t},\n\t};\n<\/script>'}},methods:{}},d=n(81),component=Object(d.a)(m,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"page-row"},[n("div",{staticClass:"page-content"},[t._m(0),t._v(" "),n("a-divider"),t._v(" "),t._m(1),t._v(" "),n("h2",[t._v("Examples")]),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Authors-Table"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Authors Table")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tSimple table with actions.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase p-0"},[n("a-table",{attrs:{columns:t.columns,"data-source":t.data,pagination:!1},scopedSlots:t._u([{key:"author",fn:function(e){return[n("div",{staticClass:"table-avatar-info"},[n("a-avatar",{attrs:{shape:"square",src:e.avatar}}),t._v(" "),n("div",{staticClass:"avatar-info"},[n("h6",[t._v(t._s(e.name))]),t._v(" "),n("p",[t._v(t._s(e.email))])])],1)]}},{key:"func",fn:function(e){return[n("div",{staticClass:"author-info"},[n("h6",{staticClass:"m-0"},[t._v(t._s(e.job))]),t._v(" "),n("p",{staticClass:"m-0 font-regular text-muted"},[t._v(t._s(e.department))])])]}},{key:"status",fn:function(e){return[n("a-tag",{staticClass:"tag-status",class:e?"ant-tag-primary":"ant-tag-muted"},[t._v("\n\t\t\t\t\t\t\t\t\t"+t._s(e?"ONLINE":"OFFLINE")+"\n\t\t\t\t\t\t\t\t")])]}},{key:"editBtn",fn:function(e){return[n("a-button",{staticClass:"btn-edit",attrs:{type:"link","data-id":e.key}},[t._v("\n\t\t\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t\t\t")])]}}])})],1),t._v(" "),n("muse-snippet",{attrs:{code:t.authorsTableCode}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Projects-Table"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Projects Table")]),t._v(" "),n("div",{staticClass:"showcase p-0"},[n("a-table",{attrs:{columns:t.table2Columns,"data-source":t.table2Data,pagination:!1},scopedSlots:t._u([{key:"name",fn:function(text){return[n("a",[t._v(t._s(text))])]}},{key:"members",fn:function(e){return n("a-space",{staticClass:"avatar-chips",attrs:{size:-12}},[t._l(e,(function(t){return[n("a-avatar",{key:t,attrs:{size:"small",src:t}})]}))],2)}},{key:"company",fn:function(e){return[n("h6",{staticClass:"m-0"},[n("img",{staticStyle:{"margin-right":"10px"},attrs:{src:e.logo,width:"25"}}),t._v("\n\t\t\t\t\t\t\t\t\t"+t._s(e.name)+"\n\t\t\t\t\t\t\t\t")])]}},{key:"completion",fn:function(e){return[n("div",{staticClass:"progress-right"},[n("div",{staticClass:"text-right text-sm font-semibold text-muted pr-15"},[t._v(t._s(e.value||0==e.value?e.value:e)+"%")]),t._v(" "),n("a-progress",{staticClass:"m-0",attrs:{percent:e.value||0==e.value?e.value:e,"show-info":!1,size:"small",status:e.status?e.status:"normal"}})],1)]}},{key:"editBtn",fn:function(e){return[n("a-button",{attrs:{type:"link","data-id":e.key}},[n("svg",{attrs:{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"}},[n("path",{staticClass:"fill-gray-7",attrs:{d:"M13.5858 3.58579C14.3668 2.80474 15.6332 2.80474 16.4142 3.58579C17.1953 4.36683 17.1953 5.63316 16.4142 6.41421L15.6213 7.20711L12.7929 4.37868L13.5858 3.58579Z"}}),t._v(" "),n("path",{staticClass:"fill-gray-7",attrs:{d:"M11.3787 5.79289L3 14.1716V17H5.82842L14.2071 8.62132L11.3787 5.79289Z"}})])])]}}])})],1),t._v(" "),n("muse-snippet",{attrs:{code:t.projectsTableCode}})],1),t._v(" "),t._m(2)],1),t._v(" "),n("muse-anchor",{attrs:{anchors:t.anchors}})],1)])}),[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24"},[n("h1",[t._v("Table")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tA table displays rows of data.\n\t\t\t\t\t")])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24",attrs:{id:"When-To-Use"}},[n("h2",[t._v("When To Use")]),t._v(" "),n("ul",[n("li",[t._v("To display a collection of structured data.")]),t._v(" "),n("li",[t._v("To sort, search, paginate, filter data.")])])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("p",{staticClass:"text-right font-semibold mb-24"},[t._v("\n\t\t\t\t\tLooking for more Ant Design Vue Table? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/table/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,"e4f337e0",null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);