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.

#
Name
Category
Price
Stock
1iPhone 13Electronics$799.00150
2Galaxy S21Electronics$699.00200
3MacBook ProComputers$1,299.0080
4Dell XPS 13Computers$999.0050
5Sony WH-1000XM4Headphones$349.00120
6AirPods ProHeadphones$249.00180
7Fitbit Charge 5Wearables$179.0075

Installation

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.

#
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.

#
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.

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.

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

Href

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

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