Table

Introduction

The Table component provides a responsive, accessible, and customizable way to display tabular data. With full support for sections like headers, bodies, footers, and additional features like captions, this table is designed to be lightweight and flexible.

Example: Basic Table with Images

Installation

npx axionjs-ui add table

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/react-table to create tables with sorting, filtering and pagination.

Example: Vertical Table (Key-Value pairs)

Example: Table with Caption and Footer

Example: Complex Browser Compatibility Table

File Structure

Component API

Installation

npx axionjs-ui add table

Styling Guidelines

Basic Style Customizations

• Table Width: The table defaults to 100% width but can be constrained with custom classes.
• Cell Padding: Default padding (p-2) can be adjusted for density needs.
• Row Highlighting: Rows have hover effects by default which can be disabled with hover:bg-transparent.
• Borders: Row borders are included by default but can be customized.

Advanced Styling Techniques

1. Custom Row Borders:

   <TableRow className="*:border-border [&>:not(:last-child)]:border-r">

2. Vertical Text for Headers:

   <TableHead className="h-auto py-3">
     <span className="block rotate-180 [writing-mode:vertical-rl]">
       Column Name
     </span>
   </TableHead>

3. Status Indicators:

   <TableCell>
     <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
       Active
     </span>
   </TableCell>

4. Fixed Column Width:

   <TableHead className="w-[200px]">Fixed Width Column</TableHead>

Usage Patterns

Standard Tables

For most cases, use a standard table structure with headers:

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Column 1</TableHead>
      <TableHead>Column 2</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Data 1</TableCell>
      <TableCell>Data 2</TableCell>
    </TableRow>
  </TableBody>
</Table>

Tables with Footers

Add a footer for summary rows or totals:

<Table>
  {/* Header and body */}
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell>$1,000.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Responsive Tables

For tables that might overflow on mobile, use the container’s automatic overflow handling:

<div className="w-full overflow-x-auto">
  <Table>{/* Table content */}</Table>
</div>

Accessibility

The Table component follows best practices for accessibility:

• Semantic Structure: Uses proper HTML table elements (<table>, <thead>, <tbody>, etc.).
• Keyboard Navigation: The table is navigable via keyboard, with cells accessible in a logical order.
• Captions: The <TableCaption> component allows adding descriptive text for screen readers.
• Row Selection: When implementing selectable rows, use proper ARIA attributes.
• Responsive Design: The container’s overflow handling ensures content remains accessible on small screens.

Best Practices

Performance

• For large datasets, consider pagination or virtualization to improve performance.
• Avoid deeply nested content within table cells to maintain rendering efficiency.

Responsive Design

• Consider alternative layouts for mobile displays when tables have many columns.
• Use className="hidden md:table-cell" to hide less important columns on mobile.
• Consider collapsible rows or card-based layouts for very complex tables on mobile.

User Experience

• Use consistent column alignment (e.g., right-align numerical data).
• Add hover effects for interactive rows, but disable them for header rows.
• Use appropriate spacing and typography to maintain readability.

Conclusion

The Table component provides a flexible foundation for displaying tabular data in your application. With its modular design, comprehensive styling options, and accessibility features, it’s suitable for a wide range of use cases — from simple data tables to complex interactive displays.

Use the examples provided as a starting point, and customize the component to meet your specific design and functional requirements.