Usage
DataTable when a person scans, sorts, or acts on rows. Use Table for a handful of static rows.
Give every row a stable id. Memoize columns. Put status in a Badge and row actions in actionMenu, not in a column of buttons.
Empty, no-results, and error are three slots. Empty means there is no data. No-results means a search or filter removed every row. Error means the load failed. The header stays in each state.
CrudPage composes this table with a header, filters, and a record drawer when the page is a list of records.
Drawer beside the table. For a drawer you render yourself (not the built-in detail prop), wire onRowClick and selectedRowId so the open row highlights. With DrawerPlacement.Inline, the drawer is a flex sibling: the scrollport narrows beside the panel and the table reflows—do not pass horizontalScrollSpacing. With an overlaid panel (DrawerPlacement.Container or Viewport), pass the open panel's inline size to horizontalScrollSpacing from onSizeChange (or a fixed DrawerSize) so horizontal scroll keeps the last columns visible beside the drawer; column widths stay fixed while trailing scroll padding animates with the drawer. See Storybook DataTable → Drawer.