Responsive layout in Q-Table v0.15



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



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



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



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