Quasar Data Table in Mobile View Overflow Outside and No Responsive

[hazifahanail]

Hi,

I try to put Data Table in my components, but seems the data table is overflow outside when browser changed to mobile view.

The code is :

<template>
  <q-table
    title="Table Title"
    :data="tableData"
    :columns="columns"
    row-key="name"
  />
</template>

<script>
export default {
  data: () => ({
    columns: [
      {
        name: 'desc',
        required: true,
        label: 'Dessert (100g serving)',
        align: 'left',
        field: 'name',
        sortable: true
      },
      { name: 'calories', label: 'Calories', field: 'calories', sortable: true },
      { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
      { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
      { name: 'protein', label: 'Protein (g)', field: 'protein' },
      { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
      { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
      { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
    ],
    tableData: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        sodium: 87,
        calcium: '14%',
        iron: '1%'
      }
    ]
  })
}
</script>

at first i thought it is because of <div class=“row”> but it doesn’t as I removed it already. Anyone have any idea why is this happening?

[metalsadman]

@hazifahanail it’s displaying fine here https://codepen.io/metalsadman/pen/oOMbEo?editors=1010, maybe show your q-stepper code.

[hazifahanail]

@metalsadman

this is my q-stepper code :

<template>
  <q-page >
    <div class="q-pa-md">
          <q-stepper flat ref="stepper" v-model="step" color="primary" :alternative-labels="alt" :contractable="contractable">
            <q-step default name="suitabilityassessment" title="Suitability Assessment">
              <SAT></SAT> 
              <q-stepper-navigation v-if="!globalNavigation">
                <q-btn color="primary" @click="$refs.stepper.goToStep('suitabilityassessment')">Calculate</q-btn>
                <q-btn class="q-ml-sm" color="primary" @click="$refs.stepper.next()">Continue</q-btn>
              </q-stepper-navigation>
            </q-step>

            <q-step name="applicantsetails" title="Applicant Details" subtitle="">
              <AD></AD>
              <q-stepper-navigation v-if="!globalNavigation">
                <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
              </q-stepper-navigation>
            </q-step>

            <q-step name="employment details" title="Employment Details" subtitle="">
              <ED></ED>

              <q-stepper-navigation v-if="!globalNavigation">
                <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
              </q-stepper-navigation>
            </q-step>

            <q-step name="fatca" title="FATCA">
              <FATCA></FATCA>

              <q-stepper-navigation v-if="!globalNavigation">
                <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
              </q-stepper-navigation>
            </q-step>

            <q-step name="fundinvestment"  title="Fund Investment" subtitle="">
              <FI></FI>

              <q-stepper-navigation v-if="!globalNavigation">
                <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
              </q-stepper-navigation>
            </q-step>


            <q-step name="payment" icon="account_balance_wallet" title="Payment">
              <p>Payment -- To be continued</p>

              <q-stepper-navigation v-if="!globalNavigation">
                <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
              </q-stepper-navigation>
            </q-step>

            

            <q-stepper-navigation v-if="globalNavigation">
              <q-btn
                v-if="step !== 'suitabilityassessment'"
                color="primary"
                flat
                @click="$refs.stepper.previous()"
              >
                Back
              </q-btn>

              <q-btn class="q-ml-sm" color="primary" @click="$refs.stepper.next()">
                {{ step === 'payment' ? 'Finalize' : 'Next' }}
              </q-btn>
            </q-stepper-navigation>

            <q-inner-loading :visible="progress" />
          </q-stepper>

    </div>
  </q-page>
</template>

the data table is located at Fund Investment, where I call components as I shared previously.

[dwms]

this is actually happening in version 0.17.20. Someone help us?

[metalsadman]

@hazifahanail @dwms if it’s pre v1, found a work around by adding a class="no-wrap" on your q-stepper component https://codepen.io/metalsadman/pen/earLKQ?editors=1010.