patterns

PanelTable

Thin wrapper around `<Table>` for use inside a `<DetailPanel>`. Adds a closed perimeter (border on all four sides + rounded corners) and tighter padding tuned for 672px panel width.

Page-level tables stay gutter-flush by design (no surrounding border). Inside a panel that's wrong — the panel itself is bordered on the left and visually inset, so the table needs to read as a self-contained block. Pass `fixed` for tables whose cells contain wide content (URLs, code, long IDs) so the inner `overflow-x-auto` actually constrains.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/panel-table.json

Or import from the workspace package:

import { PanelTable } from "@8maverik8/design";

Examples

Inside a panel section

Key	Value
region	eu-west-1
tier	production

<PanelTable>
  <TableHeader>
    <TableRow><TableHead>Key</TableHead><TableHead>Value</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>region</TableCell><TableCell>eu-west-1</TableCell></TableRow>
    <TableRow><TableCell>tier</TableCell><TableCell>production</TableCell></TableRow>
  </TableBody>
</PanelTable>

Guidelines

Use this whenever you put a table inside a DetailPanel.
Use plain `<Table>` inside a panel.The page-level Table primitive has no outer border; in a panel it reads as floating content with no boundary.