vue.jsquasar-frameworkquasar

Remove (or hide) select all check box Table component in Quasar


I am using quasar and I added a table with multiple selections like this image:

enter image description here

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.

enter image description here

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!


Solution

  • 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