Answer a question

In a Buefy table I need to display the data as a regular table with columns horizontally on all media, not with the stacked cards on mobile. To fit the content I use a media query to simply hide all but the most important columns.

  <b-table :data="this.standings">
     <template slot-scope="props">
         <b-table-column field="pos" numeric>{{props.row.pos}}</b-table-column>
         <b-table-column field="name">{{props.row.name}}</b-table-column>
         <b-table-column field="details" :visible="useFullTable()">{{props.row.details}}</b-table-column>
            ...

Hiding the detailed column data works, but the table still switches to card view when the viewport is small.

Is there any way I can disable the responsive behavior? Note I only want to do this for this one table or view, I don't want to set the global breakpoints differently or disable reactive tables entirely in the app.

Answers

According to the documentation you can turn off mobile cards by binding the mobile-cards property of the table to false.

From my understanding you should be able to do the job using:

<b-table :data="this.standings" :mobile-cards="false">
// Table content
</b-table>