Is there a way to do that currently? Or a workaround for it? I tried accessing the elements using DOM and disabling the checkboxes, but on sorting the checkboxes dont change their rows with the whole row so didnt work.

Having the same issue, I did a temporary fix by adding a close button and hiding and showing again with jquery.

Is there a guide on how to build and include your own build of quasar framework by modifying package.json? I want to include my custom icons.

The problem is, hideLeft is not working on the side bar which comes with an overlay.

How did you fix this ssuess?

Steps to reproduce

1. Visit https://trsiddiqui.github.io/VueQuasarDemoPages/
2. Zoom in so much that when you click on website title the side bar shows with an overlay rather than being on the side.
3. Now click on the link in the side bar (although its the link to same page but transition to the page occurs)
4. Click anywhere other than side bar (side bar wont close).

App.vue is at https://github.com/trsiddiqui/VueQuasarDemoPages/blob/master/src/App.vue
Drawer.vue is at https://github.com/trsiddiqui/VueQuasarDemoPages/blob/master/src/components/layout/drawer/drawer.vue

I got the answer here.

https://stackoverflow.com/questions/46734790/dynamic-selection-method-of-qdatatable-quasar-framework-vue-js

I have a list of collapsible’s in a v-for, and a QDataTable component inside with multiple selection as below.

            <q-collapsible :label="req.label" v-for="(req, index) in requisitions" :key="index" class="collapsible-no-padding requisitionContainer" @open="openRequisition('Requisition' + req.reqId)" @close="closeRequisition('Requisition' + req.reqId)" :id='"Requisition" + req.reqId'>
              <q-list>
                <q-item link class='ordersContainer'>
                  <q-item-main>
                    <q-data-table
                      :data="req.filteredOrdersList"
                      :config="orderConfigs"
                      :columns="orderColumns"
                      @selection="selectOrders">
                    </q-data-table>
                  </q-item-main>
                </q-item>
              </q-list>
            </q-collapsible>

It looks like this Image

However, since there are more than one table, if a selection is made on any of the tables, it does call the selection method with the selected item, but I have no way to tell which table is it a part of. This is a problem when a selection is removed, for which I need to distinguish between each tables selection event. Is there a way to do it?

After loading the data through an API (I dont know if that might be the cause of the issue) the checkbox column is weird and is displaying 9 checkboxes for 10 rows, as shown in the screenshot (http://smgen.ca/qtableissue.png).

.

Here is the code (only including the relevant parts)

<template>
      <q-data-table
        :data="patients"
        :config="patientConfigs"
        :columns="patientColumns">
      </q-data-table>
</template>

<script>
  import tooltipButton from './tooltipButton.vue'
  export default {
    mounted () {
    },
    data () {
      return {
        patients: [],
        name: '',
        dob: '',
        ssn: '',
        phone: '',
        patientColumns: [
          { label: 'First Name', field: 'firstName', width: '30px', sort: true },
          { label: 'Last Name', field: 'lastName', width: '30px', sort: true },
          { label: 'Gender', field: 'gender', width: '30px', sort: true },
          { label: 'Date of Birth', field: 'birthdate', width: '30px', sort: true },
          { label: 'Address', field: 'stLine1', width: '50px' },
          { label: 'City', field: 'city', width: '30px', sort: true },
          { label: 'State', field: 'state', width: '30px', sort: true },
          { label: 'Phone', field: 'phoneNumber', width: '30px' },
          { label: 'SSN', field: 'ssnIdNumber', width: '50px' }
        ],
        patientConfigs: {
          columnPicker: true,
          title: 'Patients',
          pagination: {
            rowsPerPage: 15,
            options: [5, 10, 15, 30, 50, 500]
          },
          selection: 'multiple'
        },     
    },
    watch: {
      page () {
      }
    },
    computed: {
      patientUrl () {
        return `sampleuri`
      },
      search () {
        return `sampleuri`
      }
    },
    methods: {
      findPatients () {
        this.$http.punk
          .get(this.patientUrl)
          .then(response => {
            this.patients = response.data
          })
      },
    },
    components: {
    }
  }
</script>