Feature Request: Some more Slots in QTable-Headers

[Error07]

Dear Quasar community,
in Quasar v1, we extended the QTable-Headers by accessing it's features with the Help of the options-api. This is not possible in Quasar v2 any more, as the QTable is implemented using the composition api. Extending the Headers using slots is the more elegant practice anyway, however we are missing more slots for this. We need a header-before and header-after slot, so we can inject parts before and after the default header to achieve something like this:

We basically added search-fields to the header in order to search for entries based of the respective columns values. I can Imagine there being several other usecases where users want to keep the current header-functionality and add something to it in order to improve usability.
What are your thoughts on this?
Keep up the excellent work! We really love Quasar!

[yusufkandemir]

Here is an example that uses the top-row slot:
https://codepen.io/yusufkandemir/pen/VwrLxjN

[Error07]

Thank you for your quick reply!
While i like your answer, this solution will unfortunately not work in all the cases we need. For example we would like to have sticky headers or the ability to put something infront of the current header-row, while still remaining inside the header - without having to re-implement the currently avaiable header-functionality.
Looking at the resulting HTML, the code should be positioned inside the thead like this:

<thead>
    <tr>
        <th>injected before header 1</th>
        <th>injected before header 2</th>
        <th>injected before header 3</th>
    </tr>
    <tr>
        <th>regular header 1</th>
        <th>regular header 2</th>
        <th>regular header 3</th>
    </tr>
    <tr>
        <th>injected after header 1</th>
        <th>injected after header 2</th>
        <th>injected after header 3</th>
    </tr>
</thead>

I have attached the code we have written for quasar 1. Maybe this will give you ideas for some other way to achieve the same result.
DataTableComponent.js.txt

[metalsadman]

there are header's slots (check api), so what Yusuf did above is doable there too. https://quasar.dev/vue-components/table#header-slots

[Error07]

I tried the header-slot and this really looked good until i used selection="multiple". This unfortunately broke the header and would require reimplementing the checkbox as well as it's functionality.
see this example:
https://codepen.io/Error07/pen/rNYeqvr

Again: I believe a slot before and after the q-tr would solve this problem in a elegant way. On the other hand, fixing the multiselect so it can handle use of the header-slot is also a possibility.

[rstoenescu]

Why do you say the multiselect doesn't works with header slot?
https://codepen.io/rstoenescu/pen/yLPgEgB?editors=101

[Error07]

Hi @rstoenescu,
nice example! I didnt think of using "props.selected" that way. This solved my problem and works for my other cases too! :) Thank you very much!
Would you still consider my pull request? i think it offers new ways of extending the table-header in a non-invasive way.

Greetings

[Error07]

I made a pullrequest for this case: #12329