Documentation

Empty State

Customize what users see when your table has no data to display. Whether it's an empty dataset, filtered results returning nothing, or data that hasn't loaded yet—provide helpful context instead of a blank table.

Basic Usage

Pass any React component to tableEmptyStateRenderer to display custom content when the table has no rows:

Empty State Configuration

PropertyRequiredDescriptionExample
tableEmptyStateRenderer
ReactNode
Optional
Custom content to display in the table body when there are no rows to display. This can occur when filters return no results or when no data is provided.

Common Use Cases

  • No search results — Show a "No results found" message with a button to clear filters
  • Empty dataset — Display onboarding guidance like "Add your first item" with a call-to-action
  • Permission restricted — Inform users they don't have access to view this data
  • Error state — Show an error message with a retry button when data fetching fails

💡 Pro Tip

This prop only affects the table body when there are no rows. For loading states while data is being fetched, use the isLoading prop instead.