That is an old fiddle. Have a look at the header slot in QTable. https://v1.quasar-framework.org/vue-components/table This can get you rolling maybe. https://codepen.io/smolinari/pen/PgqEMM?editors=1010 Scott

if it helps, here is how I am using it. The first column and the last two columns need extra work. Everything else in the middle is done by a loop. <q-table dense color="teal-6" hide-bottom :data="alarms" :columns="columns" row-key="id" :pagination.sync="pagination" > <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props" @click.native="rowClick(props.row)" @dblclick.native="rowDoubleClick(props.row)" class="cursor-pointer" :style="rowStyleObject(props.row)"> <q-td key="downloaded" :props="props"> <q-icon :name="getDownloadStatusIcon(props)" /> </q-td> <q-td v-for="col in props.cols" v-if="col.name !== 'downloaded' && col.name !== 'acknowledgement' && col.name !== 'bookmark'" :key="col.name" :props="props" > {{ col.value }} </q-td> <q-td key="bookmark" :props="props"> <q-icon v-if="!props.row.bookmark" name="far fa-star" color="grey-4" @click.native="onBookmark(props.row)"/> <q-icon v-else name="far fa-star" color="teal-6" @click.native="onBookmark(props.row)"/> </q-td> <q-td key="acknowledgement" :props="props" :style="ackWhoStyleObject(props.row)"> <q-icon v-if="!props.row.ackWho" name="fas fa-ellipsis-h" color="grey-4" @click.native="onAckWho(props.row)"/> <q-icon v-else name="fas fa-bolt" color="teal-6" @click.native="onAckWho(props.row)"/> </q-td> </q-tr> </q-table>