[Feature Request] VTable improvements

[hacknug]

As requested on the docs page for VTable, here's some thoughts on what's missing and could be improved:

• Remove component styles (they're interfering with my tailwind classes due to increased specificity)
• Being able to add classes to tbody (I'd prefer using the default/body slot and being able to write the element myself)
• Add slots to customize thead and tfoot (I know there's already plans for tfoot but it's currently disabled). Expose sorting methods and a11y attributes using scoped slots.

Then a question I have is, do we really need the table wrapper to be focusable? Wouldn't it make more sense to leave it as is, with just the buttons on thead being focusable and maybe the tbody rows in case users wanna highlight one of them or something on focus (but I guess they can implement this themselves using slots so…)

[AustinGil]

Hey @hacknug, thanks for the feedback. It's really valuable to get comments from folks like you so I'm not working entirely in a silo.

To be honest with you, VTable is probably the component I am least proud of. I agree that there are several changes that need to be made. I've been keeping these changes until V1 because I didn't want to introduce breaking changes on a minor release (even though it is currently technically in beta). V1 will be a major release, and as such can accommodate some breaking changes.

I plan on adding several of your recommendations already.

Regarding styles, which styles are conflicting with your own? I think the only styles VTable should have are

.table-container {
  overflow-x: auto;
}
@media (min-width: 400px) {
  .table-container {
    display: block;
  }
}

I think this component needs a lot of work, which also means I need to spend a lot of time actually implementing to see how it all feels and get that right. It'll come though. I don't use tables too often, but I know how working with a good one or a bad one can mean a lot when you actually need it.

[hacknug]

Regarding styles, which styles are conflicting with your own?

Mostly this:

@media (min-width: 400px) {
  .table-container {
    display: block;
  }
}

I don't think we need that since all divs are already block elements by default, no?

I think this component needs a lot of work, which also means I need to spend a lot of time actually implementing to see how it all feels and get that right. It'll come though. I don't use tables too often, but I know how working with a good one or a bad one can mean a lot when you actually need it.

Agree. I'll use VTable as a base for my needs and will try to get back to this once everything is implemented to see what could/should be ported back to the library (final call on what gets added is yours, of course).

[AustinGil]

Yeah, well feedback is welcome. As for the styles, it's there in preparation for some other work that was intended but never got done. I played with the idea of making it responsive so that the layout changes. That's why there is a media query. On small screens, it would look much more different.

I still need to use the tables more to see how I like it. Ultimately I want all these components to feel very natural and intuitive.

[WebMechanic]

@media (min-width: 400px) seems like a vary arbitrary value anyway. Tables in particularly need very individual "breakpoints" and styles to go with them to make them somewhat responsive to the view-port and their content.

Maybe nowadays (2,5 years later) @container would make more sense, but it remains in the realm of the designer to decide how to apply breaks and style it.

[AustinGil]

Yeah, I think this also changes with CSS vars. But maybe the right approach for now is to just leave the table as a table.