Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • Resource management: View resources
    • Table with expandable rows
    1. Cloudscape Design System
    2. Patterns
    3. Resource management: View resources
    4. Table with expandable rows

    Table with expandable rows

    Use a table with expandable rows when a data set has multiple levels of hierarchy.

    Published: March 27, 2024
    View demo

    On this page

    1. Key UX concepts
    2. Building blocks
    3. General guidelines
    4. Writing guidelines
    5. Accessibility guidelines

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Key UX concepts

    Hierarchical data


    One way to visualize hierarchical resources is in a table with expandable rows. Consider using expandable rows when information has multiple levels of hierarchy and it is beneficial to have in-page context for comparing and viewing multiple items at once. See the expandable rows feature of the table for implementation details.

    In cases of extreme nesting, there may be a negative customer impact on performance or legibility. In these cases, consider alternative solutions like a details page, or separating the data into multiple tables.

    Filtering


    When filtering on a table with expandable rows, both parent and child rows that match the filter query will be returned. If a row with both children and parents matches the query, its parent rows will be shown, but its siblings (rows on the same level) and children will not be shown. A counter with match results should be added to expandable tables with filters applied. For example, searching for X in the table A B (Y X (1 2 3) Z) C will return B (X) .

    Sorting


    Sorting will sort both the parent rows and child rows. For example, in a table with parent rows A B C, where B has child rows Y X Z, sorting by “descending” will update the table to look like this: A B (Y X Z) C → C B (Z Y X) A. Updating this to “ascending” will result in this: A B (Y X Z) C → A B (X Y Z) C .

    Selecting


    When using a table with multi-selection, the total number of items selected should be displayed in the table header’s resource counter. If actions can be taken on both parent and child rows, show the selection state on all rows. Alternatively, if actions can only be taken on parent rows, disable the selection state on child rows.

    When using a table with selection, if selecting and performing an action on the parent will also affect its children, indicate this with a confirmation modal. For example, “Delete B and its child rows X Y Z ? This action cannot be undone.”

    Pagination


    The table’s default pagination will only apply to the parent rows. For example, if the table is set to show 10 rows per page, 10 parent rows will be shown per page regardless of the number of children of the parent row. Use pagination for organizing large datasets into manageable chunks, making it easier to navigate to specific sections. Pagination provides the ability to jump to specific pages making it easier to keep track of where they are, return to a specific section, and provide an accurate representation of the size of the data set.

    Progressive loading

    When expanding a parent with many child rows, consider using progressive loading. This will render a set number of rows first, along with a button to load additional rows.

    Building blocks

    Expandable table example, desktop viewExpandable table example, desktop view
    Expandable table example, Mobile viewExpandable table example, Mobile view

    A.
    Expand toggle

    This toggle marks a row as expandable. Interact with
it to expand or collapse the row.

    B.
    Collapsed row

    A collapsed row does not show any of its children.

    C.
    Expanded row

    An expanded row shows its children, indicated with an indent.

    D.
    Child row

    A child row is indented. Child rows can also include an expand
toggle, and have children of their own.

    E.
    Table

    Use the table component for this pattern. See the table view pattern for more details about tables in general.

    F.
    Filtering - optional

    Both parent and child rows that match the filter query will be returned. Here, searching for cluster-c6a5dd09 will return only its parent (global-57f5713c) and itself.

    G.
    Sorting - optional

    Sorting will sort both the parent rows and child rows.

    H.
    Selecting - optional

    If selecting and performing an action on the parent will also affect its children, indicate this with a confirmation modal when taking an action.

    General guidelines

    Don't

    • Don’t use a table with expandable rows with extremely large and complex data sets. Instead, consider details page as a hub or separating the data into multiple tables.

    Writing guidelines

    General writing guidelines

    • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

    • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

    • Use present-tense verbs and active voice.

    • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

    • Avoid directional language.

      • For example: use previous not above, use following not below.

    • Use device-independent language.

      • For example: use choose or select not click.

    Component-specific guidelines

    Error text

    • Use complete sentences and terminal punctuation.

    Constraint text

    • If there are constraints on the value that users enter into an input field, describe them under the field. Constraints can include password requirements, a URL format for a specific service, or the maximum number of characters that a user can enter into a field.

    • Use complete sentences with periods except when listing valid characters, as shown previously. If space is limited, you can use a sentence fragment without a period.

    • Keep constraint text brief. Two lines is the limit.

    Accessibility guidelines

    General accessibility guidelines

    • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

    • Make sure to define ARIA labels aligned with the language context of your application.

    • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

    • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS