Quasar Data Table in Mobile View Overflow Outside and No Responsive



  • Hi,

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

    95aa4a8e-6d41-4634-abb2-84e3081f132d-image.png

    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?



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



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



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



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


Log in to reply