The QMarkupTable is a way for you to simply wrap a native
<table> in order to make it look like a Material Design table.
For advanced functionality like pagination, sorting, filtering, and many more, you may want to check out QTable component instead.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
Notice that the content of
QMarkupTable reflects an accurate markup representation of a native HTML
<table>, having a
<tbody> to wrap header and table body. This is required.
This component will NOT 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.
<q-markup-table> <thead> or
<q-markup-table> <tbody> is not. The solution is to directly use the QMarkupTable Vue rendered tag (
If you want to remove the hover effect on some rows or some cells add a
q-td--no-hover class to them.