text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[5633],{5633:(e,a,t)=>{t.r(a),t.d(a,{default:()=>T});var o=t(83673);const l=(0,o._)("p",null,[(0,o.Uk)("The QMarkupTable is a way for you to simply wrap a native "),(0,o._)("code",{class:"doc-token"},"<table>"),(0,o.Uk)(" in order to make it look like a Material Design table.")],-1),c={class:"doc-note doc-note--tip"},n=(0,o._)("p",{class:"doc-note__title"},"TIP",-1),s=(0,o.Uk)("For advanced functionality like pagination, sorting, filtering, and many more, you may want to check out "),i=(0,o.Uk)("QTable"),d=(0,o.Uk)(" component instead."),r=(0,o._)("div",{class:"doc-note doc-note--warning"},[(0,o._)("p",{class:"doc-note__title"},"WARNING"),(0,o._)("p",null,[(0,o.Uk)("Notice that the content of "),(0,o._)("code",{class:"doc-token"},"QMarkupTable"),(0,o.Uk)(" reflects an accurate markup representation of a native HTML "),(0,o._)("code",{class:"doc-token"},"<table>"),(0,o.Uk)(", having a "),(0,o._)("code",{class:"doc-token"},"<thead>"),(0,o.Uk)(" and "),(0,o._)("code",{class:"doc-token"},"<tbody>"),(0,o.Uk)(" to wrap header and table body. This is required.")])],-1),p=(0,o._)("div",{class:"doc-note doc-note--warning"},[(0,o._)("p",{class:"doc-note__title"},"UMD developers"),(0,o._)("p",null,[(0,o.Uk)("This component will "),(0,o._)("em",null,"NOT"),(0,o.Uk)(" work as-is within the UMD version of Quasar. Browsers parse the template HTML before Vue kicks in and renders it, so the markup needs to be correct. "),(0,o._)("code",{class:"doc-token"},"<q-markup-table> <thead>"),(0,o.Uk)(" or "),(0,o._)("code",{class:"doc-token"},"<q-markup-table> <tbody>"),(0,o.Uk)(" is not. The solution is to directly use the QMarkupTable Vue rendered tag ("),(0,o._)("code",{class:"doc-token"},'<table class="....'),(0,o.Uk)(").")])],-1),k=(0,o._)("div",{class:"doc-note doc-note--tip"},[(0,o._)("p",{class:"doc-note__title"},"TIP"),(0,o._)("p",null,[(0,o.Uk)("If you want to remove the hover effect on some rows or some cells add a "),(0,o._)("code",{class:"doc-token"},"q-tr--no-hover"),(0,o.Uk)(" or "),(0,o._)("code",{class:"doc-token"},"q-td--no-hover"),(0,o.Uk)(" class to them.")])],-1);function u(e,a,t,u,m,_){const h=(0,o.up)("doc-link"),b=(0,o.up)("doc-api"),T=(0,o.up)("doc-example"),g=(0,o.up)("doc-page");return(0,o.wg)(),(0,o.j4)(g,{"meta-title":u.metaTitle,title:"Markup Table",related:u.related,toc:u.toc,"meta-desc":u.metaDesc},{default:(0,o.w5)((()=>[l,(0,o._)("div",c,[n,(0,o._)("p",null,[s,(0,o.Wm)(h,{to:"/vue-components/table"},{default:(0,o.w5)((()=>[i])),_:1}),d])]),(0,o._)("h2",{id:"qmarkuptable-api",class:"doc-heading doc-h2",onClick:a[0]||(a[0]=e=>u.copyHeading("qmarkuptable-api"))},"QMarkupTable API"),(0,o.Wm)(b,{file:"QMarkupTable"}),(0,o._)("h2",{id:"usage",class:"doc-heading doc-h2",onClick:a[1]||(a[1]=e=>u.copyHeading("usage"))},"Usage"),r,p,(0,o.Wm)(T,{title:"Basic",file:"QMarkupTable/Basic","no-edit":""}),(0,o.Wm)(T,{title:"Separators",file:"QMarkupTable/Separators","no-edit":""}),(0,o.Wm)(T,{title:"Dark",file:"QMarkupTable/Dark","no-edit":""}),(0,o.Wm)(T,{title:"Customization",file:"QMarkupTable/Customization","no-edit":""}),k])),_:1},8,["meta-title","related","toc","meta-desc"])}var m=t(17536);const _={name:"DocMarkdownPage",setup(){return{metaTitle:"Markup Table",metaDesc:"The QMarkupTable Vue component is a helper wrapper which styles a native table.",related:[{name:"表格",category:"Vue 组件",path:"/vue-components/table"}],toc:[{id:"qmarkuptable-api",title:"QMarkupTable API"},{id:"usage",title:"Usage"}],copyHeading:m.Et}}};var h=t(74260);const b=(0,h.Z)(_,[["render",u]]),T=b}}]);