[Feature Request] VTable improvements

[austingil]

[Feature Request] VTable improvements

[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.

[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.

[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, I think this also changes with CSS vars. But maybe the right approach for now is to just leave the table as a table.