Collections

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

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.

The Table comes packed with a variety of components to make it stand out.

Checkbox

Click to check or uncheck, like making a choice on a quiz, simple and straightforward for quick decisions.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

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 Blythe[email protected]52VocalistLamb of GodActive
2Phil Anselmo[email protected]55VocalistPanteraActive
3George Fisher[email protected]53VocalistCannibal CorpseActive
4Corey Taylor[email protected]50VocalistSlipknotActive
5Trevor Strnad[email protected]41VocalistThe Black Dahlia MurderInactive
6Chuck Schuldiner[email protected]34VocalistDeathDeceased
7Mitch Lucker[email protected]28VocalistSuicide SilenceDeceased

Href

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

<TableRow href='/collections/table-demo'/>
Pie ChartColor Swatch Picker