Table

Structured data presentation

Data DisplayStable

Preview

Interactive preview of the Table component with different variants.

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Active
Bob Johnson	bob@example.com	User	Inactive

Installation

Install the package via npm:

bash

npm install apex-design-system

Import

tsx

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from 'apex-design-system';

Basic Usage

tsx

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Jane Doe</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>John Smith</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in Storybook View source