import { Canvas, Meta, Title } from '@storybook/addon-docs/blocks';
import * as LogsTableStories from './LogsTableWithDivider.stories';
<Meta of={LogsTableStories} name='Usage' />
<Title />
## Purpose
Marks a point in time in a log, and lets the reader jump to another one, with a Labeled Divider inside the PDS Logs Table.
## Usage
This is a recipe, not a component. It is the PDS Logs Table pattern with one extra row.
- The divider is a table row. Its first cell holds a Labeled Divider (`size='xs'`) with a time selector (`menuItems`) and the date picker; the other cells are empty.
- Entries are newest first, so entries above the divider are newer.
- Table has no row that spans columns, so the divider is stretched across the full row, edge to edge, with CSS. The row itself can't be clicked, but it can still take keyboard focus and Enter opens an empty detail panel. The divider stops its own clicks and keys from reaching the row. A first-class separator row in Table would fix this (see the open question).
## Implementation
<hr />
<Canvas of={LogsTableStories.Default} />
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