Data Display Components

Tables, progress indicators, ratings, pagination, loading states, and empty states for presenting data effectively.

DataTable

Feature-rich data table with sorting, filtering, pagination, column reordering, row selection, and bulk actions.

Full Featured DataTable

Team members

Manage your team and their permissions.

Column order:

Name

Role

Status

Department

Name	Email	Role	Status	Department
Olivia Rhye	olivia@untitledui.com	Admin	Active	Design
Phoenix Baker	phoenix@untitledui.com	Editor	Active	Engineering
Lana Steiner	lana@untitledui.com	Viewer	Inactive	Marketing
Demi Wilkinson	demi@untitledui.com	Editor	Active	Design
Candice Wu	candice@untitledui.com	Admin	Active	Engineering

Rows per page

1-5 of 25

DataTable Props

Prop	Type	Default	Description
`columns`*	`DataTableColumn<T>[]`	-	Column definitions array.
`data`*	`T[]`	-	Data array. Each item must have an `id` property.
`mode`	`"client" \| "server"`	`"client"`	Processing mode. Client handles sort/filter/paginate internally.
`isLoading`	`boolean`	`false`	Shows skeleton rows when loading.
`title`	`string`	-	Card header title.
`description`	`string`	-	Card header description.
`badge`	`ReactNode`	-	Badge next to the title.
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`	Row selection mode.
`striped`	`boolean`	`false`	Alternating row backgrounds.
`enableColumnResize`	`boolean`	`true`	Enable column resize handles.
`enableColumnReorder`	`boolean`	`true`	Enable drag-and-drop column reordering.
`printable`	`boolean`	`false`	Show print button and optimize for print.
`onAddNew`	`() => void`	-	Shows Add button. Ctrl+B shortcut.
`onEdit`	`(item: T) => void`	-	Per-row edit action.
`onDelete`	`(item: T) => void`	-	Per-row delete action.
`onBulkDelete`	`(items: T[]) => void`	-	Bulk delete selected rows.
`initialPageSize`	`number`	`10`	Initial number of rows per page.
`pageSizeOptions`	`number[]`	`[5, 10, 20, 50]`	Available page size options.

DataTableColumn Props

Prop	Type	Default	Description
`id`*	`string`	-	Unique column identifier.
`label`*	`string`	-	Column header label.
`field`	`keyof T & string`	-	Property key on data items for auto rendering and filtering.
`render`	`(item: T, index: number) => ReactNode`	-	Custom cell renderer.
`sortable`	`boolean`	`false`	Enable sorting on this column.
`filterable`	`boolean`	-	Enable filtering. Default true if field is set.
`description`	`string`	-	Tooltip text for column header.
`hideable`	`boolean`	`true`	Allow user to toggle visibility.
`width`	`number`	-	Default width in pixels.
`minWidth`	`number`	`50`	Minimum width when resizing.

Table

Compound table component built on React Aria with selection, sorting, and card wrapper support.

Table Card

Team members

Manage your team members and their account permissions.

Name	Status	Role	Email
John Doe @johndoe	Active	Admin	john@example.com
Jane Smith @janesmith	Active	Editor	jane@example.com
Bob Wilson @bobwilson	Inactive	Viewer	bob@example.com

Table Props

Prop	Type	Default	Description
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`	Controls row selection behavior.
`size`	`"sm" \| "md"`	`"md"`	Table size variant affecting row padding.
`sortDescriptor`	`SortDescriptor`	-	Current sort column and direction.
`onSortChange`	`(descriptor: SortDescriptor) => void`	-	Callback fired when a sortable column header is clicked.

TableCard.Header Props

Prop	Type	Default	Description
`title`*	`string`	-	Card header title text.
`badge`	`string`	-	Badge content displayed next to the title.
`description`	`string`	-	Supporting text below the title.
`contentTrailing`	`ReactNode`	-	Trailing content such as action buttons.

Table.Head Props

Prop	Type	Default	Description
`label`	`string`	-	Column header text.
`isRowHeader`	`boolean`	`false`	Marks the column as the row header for accessibility.
`tooltip`	`string`	-	Tooltip content shown on hover.
`allowsSorting`	`boolean`	`false`	Enables sorting on this column.

Progress Indicators

Linear and circular progress bars for visualizing completion, scores, and loading states.

Progress Bar

75%

45%

Floating Labels

65%

80%

Circle Progress

25%

50%

65%

75%

90%

Circle with Label

Progress

75%

Complete

90%

Half Circle

45%

65%

Score

85%

ProgressBar Props

Prop	Type	Default	Description
`value`*	`number`	-	Current progress value.
`min`	`number`	`0`	Minimum value of the progress range.
`max`	`number`	`100`	Maximum value of the progress range.
`labelPosition`	`"right" \| "bottom" \| "top-floating" \| "bottom-floating"`	-	Position of the percentage label relative to the bar.
`valueFormatter`	`(value: number) => string`	-	Custom formatter for the displayed value.
`className`	`string`	-	Additional CSS classes for the container.

ProgressBarCircle Props

Prop	Type	Default	Description
`value`*	`number`	-	Current progress value (0-100).
`size`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size of the circular progress indicator.
`label`	`string`	-	Label text displayed below the percentage.

Rating

Star ratings and badge components for displaying scores and reviews.

Rating Stars

Rating Badge

Best Design Tool

2,000+ reviews

RatingStars Props

Prop	Type	Default	Description
`rating`*	`number`	-	Rating value between 0 and 5. Supports half values (e.g. 3.5).

RatingBadge Props

Prop	Type	Default	Description
`rating`*	`number`	-	Numeric rating displayed alongside stars.
`title`*	`string`	-	Primary title text for the badge.
`subtitle`	`string`	-	Supporting text such as review count.
`theme`	`"dark" \| "light"`	`"light"`	Visual theme of the rating badge.

Pagination

Page navigation controls in default, dot, and line styles.

Default

Dot

Line

Pagination Props

Prop	Type	Default	Description
`page`*	`number`	-	Currently active page (1-based index).
`total`*	`number`	-	Total number of pages.
`onPageChange`	`(page: number) => void`	-	Callback fired when the active page changes.
`rounded`	`boolean`	`false`	Applies rounded styling to pagination buttons.
`className`	`string`	-	Additional CSS classes for the container.

Loading Indicators

Animated spinners and progress indicators for loading and processing states.

Line Simple

Line Spinner

Dot Circle

With Label

Please wait

LoadingIndicator Props

Prop	Type	Default	Description
`type`	`"line-simple" \| "line-spinner" \| "dot-circle"`	`"line-simple"`	Visual style of the loading animation.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the loading indicator.
`label`	`string`	-	Optional text label displayed alongside the indicator.

Empty State

Placeholder content for empty lists, search results, and initial states.

With Illustration

No files uploaded

Upload your first file to get started. Drag and drop or click to browse.

With Featured Icon

No results found

Try adjusting your search or filter.

EmptyState Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Controls the overall size and spacing of the empty state.

EmptyState.Header Props

Prop	Type	Default	Description
`pattern`	`"none" \| "circle" \| "grid" \| "grid-check" \| "square"`	`"none"`	Decorative background pattern behind the icon or illustration.
`patternSize`	`number`	-	Size of the background pattern in pixels.