Vuetify: [Bug Report] Data table loading prop fails when using header slot

[matthanson12]

Versions and Environment

Vuetify: 1.0.1
Vue: 2.5.13
Browsers: Chrome 64.0.3282.167
OS: Windows 10

Steps to reproduce

codepen

Expected Behavior

loading bar should stretch across all columns

Actual Behavior

loading bar only stretches across first column

Reproduction Link

https://codepen.io/anon/pen/mXXaVo?editors=1011

[chewy94]

I took a look at your pen and we just have to utilize the headers a little bit differently for the loading prop to function how we want it.

https://vuetifyjs.com/en/components/data-tables#example-headers <- Take a look at the docs example for headers

https://codepen.io/smkimbal/pen/bLvGmJ?editors=1010 <- Here is a pen I forked from yours showing the correct usage of headers

[matthanson12]

Sorry if I was not clear enough. I need a custom header slot for more advanced things I am doing, I did not include them in the codepen. How would I make this work with the header slot? I understand the default way of using headers like you changed my codepen to.

[nekosaur]

I think I agree with @matthanson12 that this is a bug. While it is possible to fix it by using both headers slot _and_ defining headers prop (https://codepen.io/anon/pen/eVMWEP?editors=1011), that defeats one of the purposes of the slot as an easy way to define custom headers since you have to duplicate the data between it and headers array.

@vuetifyjs/dev-team ?

[KaelWD]

Well there needs to be some way to tell the table how many columns there are, maybe let headers take a number too? Not sure if there's any other data from the headers array that's required for proper functionality.

[nekosaur]

I figured it would be enough to set colspan to 100% if headers is not set

[KaelWD]

100% is invalid, it gets parsed as just 100. That breaks tables with more than 100 columns, or table-layout: fixed

[nekosaur]

html is stupid. Then if you don't want to double up by using proper headers array I guess you could do headers: Array(numColumns).fill({}) though that might break stuff down the line. I don't think I'm a fan of having headers accept a number.

[pschaub]

This issue also happens on the "no-data" slot:
https://codepen.io/anon/pen/BYPYPN?editors=1011

There should be a way to tell the data table how much columns are used if you manually set the headers through the slot.

[lkrazy]

I faced the same issue when use both headers props and add custom header:
https://codepen.io/lkrazy/pen/ZrgmPM

The purpose I used custom column (in this case is "Action") is that some feature will support this column but others is not.

[cassvail]

Maybe a prop headerCols="4" could be a good solution that allows to override the headers.length value and have more control on the colspan value.
It's also simple to implement

headerColumns: function headerColumns() {
  return (this.headerCols ? this.headerCols : this.headers.length) + (this.selectAll !== false)
}