Table

A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.

MessageTag Group

Installation

npx shadcn add https://hq-ui.vercel.app/r/nova/table

Examples

Searchable

In the latest React Aria release, tables can now be made searchable since Autocomplete supports all collection types, including Table This allows users to filter table rows directly with their input.

This example comes from a tweet by Devon here.

table-with-autocomplete-demo
#
Name
Email
Role
Status
Joined
1Justice Larkinjustice.larkin@example.comAdminActive2022-01-15
2Megan Smithmegan.smith@example.comEditorActive2022-03-12
3Daniel Wudaniel.wu@example.comViewerInactive2022-04-08
4Sophia Hernandezsophia.hernandez@example.comAdminActive2022-05-25
5Liam Johnsonliam.johnson@example.comEditorSuspended2022-06-14
6Emily Brownemily.brown@example.comViewerActive2022-07-09
7Noah Millernoah.miller@example.comAdminActive2022-08-02
8Ava Wilsonava.wilson@example.comEditorInactive2022-09-19
9Ethan Davisethan.davis@example.comViewerActive2022-10-21
10Olivia Martinezolivia.martinez@example.comEditorActive2022-11-30

Expandable rows

Tables can have expandable rows to show additional details. This is useful for displaying more information without clutter ing the main table view.

table-expandable-demo
Project
Owner
Team
Status
Progress
Last updated
Security auditCharlotte AllenPlatformPlanned12%Apr 5, 2026
Billing system upgradeElijah YoungFinanceBlocked43%Apr 3, 2026

Bulk actions

Tables may require bulk actions for handling multiple entries at once.

table-bulk-demo
#
Title
Author
Genre
Published
1To Kill a MockingbirdHarper LeeFiction1960
21984George OrwellDystopian1949
3The Great GatsbyF. Scott FitzgeraldFiction1925
4The Catcher in the RyeJ.D. SalingerFiction1951
5Pride and PrejudiceJane AustenRomance1813
6The Lord of the RingsJ.R.R. TolkienFantasy1954
7Harry Potter and the Sorcerer's StoneJ.K. RowlingFantasy1997
You have not selected anything.

Drag and drop

Similar to GridList, tables can also support drag and drop functionality.

table-drag-demo
#
Name
Genre
Release
Rating
1The MatrixSci-Fi1999
8.7
2InceptionSci-Fi2010
8.8
3The GodfatherCrime1972
9.2
4Pulp FictionCrime1994
8.9
5The Dark KnightAction2008
9
6Fight ClubDrama1999
8.8
7Forrest GumpDrama1994
8.8

Sorting

Tables can be made sortable. Activate sorting by clicking on a column header.

table-sorting-demo
Title
Director
Producer
Release Date

Resizable

Tables can be made resizable. To enable resizing, set the allowResize prop to true. And to make a column resizable, set the isResizable prop to true on the column.

table-resize-demo
ID
Name
Email
Age
Role
Band
Status
1Randy Blytherandy.blythe@example.com52VocalistLamb of GodActive
2Phil Anselmophil.anselmo@example.com55VocalistPanteraActive
3George Fishergeorge.fisher@example.com53VocalistCannibal CorpseActive
4Corey Taylorcorey.taylor@example.com50VocalistSlipknotActive
5Trevor Strnadtrevor.strnad@example.com41VocalistThe Black Dahlia MurderInactive
6Chuck Schuldinerchuck.schuldiner@example.com34VocalistDeathDeceased
7Mitch Luckermitch.lucker@example.com28VocalistSuicide SilenceDeceased

Infinite scrolling

Tables can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user scrolls down, improving performance and user experience.

table-infinite-scroll-demo
Name
Height
Mass
Birth year
Gender
Eye
No characters found.

Links

To create a clickable link within a table row, use the href prop.

<TableRow href='/collections/table-demo'/>
Message
Tag Group