Table

Lay out your data grid-style, like setting dishes on a dinner table clear and organized, perfect for comparison and review.

Basic

A table displays data in rows and columns, allowing navigation via directional keys. It can optionally support row selection and sorting.

Preview

Code

#	Name	Category	Price	Stock
1	iPhone 13	Electronics	$799.00	150
2	Galaxy S21	Electronics	$699.00	200
3	MacBook Pro	Computers	$1,299.00	80
4	Dell XPS 13	Computers	$999.00	50
5	Sony WH-1000XM4	Headphones	$349.00	120
6	AirPods Pro	Headphones	$249.00	180
7	Fitbit Charge 5	Wearables	$179.00	75

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add table

Bulk Actions

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

Preview

Code

#	Title	Author	Genre	Published
1	To Kill a Mockingbird	Harper Lee	Fiction	1960
2	1984	George Orwell	Dystopian	1949
3	The Great Gatsby	F. Scott Fitzgerald	Fiction	1925
4	The Catcher in the Rye	J.D. Salinger	Fiction	1951
5	Pride and Prejudice	Jane Austen	Romance	1813
6	The Lord of the Rings	J.R.R. Tolkien	Fantasy	1954
7	Harry Potter and the Sorcerer's Stone	J.K. Rowling	Fantasy	1997

You have not selected anything.

Drag and Drop

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

Preview

Code

#	Name	Genre	Release	Rating
1	The Matrix	Sci-Fi	1999	8.7
2	Inception	Sci-Fi	2010	8.8
3	The Godfather	Crime	1972	9.2
4	Pulp Fiction	Crime	1994	8.9
5	The Dark Knight	Action	2008	9
6	Fight Club	Drama	1999	8.8
7	Forrest Gump	Drama	1994	8.8

Sorting

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

Preview

Code

	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.

Preview

Code

ID	Name	Email	Age	Role	Band	Status
1	Randy Blythe	randy.blythe@example.com	52	Vocalist	Lamb of God	Active
2	Phil Anselmo	phil.anselmo@example.com	55	Vocalist	Pantera	Active
3	George Fisher	george.fisher@example.com	53	Vocalist	Cannibal Corpse	Active
4	Corey Taylor	corey.taylor@example.com	50	Vocalist	Slipknot	Active
5	Trevor Strnad	trevor.strnad@example.com	41	Vocalist	The Black Dahlia Murder	Inactive
6	Chuck Schuldiner	chuck.schuldiner@example.com	34	Vocalist	Death	Deceased
7	Mitch Lucker	mitch.lucker@example.com	28	Vocalist	Suicide Silence	Deceased

Href

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

<Table.Row href='/collections/table-demo' />

Collapsible Accordion