Patternfly-react: React-table: Table expandible header missing left padding with shrunk viewport width

Created on 18 May 2020  路  1Comment  路  Source: patternfly/patternfly-react

Image taken from: Patternfly documentation
pf-table-2

Describe the issue. What is the expected and unexpected behavior?
Having expandible aligned to the first column and then shrinking the viewport width to toggle table item arrangement to on top of one another and then expanding expandible results in expandible header (identical to the column header it was aligned to) not having left padding.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

  1. Use example
  2. Shrink the viewport width to toggle item arrangement to on top of one another
  3. Expand expandible on second row (the expandible there is aligned to first column)
  4. Expandible header ("Header cell") is missing left padding

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Trivial bug.

What is your product and what release version are you targeting?
RH Insights, Vulnerability

Is there a way to remove the expandible header label and keep the alignment for full-width table, for the time being?

bug

Most helpful comment

@leSamo thanks for reporting this. Looks like this is a bug. The header text should never display inside of an expandable table row.

For the react dev that works on this, if you compare the core table example to the react table, you'll see that in core, inside of any expandable table rows (tr.pf-c-table__expandable-row), the immediate children cells (th or td) do not have a data-label attribute, since the purpose of the cell is just to create a container for expandable content, and shouldn't be associated with the table column header text of any of the columns.

>All comments

@leSamo thanks for reporting this. Looks like this is a bug. The header text should never display inside of an expandable table row.

For the react dev that works on this, if you compare the core table example to the react table, you'll see that in core, inside of any expandable table rows (tr.pf-c-table__expandable-row), the immediate children cells (th or td) do not have a data-label attribute, since the purpose of the cell is just to create a container for expandable content, and shouldn't be associated with the table column header text of any of the columns.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mcarrano picture mcarrano  路  4Comments

rvsia picture rvsia  路  4Comments

andrewballantyne picture andrewballantyne  路  4Comments

Hyperkid123 picture Hyperkid123  路  6Comments

rvsia picture rvsia  路  5Comments