Lead: Liav Nadler Status colour Yellow title ongoing
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
A tree table is a type of data table, where each row can be expanded to reveal related child rows
...
Usage & Behaviour
A tree table is similar to a basic table, with the exceptions described below:
- The first column of the table (e.g Name):
- Cannot be moved
- Contains icons on each row, allowing the user to expand and collapse them
- By default all rows are collapsed
- Expanding a row reveals at least one child row
- On child rows:
- The text of the first column is indented in relation to parent rows
- All other cells may be similar to the parent rows or blank (if child row does net share the same values)
- If the table has a checkboxes column, clicking a parent checkbox will check all child checkboxes. For more information see Checkboxes
- Table rows may be draggable (see example above). For more information see Drag & Drop
- Sorting behavior?
- Best practice - expand all collapse all?
Usage & Behaviour
<< Use a visual for each sub-section >>
General guidelines
<< Describes the component, use sub-section when they are relevant to the components >>
<< In case of a complex component duplicate this section, describing each sub-component separately >>
Structure
- A description of the structure of the component, including areas, sub-components etc.
Placement and Positioning
- For example, in popups and toast messages
Default State
- When there is more than one state for a control or area
Content
- Including labels, microcopy, number of items, order of items, default values etc.
Internal Logic
- For example, controls dependencies in a form
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
<<for example, how to change a value – type, arrows, use slider>>
<<use Click target to describe the interaction>>
Validations and errors
<<used for specific components e.g. slider>>
Transitions
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
...
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
...