[Feature Request] Prevent overflow in mobile data tables

[donalmurtagh]

Problem to solve

If the content of a mobile data table cell is too long, it breaks the layout

Proposed solution

The following style rule truncates the cell content to a single line when the data table is in mobile mode

.v-data-table__tr--mobile .v-data-table__td-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Demo

Remove the <style> element to see the problem without the solution

API Proposal

The style rule above should be enabled by a boolean prop that is false by default in order to avoid making this a breaking change.

[hridaya14]

API Proposal The style rule above should be enabled by a boolean prop that is false by defaults in order to avoid making this a breaking change.

Hi, I’ve added the required styles to VDataTable.sass, and after testing, it seems there are no breaking changes. Should I create a pull request with this implementation, or would you prefer I try the boolean approach mentioned earlier?

[MatthewAry]

@hridaya14 upon review of the issue, I don't believe that enabling truncation by default is a desirable for a data table cell, even in mobile. I'm not seeing in the reproduction anything that is breaking the layout on my end. Yet, in older versions of Vuetify, it was possible to apply a class to every cell in a column via the headers prop object under the class property, however today's version of vuetify doesn't have this. I think it would be best to add that feature back in, to resolve this issue if possible. Feel free to create a PR if you so choose, but I don't think it will be accepted if it's just changing the styles, as it will likely be considered regressive.

Vuetify already provides some functional css classes for governing text truncation.

This is beginning to look like this might not be a "good first issue" as I had originally thought. I'm sorry.

Alternatively, @donalmurtagh you could use the [`item.${string}`] prop and add your classes through that instead. See this for an example.

[KaelWD]

https://vuetifyjs.com/en/getting-started/upgrade-guide/#v-data-table

cellClass has been replaced with cellProps

[donalmurtagh]

Alternatively, @donalmurtagh you could use the [`item.${string}`] prop and add your classes through that instead. See this for an example.

Thanks for the suggestion, but the solution I've settled on is the following (global) SASS rule

table:has(.v-data-table__tr--mobile) {
  // When a data table is in mobile mode, restrict the cell content to a single line to prevent overflowing
  table-layout: auto !important;

  .v-data-table__td-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

The applies to all (data) tables in my app, so is preferable to a per-column, or per-table solution.