Table | HQ UI

Table

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

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add table

Preview

Code

#	Name	Type	Level
1	Charizard	Fire, Flying	67
2	Blastoise	Water	56
3	Venusaur	Grass, Poison	83
4	Pikachu	Electric	100

#	Name	Type	Level
1	Charizard	Fire, Flying	67
2	Blastoise	Water	56
3	Venusaur	Grass, Poison	83
4	Pikachu	Electric	100

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

#	Name	Type	Level
1	Charizard	Fire, Flying	67
2	Blastoise	Water	56
3	Venusaur	Grass, Poison	83
4	Pikachu	Electric	100

Preview

Code

	Title	Director	Producer	Release Date

Preview

Code

Search Movies

	Title	Director	Producer	Release Date
No items found

Preview

Code

#	Name	Type	Level
1	Charizard	Fire, Flying	67
2	Blastoise	Water	56
3	Venusaur	Grass, Poison	83
4	Pikachu	Electric	100

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

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