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/decisions.md32 lines · View on GitHub

Decisions: Logs table with divider

Recipe, with the pattern copied in

  • Decision: a recipe at Recipes/Logs table with divider. logs-table.css is copied unchanged from the PDS v2 reference checkout (patterns/tables/logs-table/); the story is a trimmed copy of its Default story (8 entries, a shorter detail panel) plus one divider row.
  • Why: the Logs Table is a pattern in the PDS source, not a published component, so there is nothing to import. The published Table provides the table, hasPanel, row status classes and the detail panel.
  • Port impact: none for the table. The pattern's CSS already lives in PDS.

The divider is a row, stretched across the cells

  • Decision: the divider is a row whose first cell holds a LabeledDivider (xs, neutral, the time-jump selector with the PDS date picker); the other cells are empty. getRowClassName gives the row logs-table-example__divider-row, and CSS stretches the divider across the row (position: absolute inside a position: relative row) and sets pointer-events: none on the row so it can't be clicked. The divider itself gets pointer-events: auto, and stops click and key events (stopPropagation) so using the menu or the date picker modal doesn't open the detail panel (the menu and modal render in portals, but React events still bubble through the tree).
  • Why: Table is data-driven and cannot span columns. Splitting into two tables would lose the sticky header, the scroll area and Prev/Next in the detail panel.
  • Limits: the divider row is still in the table's row list, so it has tabIndex=0: it can take keyboard focus, and Enter or Space opens the detail panel with nothing in it (the story returns null for it), and Prev/Next steps onto it. Sorting is turned off, since the divider has no sortable value. Mobile cards are not handled.
  • Port impact: a real fix needs a Table change: a separator row type that spans the columns and is skipped by inspect, Prev/Next, sort and selection. Raise this with the Table owners before porting the recipe.

Newest first

  • Decision: the log is newest first, as in the pattern, so entries above the divider are newer than it.
  • Why: matches the pattern's order. The label shows the day the entries below belong to.
  • Port impact: none.

The divider is the time-jump selector, not the agent divider

  • Decision: the example uses the time-jump divider (Erika, 2026-10-16), which is the common case in a log. The agentic divider works the same way in a row.
  • Why: logs are navigated by time; "Zappy engaged" belongs in the agent event log recipe.
  • Port impact: none.

Open questions

  • Does Table need a first-class separator row (spans columns, not inspectable, skipped by Prev/Next and sort)? Owner: Table maintainers.
  • Should the divider show a time (for example the day)? The label is the screen's.