Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Spike] Investigate HTML+CSS for Tree View / Tree Table #2455

mturley opened this issue Nov 20, 2019 · 1 comment

[Spike] Investigate HTML+CSS for Tree View / Tree Table #2455

mturley opened this issue Nov 20, 2019 · 1 comment


Copy link

@mturley mturley commented Nov 20, 2019

With the assumption that we need to build the tree view as a new in-house component, we need to determine the best way to structure the HTML and CSS of a tree view. A discussion on the design of this component can be found in #348, but here is a summary of the constraints that make the HTML structure difficult:

  • The view contains a list of items which each contain a hidden list of children.
  • At least on desktop, it has to use an underlying tabular or grid structure so that tree view items can have more than one column. On mobile, these extra columns should collapse similarly to how our current table component collapses.
  • On desktop, an item can expand to reveal the child items, and children can also expand with nested indentation of their own children. The first column of each item is indented to indicate its depth in the tree, but all other columns are aligned.
  • On mobile, instead of expand/collapse, a user can click an item to navigate to a deeper list of its children, which includes context from the no-longer-visible parent.
  • All items can have checkboxes.

Originally I was investigating this by looking for third-party libraries we can use, and starting to attempt a quick-and-dirty React prototype (patternfly/patternfly-react#3141) to see if the functionality we need can be achieved without duplicating a lot of third-party effort. We determined that for the initial component we shouldn't have any sorting or filtering functionality (since the implications of those on a tree structure are unclear), and in my research on third-party libraries, I could find none that we could theme to match the design and meet all the constraints above (particularly, none of them would adapt well to a mobile view).

In attempting to build a prototype based on our Table styles, these are the issues I ran into which indicated that this should be a core spike:

  • A tree with one level of children can be built as an HTML <table> with each top-level item being a <tbody> that contains some hidden rows which are shown when the first row is expanded. This is similar to the structure of the existing expandable-row support in Table. However, when trying to nest a second level of children, this structure no longer works because you cannot put a <tbody> inside another <tbody>.
  • Nested <div>s or <ul>s could work for arbitrary levels, but in order to align another column of data across multiple levels of the tree, we start needing to assign static widths to things and it felt wrong.
  • I started investigating whether we could use a CSS grid solution, then realized I was out of the scope of a React spike.
  • With any of these solutions, it was unclear to me whether it would be possible to have one singular HTML structure for a tree, and then use only CSS to switch between the desktop (indented rows) and mobile ("Miller columns") layouts of this HTML. It seemed to me like we may need two different HTML structures, and the React component would need to render one or the other depending on the window size.
@mturley mturley changed the title [Spike] Investigate HTML+CSS for Tree iew / Tree Table [Spike] Investigate HTML+CSS for Tree View / Tree Table Nov 20, 2019
@mcoker mcoker added this to the Prioritized Backlog milestone Nov 26, 2019
@mcoker mcoker modified the milestones: Prioritized Backlog, 2019.11 Nov 26, 2019

This comment has been minimized.

Copy link

@mcarrano mcarrano commented Nov 26, 2019

@mattnolting Here is a link to the final designs: I will remove the mocks from the description to avoid confusion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
4 participants
You can’t perform that action at this time.