Table

A responsive table component for displaying tabular data with proper semantic HTML structure.

Installation

# Install @opencosmos/ui to use Table
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { Table } from '@opencosmos/ui';

Example

<Table>
  Content
</Table>

Eject

Copy this component into your project for full customization

Accessibility

Uses semantic HTML table elements
Proper table structure with thead and tbody
Responsive with horizontal scroll on overflow
Screen reader accessible with table roles
Clear visual distinction between headers and data

Code Examples

Basic Usage

Simple table with header and body

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@opencosmos/ui';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>