Table

Data container displaying information in rows and columns for efficient data comparison.

Customer name	Date/Time	Location	Total
Aaliyah Martinez	Feb 17, 2024	123 Main Street, Anytown, USA	$2999
Cameron Williamson	Feb 17, 2024	456 Elm Avenue, Smallville, CA	$1999
Lindsay Walton	Feb 17, 2024	789 Maple Lane, Pleasantville, NY	$99

Stripped Table

Customer name	Date/Time	Location	Total
Aaliyah Martinez	Feb 17, 2024	123 Main Street, Anytown, USA	$2999
Cameron Williamson	Feb 17, 2024	456 Elm Avenue, Smallville, CA	$1999
Lindsay Walton	Feb 17, 2024	789 Maple Lane, Pleasantville, NY	$99
Leonard Krasner	Feb 17, 2024	890 Birch Boulevard, Riverside, WA	$799
Alexander Hernandez	Feb 17, 2024	329 Second Street Dallas	$999

Customer Table

Customer	Date/Time	Location	Status
Aaliyah Hanson aaliyah.hanson@gamil.com	Feb 17, 2024 08:48 AM	790 Eighth Street Philadelphia	Paid
Aaliyah Martinez aaliyah.martinez@gamil.com	Feb 17, 2024 08:48 AM	935 Fifth Street New York	Returned
Aaron Cook aaron.cook@gamil.com	Feb 17, 2024 08:48 AM	169 First Street Phoenix	Paid
Abigail Rivera abigail.rivera@gamil.com	Feb 17, 2024 08:48 AM	996 Oak Street Chicago	Paid
Addison Wright addison.wright@gamil.com	Feb 17, 2024 08:48 AM	568 Tenth Street San Francisco	Paid
Addison Ward addison.ward@gamil.com	Feb 17, 2024 08:48 AM	1320 Fifth Street San Francisco	Paid
Adrian Flores adrian.flores@gamil.com	Feb 17, 2024 08:48 AM	1395 Madison Street New York	Pending
Alexander Jones alexander.jones@gamil.com	Feb 17, 2024 08:48 AM	664 Maple Street Indianapolis	Returned
Alexander Hernandez alexander.hernandez@gamil.com	Feb 17, 2024 08:48 AM	329 Second Street Dallas	Paid

Table Structure

<!-- Table Wrapper/Scroller -->
<div class="relative w-full max-w-xl overflow-auto rounded-2xl border border-main-border bg-surface"></div>
 
<!-- Table -->
<table class="w-full text-left text-sm text-main-text rtl:text-right"></table>
 
<!-- Table Header -->
<thead class="sticky left-0 top-0 z-10 h-11 border-b bg-accent"></thead>
 
<!-- Table Row -->
<tr></tr>
 
<!-- Table Header  -->
<th scope="col" class="px-4 py-3"></th>
 
<!-- Table Body -->
<tbody></tbody>
 
<!-- Table Body Row -->
<tr class="border-b bg-surface text-main-text"></tr>
 
<!-- Table Cell -->
<td class="px-4 py-3"></td>

Switch

Tabs

Table

Stripped Table

Customer Table

Table Structure

On this page