A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$125.00
INV003UnpaidBank Transfer$350.00

Table Component

A responsive table component for displaying structured data.

  • Clean, minimal design with customizable styling
  • Semantic HTML structure with proper accessibility
  • Support for captions, headers, and footers
  • Built to work well across device sizes

Installation

The Table component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the table in your project.

React TSX
1import { 
2  Table, 
3  TableHeader, 
4  TableBody, 
5  TableFooter,
6  TableHead, 
7  TableRow, 
8  TableCell,
9  TableCaption
10} from "@/components/modern-ui/table"

React TSX
1<Table>
2  <TableCaption>Table Caption</TableCaption>
3  <TableHeader>
4    <TableRow>
5      <TableHead>Header 1</TableHead>
6      <TableHead>Header 2</TableHead>
7    </TableRow>
8  </TableHeader>
9  <TableBody>
10    <TableRow>
11      <TableCell>Cell 1</TableCell>
12      <TableCell>Cell 2</TableCell>
13    </TableRow>
14  </TableBody>
15</Table>

Examples

Basic Table

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser
List of recent orders with their status.
Order IDCustomerStatusTotal
#12345John DoeShipped$249.99
#12346Jane SmithProcessing$149.99
Total Orders: 2$399.98

API Reference

Table Component Parts

The Table component is composed of several parts:

ComponentDescription
TableThe root table container
TableHeaderContainer for the table header row(s)
TableBodyContainer for table data rows
TableFooterContainer for the table footer row(s)
TableRowIndividual table row
TableHeadHeader cell (<th> element)
TableCellTable data cell (<td> element)
TableCaptionCaption element for the table

Styling

The Table component comes with sensible default styling:

  • Clean borders and spacing between rows
  • Subtle hover effects on rows for better legibility
  • Proper alignment of header and data cells
  • Responsive by default with horizontal scrolling on small screens

Accessibility

The Table component follows web accessibility best practices:

  • Uses semantic HTML table elements
  • Properly associates header cells with data cells
  • Supports captions for table descriptions
  • Maintains proper focus management