Vuetify: [Feature Request] ability to modify VDataTable cell's properties without using `item` slot
Problem to solve
When i create a datatable, i pass a headers and a item array to it.
If i want to add a style to a specific column (eg. color, font-size, alignment, disable sorting...) i have to use the template "...". If i add a style in e extra
< td>
< div style:"color=red">Text< /div>
< /td>
instead of
< td style:"color=red">
Text
< /td>
Proposed solution
Add a property for passing the styles directly via the slot to prevent nesting of resulting elements.
cluidold
All 12 comments
IMO the headers config object needs a 'itemClass: string | string[]' config or just pass the current "class" config to the td elements and not just the headers. Also adding an additional class using the "value" option makes sense, i.e. th.header-[value] and td.item-[value]. So it would be easy to style the cells for a specific column. Currently it is uncomfortable because you either have to override the complete item slot to customize or use something like td:nth-child(2) to get cell elements.
makana
on 15 Aug 2019
+1 for this feature.
In my case i simply want to print a table and hide cells that contain control elements.
For now i have to do css workarounds as mentioned,
MoritzMix
on 14 Feb 2020
Any update on this?? Also can someone tell me to specify table row width using percentage
varadekd
on 24 Apr 2020
Any update on this?? Also can someone tell me to specify table row width using percentage
A row is as wide as the table.... do you mean columns? Those are controlled by percentage or pixel width using the header array and the width property. As described in the docs
ktiedt
on 12 May 2020
BootstrapVue does a great job with this, it'd be great to have it work similar here
stevelacey
on 21 May 2020
@stevelacey In BootstrapVue, is this _cellVariants you're talking about?
nekosaur
on 21 May 2020
@nekosaur yes, anything that works like that, i.e. allowing the developer to pass the data along with their item objects would be :ok_hand: :ok_hand: it was very easy to grasp and implement solutions with
stevelacey
on 21 May 2020
@ktiedt while usually using the headers to control the width is a good idea, you don't always want headers. (There even is a hide-default-header option.)
I love the cellClass idea.
peteruithoven
on 30 Jun 2020
@ktiedt while usually using the headers to control the width is a good idea, you don't always want headers. (There even is a
hide-default-headeroption.)I love the cellClass idea.
I know, which is actually how I came to this ticket, removing the header broke our column sizing 🤦🏼♂️ we had to resort to manually hiding the headers with css instead along with some other dirty hacks for specific column decorating 🙁
ktiedt
on 30 Jun 2020
Could be as simple as adding something like
[header.cellClass]: header.cellClass,
I'll try doing a pull request.
peteruithoven
on 30 Jun 2020
Any updates on this issue?
ibrahimBeladi
on 13 Jul 2020
No one? there can be a good improvement with minimum impact.. please take a look!
asterd
on 17 Sep 2020
Related issues
dschreij
·
3Comments
milleraa
·
3Comments
sebastianmacias
·
3Comments
itanka9
·
3Comments
SteffenDE
·
3Comments
Most helpful comment
IMO the headers config object needs a 'itemClass: string | string[]' config or just pass the current "class" config to the td elements and not just the headers. Also adding an additional class using the "value" option makes sense, i.e. th.header-[value] and td.item-[value]. So it would be easy to style the cells for a specific column. Currently it is uncomfortable because you either have to override the complete item slot to customize or use something like td:nth-child(2) to get cell elements.