How to make subtitles in Quasar table

Question

I working on Vue3 with Quasar/cli.

How to make this category dividers (blue subtitles) with Quasar component qTable or qMarkupTable? screen

Ive tried to figure out body slots but I couldnt

Link to qTable API doc https://quasar.dev/vue-components/table#introduction

Link to qMarkupTable API doc https://quasar.dev/vue-components/markup-table#introduction

Answer 1

For QMarkupTable, add a row whose TD spans all the columns:

<q-markup-table>
  <thead>
    <tr>
      <th>№</th>
      <th>Name</th>
      <th>Code</th>
      <th>Diff</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-primary text-white">
      <td colspan="4">Medicines</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mukosolvan</td>
      <td>101492</td>
      <td class="text-negative">1</td>
    </tr>
  </tbody>
</q-markup-table>

QMarkupTable is a regular HTML table - it just applies the proper styling on it, everything else is the same HTML you've been studying as a student.