Table

DisplayCompoundBuilt

Data table with sortable columns, row selection, and pagination support.

Overview

Purpose

The Table component data table with sortable columns, row selection, and pagination support.within our design system. It follows our compound layer principles, ensuring consistency and reusability across applications.

When to Use

  • Use when you need presenting information
  • Appropriate for display contexts
  • Follows compound component patterns

When Not to Use

  • Avoid when simpler alternatives exist
  • Don't use for interactive functionality
  • Consider alternatives for edge cases

Live Example

import React from 'react';
import Table from './components/Table';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Table {...props}>
        {props.children || 'Example table content'}
      </Table>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Anatomy

Understanding the structure of the Table component helps ensure proper implementation and customization.

Property Description Type
rootSlot rendered into [data-slot="table"].Root
bodySlot rendered into [data-slot="table-body"].Slot
captionSlot rendered into [data-slot="table-caption"].Slot
cellSlot rendered into [data-slot="table-cell"].Slot
containerSlot rendered into [data-slot="table-container"].Slot
elementElement region of the component.Slot
footerSlot rendered into [data-slot="table-footer"].Slot
headSlot rendered into [data-slot="table-head"].Slot
headerSlot rendered into [data-slot="table-header"].Slot
rowSlot rendered into [data-slot="table-row"].Slot
responsiveEnable responsive horizontal scrollingboolean | undefined
interactiveInteractive region of the component.Part
sortableSortable region of the component.Part
headContentHead content region of the component.Part
sortIconSort icon region of the component.Part
truncateTruncate region of the component.Part
dataData region of the component.Part

Variants & States

import React from 'react';
import Table from './components/Table';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Table {...props}>
        {props.children || 'Example table content'}
      </Table>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

API Reference

Props

NameTypeRequiredDefaultDescription
responsivebooleanNotrue—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Accessibility Checklist

  • ○ Keyboard navigation support
  • ○ Screen reader compatibility
  • ○ Color contrast compliance
  • ○ Focus management
  • ○ ARIA attributes
  • ○ Reduced motion support

Usage Guidelines

Do

  • Use consistent spacing and sizing
  • Follow established patterns
  • Provide clear labels and descriptions
  • Test with assistive technologies

Don't

  • Override core functionality
  • Use without proper context
  • Ignore accessibility requirements
  • Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Table from './components/Table';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Table {...props}>
        {props.children || 'Example table content'}
      </Table>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Table - Advanced Patterns</h3>
      <p>Advanced usage patterns for Table include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Contribute

Help us improve the Table component documentation. Found an issue or have suggestions?

Edit this pageReport an issueContribution guidelines

Related Components

Alert

Inline notification banner for important messages. Does not require user interaction to dismiss.

Display • compounds

AlertNotice

Inline alert message communicating status, errors, warnings, or success. Always visible (not triggered by user interaction).

Display • compounds

AnimatedCard

A card component that animates into view when it enters the viewport.

Display • primitives

AnimatedSection

A page section that fades and slides into view when it enters the viewport.

Display • primitives

AnimatedText

Text that animates character-by-character or line-by-line into view on scroll.

Display • primitives

Avatar

Circular user or entity representation showing an image, initials, or icon fallback.

Display • primitives