TableEmptyState

TableEmptyState renders a full-width row inside a Table or DataTable body when there are no rows to display. It centers the message, supports an optional action, and stays inside the table's cell semantics.

#Default usage

<TableContainer>
  <Table dense>
    <TableHeader>
      <TableRow>
        <TableHead>Package</TableHead>
        <TableHead>State</TableHead>
        <TableHead align="end">Usage</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableEmptyState
        colSpan={3}
        description="Create a package to start tracking releases."
        title="No packages"
      />
    </TableBody>
  </Table>
</TableContainer>

#Import

import { TableEmptyState } from "@froggdesign/enter-ui-react";

#Accessibility

TableEmptyState renders a real tr + td with colSpan, so the row stays inside the table's accessibility tree. Pair it with a clear title and short description; avoid putting actions only in the empty row when the same affordance is available in the surrounding toolbar.

#API

• title, description: ReactNode copy.
• icon: optional leading icon.
• action: optional CTA rendered below the description.
• colSpan: column count to span (defaults to 1; set to total column count).
• Extends td props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.