Expandable Rows

PreviewCopy Anchor Link

UsageCopy Anchor Link

For rows with more to say than a cell holds, like an order's line items or a job's error log. Each row gets a chevron that opens a panel in place.

<ContentDataTable
  id="orders-table"
  expandable={{
    render: (order) => <OrderDetail order={order} />,
    canExpand: (order) => order.items.length > 0,
  }}
  columns={columns}
  edges={data.edges}
  pageInfo={data.pageInfo}
  order={{ defaultOrder: { column: 'number', order: 'asc' } }}
/>

• Several rows can be open. Open state lives in the component, not the URL, and rows that leave the page are forgotten.
• The chevron is a real button with aria-expanded and aria-controls. Enter and Space work, and rowOpens clicks still work on the rest of the row.
• Works with bulkActions. The chevron sits right after the checkbox.
• Polite motion. The panel springs open in about 300ms. With reduced motion it only fades.

APICopy Anchor Link