[Vuejs]-Adjust width of vuetify datatable "rows per page" menu width because text is truncated

by

0👍

✅

Although not ideal, I made a global style instead of a scoped one. In other words, I went from <style scoped> ... </style> to <style> ... </style>.

In this particular case I used: 

<style> 
  .v-list__tile__title { 
    min-width: 3em;
  }
</style>

0👍

You should set it in your data and access it in the table. Like so:

data: () => ({
  pagination: {
    descending: true,
    page: 1,
    rowsPerPage: 5,
    totalItems: 0,
    rowsPerPageItems: [5, 10, 25, 50, 100],
  },
})

then when you set your data table:

<v-data-table
  ...
  :pagination.sync="pagination"
  :rows-per-page-items="pagination.rowsPerPageItems"
  :total-items="pagination.totalItems"
  ...
>

Leave a comment