Source

Command Palette

Search for a command to run...

Table

Displays data in rows and columns with built-in styling.

About Table

Container component for displaying structured data in rows and columns. Includes sub-components for building complete table layouts with proper styling. Wrapped in a scrollable container for responsive design.

Installation

Import the Table component from LSD:
import { Table } from '@nipsys/lsd'

export default function MyComponent() {
  return <Table />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Striped

Features

Additional features and capabilities of the component.
With Caption

With Footer

Composition

Table
├── TableHeader
│ └── TableHead
├── TableBody
│ └── TableRow
└── TableCell
├── TableFooter
└── TableCaption

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through interactive elements within table cells• Arrow keys - Navigate interactive elements within rows when they have focus
ARIA Attributes
Proper ARIA attributes for screen readers
• Use scope attribute on th elements to define column or row headers• Use caption element to provide a title for the table (via TableCaption)• For sortable tables, aria-sort indicates sorting direction on headers
Focus States
Visible focus indicators for keyboard users
• Tables follow standard HTML semantics. Keyboard navigation depends on interactive elements within cells. Focus moves through tab navigable elements within table cells in document order.
Toggle