JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.14.2/dist/quasar.umd.prod.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quasar@2.14.2/dist/quasar.min.css">


<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-table
      flat bordered
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="name"
      selection="multiple"
      v-model:selected="selected"
      table-class="xxx"
    >
      <template #header-cell-selection="props">
        <q-th :props="props">
          <q-checkbox v-model="props.selected"></q-checkbox>
        </q-th>
      </template>

      <template #body-cell-selection="props">
        <q-td :props="props">
          <q-checkbox v-model="props.selected"></q-checkbox>
        </q-td>
      </template>
    </q-table>
  </div>
</div>

CSS

.xxx tr > :first-child {
  display: none;
}

JavaScript

const columns = [
  {
    name: 'name',
    required: true,
    label: 'Dessert (100g serving)',
    align: 'left',
    field: row => row.name,
    format: val => `${val}`,
    sortable: true
  },
  { name:  'calories', label:    'Calories', field: 'calories', sortable: true },
  { name:       'fat', label:     'Fat (g)', field:      'fat', sortable: true },
  { name:     'carbs', label:   'Carbs (g)', field:    'carbs' },
  { name:   'protein', label: 'Protein (g)', field:  'protein' },
  { name:    'sodium', label: 'Sodium (mg)', field:   'sodium' },
  { name:   'calcium', label: 'Calcium (%)', field:  'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
  { name:      'iron', label:    'Iron (%)', field:     'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
  { name: 'selection' },
];

const rows = [
  { name:      'Frozen Yogurt', calories: 159, fat:  6.0, carbs: 24, protein: 4.0, sodium:  87, calcium: '14%', iron:  '1%' },
  { name: 'Ice cream sandwich', calories: 237, fat:  9.0, carbs: 37, protein: 4.3, sodium: 129, calcium:  '8%', iron:  '1%' },
  { name:             'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, sodium: 337, calcium:  '6%', iron:  '7%' },
  { name:            'Cupcake', calories: 305, fat:  3.7, carbs: 67, protein: 4.3, sodium: 413, calcium:  '3%', iron:  '8%' },
  { name:        'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, sodium: 327, calcium:  '7%', iron: '16%' },
  { name:         'Jelly bean', calories: 375, fat:  0.0, carbs: 94, protein: 0.0, sodium:  50, calcium:  '0%', iron:  '0%' },
  { name:           'Lollipop', calories: 392, fat:  0.2, carbs: 98, protein: 0.0, sodium:  38, calcium:  '0%', iron:  '2%' },
  { name:          'Honeycomb', calories: 408, fat:  3.2, carbs: 87, protein: 6.5, sodium: 562, calcium:  '0%', iron: '45%' },
  { name:              'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, sodium: 326, calcium:  '2%',...