I am using quasar and I added a table with multiple selections like this image:
The problem is that I can't find a way to hide the checkbox in the header that selects all the options of the table.
This is the code that I use:
<q-table flat title="Please select ETF to compare" :data="etf_comp" :columns="columns_compare_etf" row-key="name" :selected-rows-label="getSelectedString" selection="multiple" :filter="filter" :selected.sync="selected_comparing_etf">
<template v-slot:top>
<q-btn color="primary" :label="menu_option_selected" class="q-my-lg">
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup v-for="option in menu_option_list" :key="option.name" @click="comparingChangeLabel(option.name,option.value)">
<q-item-section>${option.name}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-space></q-space>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</template>
</q-table>
Columns:
columns_compare_etf: [{
name: 'ticker',
align: 'left',
label: 'Ticker',
field: 'ticker',
sortable: true
}, {
name: 'name',
align: 'left',
label: 'Name',
field: 'name',
sortable: true
}, ]
Thanks!
You can't achieve this directly. You need to use header slot and leave the first q-th
black.
<template v-slot:header="props">
<q-tr :props="props">
<q-th></q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
class="text-italic text-purple"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
codepen - https://codepen.io/Pratik__007/pen/eYNaddb?editors=1010