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

Quasar CLI

UMD

Vue CLI

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QMarkupTable'
    ]
  }
}

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="....).

QMarkupTable API

Ready for more?