Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty Table Empty State for Ark UI

An empty table state titled No data to display, with a table icon and an Add Entry button.

A table icon, the title No data to display, and a line that there are no records yet. Add Entry, with a plus, sits under the text.

Use it in place of an empty table body. Once rows exist, render them in a Table. In React, Ark UI does not know the table has no rows.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <TableIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>No data to display</EmptyTitle>
    <EmptyDescription>
      There are no records in this table yet. Add your first entry to get
      started.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>
      <PlusIcon aria-hidden="true" data-icon="inline-start" />
      Add Entry
    </Button>
  </EmptyContent>
</Empty>

FAQ

What is the Add Entry button?

A default Button in EmptyContent with a PlusIcon icon and the label Add Entry. The file does not insert a row. Handle that on click.

Which icon is in the header?

TableIcon is in EmptyMedia with variant="icon". PlusIcon is only on the button.

What does the empty table say?

EmptyTitle is "No data to display". EmptyDescription says there are no records yet and to add the first entry.

Does this render table rows?

No. It is a standalone Empty, with no table headers or cells. Put it where the table body would have been.

What is inside EmptyHeader?

EmptyMedia, then EmptyTitle, then EmptyDescription. EmptyContent is the next sibling and holds the button.

What name does the button get?

Add Entry, from its text. Mark PlusIcon and TableIcon aria-hidden so those icons are not named as well.

API Reference

Empty

Sets variant="icon". The rest is on the Empty page.

Button

No extra props in this demo. The rest is on the Button page.

All 22 empty state examples