PDS proposals
← All proposals

Logs table with divider

A recipe: the PDS Logs Table pattern (Table with hasPanel, status-colored rows and the inline detail panel) with a LabeledDivider as a row.

Extends a PDS componentOpen in Storybook

proposals/LogsTableWithDivider/custom.md39 lines · View on GitHub

Custom and net-new: Logs table with divider

A recipe. It adds no component. The classes below are copied from the PDS Logs Table pattern (not in the published package) or are story-only.

Net-new components

None.

Additions to existing PDS components

None.

Net-new props

None.

Copied from the PDS Logs Table pattern

  • .pds-logs-table — container for the Table, footer and scroll area.
    • Parts and modifiers: .pds-logs-table__footer, .pds-logs-table__footer-controls
  • .pds-logs-detail__section — layout of the detail panel content.
    • Parts and modifiers: .pds-logs-detail__badge, .pds-logs-detail__label, .pds-logs-detail__value, .pds-logs-detail__value--critical, .pds-logs-detail__value--warning

Story-only

  • .logs-table-example__divider-row — stretches a Labeled Divider across a table row (story-only, not part of PDS).

Uses another proposal's class

  • .pds-labeled-divider — the Labeled Divider from ../LabeledDivider/, restyled only to stretch across the row (see .logs-table-example__divider-row).

Custom CSS variables

None.

Raw values kept on purpose

None.