registry:component

Table

v1.0.0ga

Responsive table primitive with semantic row and cell slots.

Registry Endpoint

npx shadcn@latest add @aavya/ui-table

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-table.json

Live Preview

Name	Role	Status
Ava Chen	Designer	Active
Liam Fox	Engineer	Pending

Props

Table forwards remaining props to all <table> element props.

Guidelines

Use a real <table> with header cells for tabular data.
Keep one idea per column; right-align numeric columns.
Provide a caption or heading describing the table.

Don’t

Don't use a table for layout — use CSS grid or flex.
Don't cram unrelated data into one wide table; split or paginate.
Don't convey meaning by row color alone.

Accessibility

Role

Native table semantics via <table> / <th> / <td> (handled).

Keyboard

Standard reading order; interactive cells are normal tab stops. (handled)

Screen reader

Header cells (<th scope>) let AT associate data with its column/row. You provide proper header cells and a caption.

Focus

No focus unless cells contain controls.

Gotcha

Header rows must be <th>, not styled <td> — without them screen-reader users lose the column/row context.

Usage Snippet

import { Table } from '@/components/ui/table'

export default function Example() {
  return (
    <div className="p-6">
      <Table />
    </div>
  )
}

Source Preview

'use client'

import * as React from 'react'

import { cn } from '@/lib/utils'

function Table({ className, ...props }: React.ComponentProps<'table'>) {
  return (
    <div data-slot='table-container' className='relative w-full overflow-x-auto'>
      <table data-slot='table' className={cn('w-full caption-bottom text-sm', className)} {...props} />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
  return <thead data-slot='table-header' className={cn('[&_tr]:border-b', className)} {...props} />
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
  return <tbody data-slot='table-body' className={cn('[&_tr:last-child]:border-0', className)} {...props} />
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
  return (
    <tfoot
      data-slot='table-footer'
      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
  return (
    <tr
      data-slot='table-row'
      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
  return (
    <th
      data-slot='table-head'
      className={cn(