Data view toggle buttons enable users to switch between data views depending on their individual preferences or needs. Data views may include card view (displaying data in cards that form a grid), table view (displaying data in a data table), or list view (displaying data in full-width cards that form a list).
The ability to toggle between data views is beneficial to users for a number of reasons:
Users may have a personal preference that does not align to the default data view.
In cases that the same content is serving multiple user scenarios, a default data view can be selected to serve the primary scenario, but users falling under secondary scenarios have the option to select a different view that better serves those needs.
On mobile devices or smaller viewports, table views are often cumbersome to read and require the user to scroll horizontally in addition to vertically. A data view toggle provides those users an option to optimize their view for the device they are using.
Contributors | |
|---|---|
Slack channel | If one exists, paste a link to the working Slack channel... |
Paragon Jira ticket | Insert a link to the Paragon ticket or epic for this component... |
Other Jira tickets | Insert links to related work... |
Design resources | Insert links to Figma or Miro design specs or explorations... |
Technical docs | Insert a link to the tech docs when they are created... |
Similar components:
Content views
https://www.patternfly.org/v3/pattern-library/content-views/card-view/
https://www.patternfly.org/v3/pattern-library/content-views/list-view/
https://www.patternfly.org/v3/pattern-library/content-views/table-view/
Toggle button
VariantsDepending on the use case, the toggle button might switch between card view and list view, card view and table view, or (to discuss) between all three views. We expect most scenarios would only require toggle buttons between table view and card view, or list view and card view, as list view and table view serve similar user needs in different ways. Note: Design for all three views as well as hifi iterations are forthcoming.
Future Variant Considerations
Vertically stacked toggle buttons
Additional toggle button use cases, such as text formatting
Customized toggle buttons, where toggle buttons might be grouped with other buttons or dropdown options
Best Practices
| ||
|
Related Componentshttps://paragon-edx.netlify.app/components/button/button-group/
https://paragon-edx.netlify.app/components/datatable/dataviews/
SpecificationExisting Paragon resources as listed above in Related Components can be leveraged.
This proposal would create a new UI toggle button component that will allow the user to switch between existing table and card views. Additionally, list view would provide a new data view option, taking advantage of the existing card component displayed at a full-width horizontal orientation.
BehaviorsToggle buttons |
|
|---|---|
Responsive behavior |
|
AccessibilityAccessibility considerations |
|
|---|
Should we approach this component as a standalone component, or as an enhancement to the existing data table component? Could be it used anywhere including a data table, or is it only a feature of the data table?
Do we have any existing starting point in Paragon for a list view?
potentially list item that is not a card
or the horizontal version of the card we have today
Maybe doesn’t need to be only a data view button..could be more general
Could be accepted for Paragon, but that doesn’t need to preclude building a one-off for the data table. The squad working on the project can determine how to prioritize building the paragon contribution. If the squad that needs this decides this will slow them down, later on the community engineering squad can link the tickets and revisit the work.
Adam S., how would icon button interact with the data table when there are bulk actions? Layout. The design shows them taking the same space.
Ben W, List View and Table View – I think of this like Mac’s Finder file browser. Why do we need ListView?
ListView is an in-between of Table and Card. It’s more visually complex.
Adam S. In the list view is that objects are still a cards, just in the vertical layout
Gabe: this would create “double borders”
Ben W, I think this would be only associated with the Data Table.
Adam S, If it were a standalone it could be confused with ButtonGroup.
Table could use and Icon ButtonGroup itself rather than creating a new components.
Adam S, this should be folded into the data table component “A native thing of the data table” Ben ++
Open question of “what is the ListViewItem?” “Where does it live?”
Ben W. I would group it under the DataTable for now. If we pull it out at some point we won’t break anyone’s usage.
Adam S. for ent learner portal dash (where it’s a card without borders) there are other use cases.
Gabe W. we have a list of courses on program marketing pages. Could be another use case.
Adam B. Selctable states might make sense in this object if it’s part of the Data Table
Could be standalone and just have a selectable variant.