Components

Table

A high-performance, customizable table component for efficiently displaying large datasets.

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

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Table comes packed with several components to enhance functionality and provide a seamless experience.

CheckboxAn interactive input that allows users to toggle a selection on or off, often used for settings or multiple-choice selections.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

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

<TableRow href='/collections/table-demo'/>

With Card

When you place a table inside a card, The table gutter inherits the padding from its parent card to ensure visual consistency.

Users
Manage users, groups, and roles.
#
Name
Gender
Age
Occupation
1John DoeMale30Software Engineer
2Jane SmithFemale25Marketing Manager
3Bob JohnsonMale40Doctor
4Emily ChenFemale28Teacher
5Michael BrownMale35Lawyer
6Sarah LeeFemale32Designer
7Kevin WhiteMale45CEO
8Lisa NguyenFemale29Engineer
9David KimMale38Consultant
10Hannah PatelFemale26Writer

Bleed

You can use the bleed prop to make the table extend to the edge of its container. For example, if you're displaying the table within a sidebar layout:

<SidebarProvider>
  <AppSidebar />
  <SidebarInset>
    <AppSidebarNav />
    <div className="[--layout-padding:--spacing(4)] sm:[--layout-padding:--spacing(6)] flex flex-col gap-y-(--layout-padding) p-(--layout-padding) lg:p-(--layout-padding)">
      <Table aria-label="Users" bleed className="[--gutter:var(--layout-padding)]">
        ...
      </Table>
    </div>
  </SidebarInset>
</SidebarProvider>

See the full demo at Sidebar 15.

Get premium blocksCreate stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Menu
Next
Tag Group