Responsive layout in Q-Table v0.15

section14

In previous versions of Quasar with the Q-Data-Table, when you viewed it in mobile (sub 600px) mode, the table converted each row to a “responsive” version where the columns were listed vertically per row. An example can be shown here: http://v0-14.quasar-framework.org/components/datatable.html

However, with this new Q-Table, the table stays the same regardless of desktop or mobile view. Even the official docs seem to keep the traditional table view on mobile. Am I missing something obvious? Has it been removed? Horizontally scrolling any table over a handful of columns is cumbersome at best.

Sweetyy

Hi @section14 ,

Indeed, in the v0.15, QTable doesn’t handle the responsive anymore (for the moment)…
I did it on my own (because i really need responsive mode too) .
To apply the following code just add the class ‘table-responsive’ to <q-table> and data-label="Column title" to your ‘q-td’ which correspond to the title of the column

app.scss :

@media screen and (max-width: 767px) {
  .table-responsive {
    table {
      border: 0;

      thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      tr {
        background-color: #f8f8f8;
        border: 1px solid #ddd;
        padding: .35em;
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
      }

      td {
        border-bottom: 1px solid #ddd;
        display: block;
        text-align: right;
        white-space: initial;
        height: auto;
        padding: 8px 8px;
        min-height: 32px;

        &::before {
          content: attr(data-label);
          float: left;
          font-weight: bold;
          text-transform: uppercase;
        }

        &:first-child {
          width: 100%;
        }

        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}

My table :

<q-td auto-width :data-label="Title">
   Content of the td
</q-td>

Let me know if it doesn’t work as expected.

section14

Thank you for the reply. It works, but it seems like the data is all confined to the width of the first row. Maybe that’s due to my q-table layout? I cannot, for the life of me, seem to get the q-tr to work with q-td. I can get q-td to work on it’s own, but not both. q-tr is definitely being imported. I can style it, but the td is never loaded. Here’s my code:

 <q-table
    :data="dogData"
    :columns="columns"
    :hide-bottom="true"
    :rows-per-page-options=[0]
    :pagination.sync="pagination"
    row-key="name"
    class="table-responsive link-cursor"
  >

    <q-tr slot="body" slot-scope="props" @click.native="test()" class="cursor-pointer" :props="props">
      
      <q-td slot="body-cell-number" slot-scope="props" @click.native="test()" :props="props">
        <span class="text-red-10">{{props.row.TAGNUM}}</span>
      </q-td>

      <q-td slot="body-cell-first_name" slot-scope="props" data-label="Tag Number" :props="props">
        <span class="text-black">{{props.row.FIRSTNAME}}</span>
      </q-td>

       ...
    
    </q-tr>

  </q-table>

I followed the docs, but nothing shows up when using q-tr. As soon as I comment it out, all the fields show up. Like the props aren’t passed down. I looked at the source code for q-tr, but can’t see anything glaring. At this point, I’d just like to implement the old one. I have no use for any bells or whistles. Just a simple table that is responsive.

Hawkeye64

if it helps, here is how I am using it. The first column and the last two columns need extra work. Everything else in the middle is done by a loop.

    <q-table
      dense
      color="teal-6"
      hide-bottom
      :data="alarms"
      :columns="columns"
      row-key="id"
      :pagination.sync="pagination"
    >
      <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props" @click.native="rowClick(props.row)" @dblclick.native="rowDoubleClick(props.row)" class="cursor-pointer" :style="rowStyleObject(props.row)">
        <q-td key="downloaded" :props="props">
          <q-icon :name="getDownloadStatusIcon(props)" />
        </q-td>
        <q-td
          v-for="col in props.cols"
          v-if="col.name !== 'downloaded' && col.name !== 'acknowledgement' && col.name !== 'bookmark'"
          :key="col.name"
          :props="props"
        >
          {{ col.value }}
        </q-td>
        <q-td key="bookmark" :props="props">
          <q-icon v-if="!props.row.bookmark" name="far fa-star" color="grey-4" @click.native="onBookmark(props.row)"/>
          <q-icon v-else name="far fa-star"  color="teal-6" @click.native="onBookmark(props.row)"/>
        </q-td>
        <q-td key="acknowledgement" :props="props" :style="ackWhoStyleObject(props.row)">
          <q-icon v-if="!props.row.ackWho" name="fas fa-ellipsis-h" color="grey-4" @click.native="onAckWho(props.row)"/>
          <q-icon v-else name="fas fa-bolt" color="teal-6" @click.native="onAckWho(props.row)"/>
        </q-td>
      </q-tr>
    </q-table>

No More Posting New Topics!

Responsive layout in Q-Table v0.15