<b-table> Truncate text with ellipsis alternatively instead of text-wrap

Is your feature request related to a problem? Please describe…

When b-tables width gets crunched together the text wraps into new lines. In cases where there is no much horizontal space left this isn´t ideal and sometimes looks a bit weird.

Describe the solution you’d like

I would like the text inside b-table cells to be truncated with an ellipsis like the following if it does not fit in one row:

This text fits This text is to long and…

Additional context

I got the idea from @alexsasharegan tweet on twitter.

[MRVDH]

@ddweber @tmorehouse I ran into the same issue and simply fixed it by adding this css:

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 1px;
}

The max-width: 1px; does the trick here. Maybe this could be added to the documentation?

[tmorehouse]

I was able to get tet to truncate using the fixed table prop, and then using an item scoped slot:

<b-table fixed :items="items" :fields="fields" ....>
  <template slot="someField" slot-scope="{ value }">
    <div class="w-100 text-truncate">{{ value }}</div>
  </template>
</b-table>

Where the someField value is a very long text string.

Unfortunately the fixed prop of table makes each column roughly equal width.

I tried playing with the colgroup width method and couldn’t get it working (although the colgroup slot was working)