Quasar Framework

Pratik Patel

Try this code.

import { Platform } from 'quasar'

let custom_page;
if(Platform.is.mobile){
  custom_page ="mobileView.vue"
}
else{
    custom_page ="mainLayout.vue"
}

In route DIct .

{ path: '/', name: "/", component: () => import('layouts/' + custom_page)},

Pratik Patel

Use cell-name slot.

Doc - https://quasar.dev/vue-components/table#Example--Body-cell-[name]-slot

https://codepen.io/Pratik__007/pen/eYNvvva?editors=1010

Pratik Patel

Please refer the following codepen @iober .

https://codepen.io/Pratik__007/pen/eYNvvva?editors=1010

Pratik Patel

Hello everyone, I would like to share the Free Quasar admin template. You can access it using the following URL.

Github - https://github.com/pratik227/quasar-admin

demo - https://quasar-admin-demo.netlify.com/

Pratik Patel

@mshillinger You need to handle the selection separately.

Pratik Patel

You can use a custom body slot for this.

<q-table
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
      :selected-rows-label="getSelectedString"
      selection="multiple"
      :selected.sync="selected"
    >
      <template v-slot:body="props">
          <q-tr :props="props" v-if="!hasDefaultSlot">

            <q-td auto-width v-if="selection_prop!='none'">
              <q-checkbox v-if="props.row['fat']!='6' && props.row['fat']!='16'" color="primary" v-model="props.selected"/>
            </q-td>
            <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
            >
              {{ props.row[col.field] }}
            </q-td>
          </q-tr>
          </slot>
        </template>
    </q-table>

Codepen - https://codepen.io/Pratik__007/pen/ZEGJpGa