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/logs-table-divider.css21 lines · View on GitHub
/* Recipe-only: a divider inside a Table row. The Table has no row that spans
   its columns, so the divider sits in the first cell and is stretched across
   the row. The row itself is not clickable; only the divider's selector is. */
.logs-table-example__divider-row {
	pointer-events: none;
	position: relative;
}

.logs-table-example__divider-row > td {
	padding-block: var(--pds-spacing-xl);
}

.logs-table-example__divider-row > td:first-child .pds-labeled-divider {
	inset-block-start: 50%;
	inset-inline: 0;
	pointer-events: auto;
	position: absolute;
	transform: translateY(-50%);
	width: auto;
}