Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] VDataTable column headers wrap when inside VCard

See original GitHub issue

Environment

Vuetify Version: 2.0.7 Last working version: 2.0.5 Vue Version: 2.6.10 Browsers: Chrome 76.0.3809.100 OS: Windows 10

Steps to reproduce

Nest a VDataTable within a narrow VCard and look at the column headers

Expected Behavior

Being inside a VCard doesn’t change VDataTable’s styling

Actual Behavior

VDataTable’s header column text breaks mid-word

Reproduction Link

https://codepen.io/Dylan-Chapman/pen/JjPGZvo

Other comments

Looks like this was caused by #8380

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:6 (2 by maintainers)

Top GitHub Comments

4reactions

jacekkarczmarczykcommented, Aug 17, 2019

Workaround is to add

.v-data-table {
  word-break: initial
}

But as #8380 may affect other components as well i’m not sure if that change shouldn’t be just reverted and long words should be handled in userland same as they would be handled in any other component

2reactions

kosratdevcommented, Jul 8, 2020

Hi there,

Is there a way to apply text-no-wrap to the data table headers, in my situation I want to make horizontal scroll instead of wrapping header texts.

Top Results From Across the Web

Vuetify - wrap header text on v-data-table

It is an array of objects that each describe a header column. See the example below for a definition of all properties.

vuetify data-table horizontal scroll

You can set the width of the columns in the headers like in the code pen. With this you can force the scroll...

Structured Data Plugin

This plugin allows you to add structured data to any DokuWiki page. Think about this data as additional named attributes. Those attributes can...

Can anyone enable word wrap on a data table?

Do you want to enable "word wrap" functionality within Data table control? Currently, the "word wrap" functionality is not supported in Data ...

Build Dynamic Data Table in Vue.js 2+ with Vuetify

A data table organizes information using column and rows, and a general DataTable has the following components: Columns; Column header names; Rows; Footers ......