Vuetify: [Bug Report] VDataTable header - Mismatching childNodes vs. VNodes

[csheppard]

Versions and Environment

Vuetify: 2.0.0-beta.1
Last working version: 1.5.14
Vue: 2.6.10
Browsers: Chrome 74.0.3729.169
OS: Mac OS 10.13.6

Steps to reproduce

yarn dev

View http://localhost:3000/datatable via SSR.

Expected Behavior

<thead> should contain 6 <th>

Actual Behavior

<thead> has 1 <th colspan="6"> with combobox for mobile. You see this flash before the browser is then able to build the 6 <th>.

Console errors:

vendors.app.js:214 warn Parent:  <th colspan=​"6">​…​</th>​<div class=​"v-data-table-header-mobile__wrapper">​…​</div>​</th>​

vendors.app.js:214 warn Mismatching childNodes vs. VNodes:  NodeList [div.v-data-table-header-mobile__wrapper]0: div.v-data-table-header-mobile__wrapperlength: 1__proto__: NodeList [VNode]

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Reproduction Link

https://github.com/csheppard/nuxt-vuetify-2

[chanlito]

I'm facing same issue here.

[paulhobbel]

The datatable also defaults to the mobile view for me in SSR also resulting in a mismatch

[erickarbe]

Any updates on this? My app is breaking because of this bug.

[paulhobbel]

For now I have surrounded the vdatatable with <nossr>

[0biWanKenobi]

I resorted to coding headers and body manually, since both are bugged. Not ideal, not sure if ssr would be better - certainly faster to code! - but.. any ETA on this? Thanks :)

[lechim]

I seem to still get this bug with SSR on a brand new project running Nuxt v2.12.2 and Vuetify v2.3.0.

The server renders in mobile view and then I get this same error on desktop. The SSR works for mobile but on larger screens still have the error: "Mismatching childNodes vs. VNodes: Nodelist [div.v-data-table-header-mobile__wrapper]...".

I just wrapped the v-data-table in client-only tags for the time being.

[tvld]

Same here...
For me the issue came after upgrading from 2.2 to [email protected] So I am certain there is some regression since 2.3.0.
I also managed to have a work-around by wrapping to make sure no ssr:

<client-only>
    <v-data-table  ...
</client-only>

[KaelWD]

This was broken again by 5533b030a3f892abed057dbb00946d57352e6751

The original fix wasn't great anyway, it just meant a mismatch on mobile instead.

[ARMGAMES]

Same here. client-only is working, but it's not a option.

[ryan-cahill]

Within a universal Nuxt app, I attempted to upgrade Vuetify from 2.2.x to 2.3.8 and the issue of the data table initially rendering as the mobile view persists. Using <client-only> tags isn't an option for us either

[tjhiggins]

Is there a way to dynamically set the breakpoint for ssr? I'd rather take an educated guess via https://www.npmjs.com/package/nuxt-user-agent then have a bunch of spinners client-side.

[phips28]

Facing the same problem. SSR renders this dropdown select for sorting. How can I disable this?