Markup Table
The QMarkupTable is a way for you to simply wrap a native <table>
in order to make it look like a Material Design table.
TIP
For advanced functionality like pagination, sorting, filtering, and many more, you may want to check out QTable component instead.
Installation
/*
* No installation step is necessary.
* It gets installed by default by @quasar/app v2+.
*/
Usage
WARNING
Notice that the content of QMarkupTable
reflects an accurate markup representation of a native HTML <table>
, having a <thead>
and <tbody>
to wrap header and table body. This is required.
UMD developers
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 (<table class="....
).