Vuetify: [Documentation] header-props - Missing "v-data-table-header" component

Created on 18 Oct 2019  路  7Comments  路  Source: vuetifyjs/vuetify

Environment

Browsers: Chrome 77.0.3865.120
OS: Windows 10

Steps to reproduce

In v-data-table component we have header-props prop. In docs it is described:

Pass props to the default header. See 'v-data-table-header' API for more information

image

However component v-data-table-header does not exist.

Also in the dropdown for v-data-table API docs this component is not listed.

image

Expected Behavior

Docs should describe v-data-table-header component.

Actual Behavior

In docs, there is no information about the v-data-table-header component.

Reproduction Link

https://vuetifyjs.com/en/components/data-tables#examples

documentation

Most helpful comment

I need it too, I'd like to tailor the header to have a different background color...

All 7 comments

more than one month, this issue is still opening... i met this, OMG

I need it too, I'd like to tailor the header to have a different background color...

Same here, need to change the header background color.

Well, you could try to guess what you could use if you look at the desktop or mobile version of the header, depending on what you use.

I need it too, I'd like to tailor the header to have a different background color...

image

You can add class with background-color in headers

This is also referenced in the vuetify 1.5 => 2.x migration docs.
https://vuetifyjs.com/en/getting-started/releases-and-migrations/ under v-data-table. There's no information about the header-props object.

I need it too, I'd like to tailor the header to have a different background colour...

We really need that information but for now as a workaround I'm using deep styling (values for dark theme):

<style scoped>
::v-deep .v-data-table-header {
  background-color: #ccc;
}

::v-deep th {
  color: #000 !important;
}
</style>
Was this page helpful?
0 / 5 - 0 ratings