[MdTable] fixed header does not align header with table content

[williamleven]

Steps to reproduce

1. Create a table with fixed header
2. Add a search field for the table
3. Fill table with input of different lenghts
4. Search on something that only makes the shorter entries stay.

You can also see that the table header content doesn't align to start with ether.

After a window resize it does however align properly.

Which browser/system?

vue-material: 1.0.0-beta-10.2
Vue: 2.5.16
Browser: Opera 53.0.2907.37
OS: Arch Linux (x86_64; /usr/bin/i3)

What is expected?

The table header content should align with the table content as it does when you resize the window

What is actually happening?

The table header content does not re align at all

Reproduction Link

https://codesandbox.io/s/p7n7xjjr3j?module=App.vue

Temporary fix

Create a watcher on your table data that calls mdTable's setWidth method whenever the data changes.

[Samuell1]

I think this will be hard to solve because it split ups the table to content and header to separate divs.

[williamleven]

Wouldn't an easy fix be to apply the temporary fix within the component?

Create a watcher on your table data that calls mdTable's setWidth method whenever the data changes.

If I understand the code correctly in MdTable.vue one would be able to add something like this:

watch: {
  value () {
    this.setWidth()
  }
}

[mingweiLIU]

Hi, I am using MdTable with fixed-header while still counter the problem: header is not align with table content, the sample code is here:https://codesandbox.io/s/vue-template-3iq42?fontsize=14 and it looks like this:

[SashaGeremia]

Has this issue been resolved?

[mattratliff]

No I don't believe so. I'm still seeing the issue. Samuel1 added a code fix which was merged into dev, but this needs to get added into master for a release.