Empty Table State

Overview

EmptyTableState provides a consistent placeholder for tables, lists, or other collections that have no content to show. It pairs an Icon with a title and optional description, and can surface a “Clear Filters” action when an empty result is caused by active filters.

It is commonly rendered inside a Table empty state cell, but works anywhere an empty collection needs to be communicated.

Usage

Import the component:

import { EmptyTableState } from "@eqtylab/equality";

Basic usage with required properties:

<EmptyTableState icon="SearchX" title="No Members Available" />

Variants

Default

Without Description

The description is optional — omit it for a more compact state.

With Clear Button

When an empty result is the consequence of active filters, set showClearButton and provide an onClear handler to let users reset their filters. The button only renders when both props are present.

Usage

<EmptyTableState
  icon="SearchX"
  title="No External Users Found"
  description="Try refining your search terms or clearing filters."
  showClearButton
  onClear={() => handleClearFilters()}
/>

Elevation

Use the elevation prop to control the elevation of the icon’s background so it sits correctly against the surface it’s placed on. It accepts the same elevation values as the rest of the design system and defaults to overlay (the example below sets elevation="raised" to demonstrate overriding the default).

Usage

import { ELEVATION } from "@eqtylab/equality";

<EmptyTableState
  icon="SearchX"
  title="No Members Available"
  elevation={ELEVATION.RAISED}
/>;

Props