selection option in config is showing weird UI



  • 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).

    9 checkboxes for 10 records.

    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>


  • try setting the row height in the global table config.

    patientConfigs: {
            rowHeight: '50px'
    }
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.