-
-
Notifications
You must be signed in to change notification settings - Fork 7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug Report] Data table loading prop fails when using header slot #3338
Comments
I took a look at your pen and we just have to utilize the headers a little bit differently for the 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 |
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. |
I think I agree with @matthanson12 that this is a bug. While it is possible to fix it by using both @vuetifyjs/dev-team ? |
Well there needs to be some way to tell the table how many columns there are, maybe let |
I figured it would be enough to set colspan to 100% if headers is not set |
100% is invalid, it gets parsed as just 100. That breaks tables with more than 100 columns, or |
html is stupid. Then if you don't want to double up by using proper headers array I guess you could do |
This issue also happens on the "no-data" slot: There should be a way to tell the data table how much columns are used if you manually set the headers through the slot. |
I faced the same issue when use both headers props and add custom header: The purpose I used custom column (in this case is "Action") is that some feature will support this column but others is not. |
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.
|
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
The text was updated successfully, but these errors were encountered: