CODEWITHSUNDEEP
vue.jsquasar-frameworkquasar
DeathInWhite
DeathInWhite

Reputation: 197

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!

Upvotes: 0

Views: 4624

Answers (2)

Azutanguy
Azutanguy

Reputation: 141

In an update of September 2020 https://github.com/quasarframework/quasar/issues/7519

You can now change only the cell of selection (header or body) with header-selection and body-selection.

So to hide the select all toggle, you can write:

<template v-slot:header-selection></template>

https://codepen.io/azutanguy/pen/wvZwvVg?editors=101

Upvotes: 0

Pratik Patel
Pratik Patel

Reputation: 6978

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

Upvotes: 2

Related Questions