Tables embedded in white background needed

[yih-wang]

We need tables in the expansion of data list in AMQ. In current PF4 templates, all the tables I found occupy whole rows, and don't have clear borders.

I created an initial wireframe for the requested table-

[mcarrano]

@mcoker can you take a look at this? Could this be created by using one of our existing layouts or by placing the Messages and Clients elements within cards that sit inside the expansion?

[mcoker]

@mcarrano @yih-wang Yes, in this case, I would use one of the PF4 layouts inside of the expandable section of the table to create 2 columns, then in each column, place your header and graph/table content.

I mocked up an example here, using the .pf-l-grid (Grid) layout in the 3rd row. The base table in that example comes from our table examples.

[mcoker]

@mcarrano re: borders, we don't currently have a table that has borders around the outer edges. The card would work, except the card has a box shadow, not a border. Do we want to add support for a border around a table, and/or a border with/without a shadow in the card?

[mcarrano]

That's a good question @mcoker . Before we commit to creating a new table variant, @kybaker and @mceledonia can you take a look at the mockup here and let us know if there is a different way to handle this visually? Looks like when we use the table in a full screen view it's against a gray background so this isn't an issue. See https://www.patternfly.org/v4/documentation/core/demos/datatable Thoughts?

[junezhang]

@mcarrano @mcoker thanks for your quick response. @kybaker @mceledonia, For the border issue, it makes sense without borders around the outer edges and without the background color for one table. But when there are two tables, if no border between the tables, users will be lost in the table list. Look like the below two pictures:

We would like to get your feedback.

[rachael-phillips]

Following up here on this conversation. As @mcarrano said, before we commit to creating a new table variant, @kybaker and @mceledonia can you take a look at the mockup here and let us know if there is a different way to handle this visually?

[mcarrano]

@yih-wang @junezhang I revisited this issue with @mceledonia and we agreed that the best way to approach this will be to place the table in a card that has a single pixel border rather than introducing a border to the table itself. While we currently do not have that Card variant, we have an open issue here where we will be addressing the need for alternatives to the drop shadow across the library.

In the interest of issue maintenance, I will close this but feel free to add further comments to https://github.com/patternfly/patternfly-design/issues/800