Table Component Styling Update

[logan-laughery]

Make the table component fill the width of it's parent container. Also look into improving the dashed header/body divider discussed in #23

[FranceJ]

Hi folks, I'd like to try to help with this!

[FranceJ]

What are people looking to see here for making the table full width? Are you wanting the columns to be evenly spaced in the container or the first and last pinned to the start / end with the remaining space distributed evenly? Or something else entirely?

Also, for the dashed divider, is there anywhere I can go to see what the ideal end product would look like? Is there a spec or some body of work I can crib the style from aside from the examples in the code?

[kamerat]

Good questions, @FranceJ I do see the need for more information indeed.

Also, for the dashed divider, is there anywhere I can go to see what the ideal end product would look like? Is there a spec or some body of work I can crib the style from aside from the examples in the code?

@FranceJ in issue #16, you can at least see the spec @logan-laughery made for the table component. I'm afraid this is the only information I have for you regarding this. I would too love some more insight in the product.

@logan-laughery, Is it possible to create a readme or an issue going a bit in the details of your vision for this design system? This would make it easier to create your components and come with new ones that you have not provided as a spec 😃 I would love to take more part in it, taking it to where you want it to be. I love the idea.

[logan-laughery]

@kamerat @FranceJ Probably giving you guys too much background on where the vision for this library came from but here goes nothing :man_shrugging:. Outside of programming, one of my other hobbies is brewing beer. I have software that I use for calculating recipes and a special paper/pencil template for taking notes during brew days. I wanted to merge these two together into a single mobile friendly web application that is styled like the paper templates I use for notes. I decided to start by building a component library that matched the style used on these paper templates and in vintage field guides.

At this point, the only body of work outside this code base is a Figma page that has served as a messy scratchpad for trying out different looks. Unfortunately, this is not going to be usable as a spec for us. In time, I would love for this Figma page to evolve into a fully documented design system.

In the meantime, I wonder if it would be possible for us to just keep things collaborative and borrow commonly practiced standards where possible? I personally have the most experience using the Vuetify component library and would look to their style and api when determining how components in this library should behave. If you guys don't think this will work, I can try to find some time to define a strict set of specs for components as issues are created.

[logan-laughery]

@FranceJ In regards to your question about width and column spacing. I would say that the widths of the columns should be evenly distributed. If implemented on the documentation example, this would look something like this:

[kamerat]

@logan-laughery haha, awesome, I love this project more and more. Good writeup!

In the meantime, I wonder if it would be possible for us to just keep things collaborative and borrow commonly practiced standards where possible? I personally have the most experience using the Vuetify component library and would look to their style and api when determining how components in this library should behave.

I agree with this. It is not needed to re-invent the wheel here. Maybe using Vuetify as inspiration/template from this point forward and create an issue as we go if anyone has some exceptionally different API/structure in mind. I suppose some deviations is ok, but rather look at Vuetify as a starting point.

[ratracegrad]

I have submitted a PR for this that makes table 100% without having to rely on Vuetify for styling.

[logan-laughery]

Resolved with #35