Table/Empty state: the Empty State table from the react demos is breaking on mobile

[KKoukiou]

The examples from the docs page looks like this in mobile:

[kmcfaul]

What view would you expect for the empty state demo on mobile @KKoukiou @mcarrano? This demo is inconsistent in that other table demos on a mobile size list all columns on the left per row. But I can also see a case for not displaying the columns at all and having the empty state take up 100% of the space for mobile.

Table doesn't have a notion of 'empty state' at the moment. It only sees the columns and rows that are passed in, and the empty state is passed as a single item in a row. It only looks like the empty state takes up the whole table space due to styling, and this causes the side-effect currently seen on mobile (because the empty state is only associated with a single column).

If columns should be hidden on mobile sizes, the solution would be to conditionally pass in an array containing an empty string (['']), or possibly to add a flag to hide the columns.

@nicolethoen Am I thinking through this correctly?

[mcarrano]

I have to admit that this is a bit odd. In the Empty state page we have this example that represents better what I would expect: https://www.patternfly.org/v4/components/empty-state#no-match-found So in thins case there are no table headers at all and the table is just replaced with the empty state component.

[kmcfaul]

Our HTML demo for Table does keep the columns with the empty state, so I'm slightly confused. Do you mean the Table should only show the EmptyState without columns when the screen is small or at all times?

https://www.patternfly.org/v4/components/table/html-demos/empty-state/

[mcoker]

We just need to be able to remove the data-label="Servers" attribute from the <td> that holds the empty state component.

[mcarrano]

Thanks for the tip @mcoker . I've added this to our roadmap to fix.

[kmcfaul]

I think we'll need a flag to indicate that a cell is an empty state. That way the table will know to not associate it with a column (the data-label).