selection option in config is showing weird UI

[trsiddiqui1989]

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>

[ssuess]

try setting the row height in the global table config.

patientConfigs: {
        rowHeight: '50px'
}