Table

A styled table for displaying rows of data.

Recent transactions
Date	Description	Amount
Aug 30	Salary	+ $4,150.00
Aug 24	Netflix	- $20.00
Aug 17	Electricity	- $186.35

Usage

import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

<Table>
  <TableCaption>Recent transactions</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Date</TableHead>
      <TableHead className="text-end">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Aug 30</TableCell>
      <TableCell className="text-end">+ $4,150.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Table is a thin, styled layer over the native table elements — it keeps the real <table>, <thead>, <tbody>, <tr>, <th>, and <td> semantics and just adds the surface, spacing, rounded corners, and optional striping/hover. All parts live under @appica/ui-react/table:

Table — the <table> root. Owns size, borderStyle, and the stripedRows / stripedColumns / hoverableRows toggles.
TableHeader / TableBody — <thead> / <tbody> wrappers. The header gets a tinted bar; the body holds the data rows.
TableRow — a <tr>. Mark one highlighted to call it out.
TableHead — a <th> header cell (start-aligned by default).
TableCell — a <td> data cell.
TableCaption — a <caption> that sits above or below the table via position.

The rounded corners are applied automatically to the right cells, so you don't manage them by hand. Per-cell alignment (e.g. right-aligned amounts) is just a text-end utility on the relevant TableHead/TableCell.

Examples

Default

Header, body, a caption, and a right-aligned amount column. The outer border, header bar, and corner rounding come for free.

Recent transactions
Date	Description	Amount
Aug 30	Salary	+ $4,150.00
Aug 24	Netflix	- $20.00
Aug 17	Electricity	- $186.35
Aug 12	Grocery store	- $74.20

import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

const rows = [
  { date: 'Aug 30', description: 'Salary', amount: '+ $4,150.00' },
  { date: 'Aug 24', description: 'Netflix', amount: '- $20.00' },
  { date: 'Aug 17', description: 'Electricity', amount: '- $186.35' },
  { date: 'Aug 12', description: 'Grocery store', amount: '- $74.20' },
]

export default function TableDefault() {
  return (
    <Table>
      <TableCaption>Recent transactions</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Date</TableHead>
          <TableHead>Description</TableHead>
          <TableHead className="text-end">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.description}>
            <TableCell>{row.date}</TableCell>
            <TableCell className="text-foreground-strong font-medium">{row.description}</TableCell>
            <TableCell className="text-end tabular-nums">{row.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Sizes

size scales the cell padding, corner radius, and text together — sm, md (default), or lg.

size="sm"

Plan	Seats	Per month
Starter	1–3	$0
Team	Up to 20	$12

size="md"

Plan	Seats	Per month
Starter	1–3	$0
Team	Up to 20	$12

size="lg"

Plan	Seats	Per month
Starter	1–3	$0
Team	Up to 20	$12

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

const sizes = ['sm', 'md', 'lg'] as const

const rows = [
  { name: 'Starter', seats: '1–3', price: '$0' },
  { name: 'Team', seats: 'Up to 20', price: '$12' },
]

export default function TableSizes() {
  return (
    <div className="flex w-full flex-col gap-8">
      {sizes.map((size) => (
        <div key={size} className="flex flex-col gap-2">
          <span className="text-foreground-muted text-xs font-medium">size=&quot;{size}&quot;</span>
          <Table size={size}>
            <TableHeader>
              <TableRow>
                <TableHead>Plan</TableHead>
                <TableHead>Seats</TableHead>
                <TableHead className="text-end">Per month</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.name}>
                  <TableCell className="text-foreground-strong font-medium">{row.name}</TableCell>
                  <TableCell>{row.seats}</TableCell>
                  <TableCell className="text-end tabular-nums">{row.price}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      ))}
    </div>
  )
}

Striped

stripedRows tints alternating rows for easier horizontal scanning; stripedColumns does the same down the columns. Use whichever fits the data — or neither.

stripedRows

Region	Q3	Q4
North America	$48.2k	$52.9k
Europe	$31.7k	$36.4k
Asia Pacific	$22.1k	$28.8k
Latin America	$9.4k	$11.2k

stripedColumns

Region	Q3	Q4
North America	$48.2k	$52.9k
Europe	$31.7k	$36.4k
Asia Pacific	$22.1k	$28.8k
Latin America	$9.4k	$11.2k

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

const rows = [
  { region: 'North America', q3: '$48.2k', q4: '$52.9k' },
  { region: 'Europe', q3: '$31.7k', q4: '$36.4k' },
  { region: 'Asia Pacific', q3: '$22.1k', q4: '$28.8k' },
  { region: 'Latin America', q3: '$9.4k', q4: '$11.2k' },
]

export default function TableStriped() {
  return (
    <div className="flex w-full flex-col gap-8">
      <div className="flex flex-col gap-2">
        <span className="text-foreground-muted text-xs font-medium">stripedRows</span>
        <Table stripedRows>
          <TableHeader>
            <TableRow>
              <TableHead>Region</TableHead>
              <TableHead className="text-end">Q3</TableHead>
              <TableHead className="text-end">Q4</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.region}>
                <TableCell className="text-foreground-strong font-medium">{row.region}</TableCell>
                <TableCell className="text-end tabular-nums">{row.q3}</TableCell>
                <TableCell className="text-end tabular-nums">{row.q4}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <div className="flex flex-col gap-2">
        <span className="text-foreground-muted text-xs font-medium">stripedColumns</span>
        <Table stripedColumns>
          <TableHeader>
            <TableRow>
              <TableHead>Region</TableHead>
              <TableHead className="text-end">Q3</TableHead>
              <TableHead className="text-end">Q4</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.region}>
                <TableCell className="text-foreground-strong font-medium">{row.region}</TableCell>
                <TableCell className="text-end tabular-nums">{row.q3}</TableCell>
                <TableCell className="text-end tabular-nums">{row.q4}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}

Hoverable rows

hoverableRows tints a row as the pointer passes over it — handy when each row is a target you'll click or act on.

File	Size	Modified
annual-report.pdf	2.4 MB	Aug 30
budget-2025.xlsx	845 KB	Aug 28
logo-final.svg	12 KB	Aug 21
roadmap.key	6.1 MB	Aug 14

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

const rows = [
  { file: 'annual-report.pdf', size: '2.4 MB', modified: 'Aug 30' },
  { file: 'budget-2025.xlsx', size: '845 KB', modified: 'Aug 28' },
  { file: 'logo-final.svg', size: '12 KB', modified: 'Aug 21' },
  { file: 'roadmap.key', size: '6.1 MB', modified: 'Aug 14' },
]

export default function TableHoverable() {
  return (
    <Table hoverableRows>
      <TableHeader>
        <TableRow>
          <TableHead>File</TableHead>
          <TableHead>Size</TableHead>
          <TableHead>Modified</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.file}>
            <TableCell className="text-foreground-strong font-medium">{row.file}</TableCell>
            <TableCell className="tabular-nums">{row.size}</TableCell>
            <TableCell>{row.modified}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Border styles

borderStyle switches the cell separators: solid (default), dashed, or none for a borderless, airy look.

borderStyle="solid"

Name	Role
Sarah Jenkins	Engineer
Daniel Reyes	Designer
Mateo Rossi	Researcher

borderStyle="dashed"

Name	Role
Sarah Jenkins	Engineer
Daniel Reyes	Designer
Mateo Rossi	Researcher

borderStyle="none"

Name	Role
Sarah Jenkins	Engineer
Daniel Reyes	Designer
Mateo Rossi	Researcher

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

const styles = ['solid', 'dashed', 'none'] as const

const rows = [
  { name: 'Sarah Jenkins', role: 'Engineer' },
  { name: 'Daniel Reyes', role: 'Designer' },
  { name: 'Mateo Rossi', role: 'Researcher' },
]

export default function TableBorderStyles() {
  return (
    <div className="flex w-full flex-col gap-8">
      {styles.map((borderStyle) => (
        <div key={borderStyle} className="flex flex-col gap-2">
          <span className="text-foreground-muted text-xs font-medium">borderStyle=&quot;{borderStyle}&quot;</span>
          <Table borderStyle={borderStyle}>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Role</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.name}>
                  <TableCell className="text-foreground-strong font-medium">{row.name}</TableCell>
                  <TableCell>{row.role}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      ))}
    </div>
  )
}

Highlighted row

Mark a TableRow as highlighted to single it out — a selected row, the current plan, or a flagged entry. It keeps its background through striping and hover.

Plan	Seats	Per month
Starter	1–3	$0
Team	Up to 20	$12
Business	Up to 100	$29
Enterprise	Unlimited	Custom

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'

const plans = [
  { name: 'Starter', seats: '1–3', price: '$0', current: false },
  { name: 'Team', seats: 'Up to 20', price: '$12', current: true },
  { name: 'Business', seats: 'Up to 100', price: '$29', current: false },
  { name: 'Enterprise', seats: 'Unlimited', price: 'Custom', current: false },
]

export default function TableHighlighted() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Plan</TableHead>
          <TableHead>Seats</TableHead>
          <TableHead className="text-end">Per month</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {plans.map((plan) => (
          <TableRow key={plan.name} highlighted={plan.current}>
            <TableCell className="text-foreground-strong font-medium">{plan.name}</TableCell>
            <TableCell>{plan.seats}</TableCell>
            <TableCell className="text-end tabular-nums">{plan.price}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Rich content

Cells take any content, so compose them with other components — an Avatar and stacked text in one cell, a Badge for status in another — and pull the caption to the top with position="top".

Workspace members
Member	Role	Status
SJ Sarah Jenkinssarah@appica.dev	Owner	Active
DR Daniel Reyesdaniel@appica.dev	Editor	Active
MR Mateo Rossimateo@appica.dev	Viewer	Invited

import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'
import { Avatar, AvatarImage, AvatarFallback } from '@appica/ui-react/avatar'
import { Badge } from '@appica/ui-react/badge'

const members = [
  { src: '/avatars/01.jpg', name: 'Sarah Jenkins', email: 'sarah@appica.dev', role: 'Owner', status: 'Active' },
  { src: '/avatars/02.jpg', name: 'Daniel Reyes', email: 'daniel@appica.dev', role: 'Editor', status: 'Active' },
  { src: '/avatars/03.jpg', name: 'Mateo Rossi', email: 'mateo@appica.dev', role: 'Viewer', status: 'Invited' },
] as const

const statusVariant = {
  Active: 'success',
  Invited: 'warning',
} as const

export default function TableRichContent() {
  return (
    <Table hoverableRows>
      <TableCaption position="top" className="text-foreground-intense text-start font-medium">
        Workspace members
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Member</TableHead>
          <TableHead>Role</TableHead>
          <TableHead className="text-end">Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {members.map((member) => (
          <TableRow key={member.email}>
            <TableCell>
              <div className="flex items-center gap-3">
                <Avatar size="sm">
                  <AvatarImage src={member.src} alt={member.name} />
                  <AvatarFallback>
                    {member.name
                      .split(' ')
                      .map((part) => part[0])
                      .join('')}
                  </AvatarFallback>
                </Avatar>
                <div className="flex flex-col">
                  <span className="text-foreground-emphasis font-medium">{member.name}</span>
                  <span className="text-xs">{member.email}</span>
                </div>
              </div>
            </TableCell>
            <TableCell>{member.role}</TableCell>
            <TableCell className="text-end">
              <Badge variant={statusVariant[member.status]} size="sm">
                {member.status}
              </Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Scrollable

For a long table, wrap it in a ScrollArea with a fixed height. Pin the header to the top of the viewport with [&>thead>tr>th]:sticky [&>thead>tr>th]:top-0 so the columns stay labelled while the rows scroll.

Date	Description	Amount
Aug 30	Salary	+ $4,150.00
Aug 28	Spotify	- $11.99
Aug 24	Netflix	- $20.00
Aug 22	Freelance invoice	+ $1,200.00
Aug 19	Coffee roasters	- $18.40
Aug 17	Electricity	- $186.35
Aug 14	Gym membership	- $39.00
Aug 12	Grocery store	- $74.20
Aug 09	Refund — returns	+ $52.10
Aug 06	Phone bill	- $45.00
Aug 03	Bookshop	- $28.75
Aug 01	Rent	- $1,650.00

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'
import { ScrollArea } from '@appica/ui-react/scroll-area'

const rows = [
  { date: 'Aug 30', description: 'Salary', amount: '+ $4,150.00' },
  { date: 'Aug 28', description: 'Spotify', amount: '- $11.99' },
  { date: 'Aug 24', description: 'Netflix', amount: '- $20.00' },
  { date: 'Aug 22', description: 'Freelance invoice', amount: '+ $1,200.00' },
  { date: 'Aug 19', description: 'Coffee roasters', amount: '- $18.40' },
  { date: 'Aug 17', description: 'Electricity', amount: '- $186.35' },
  { date: 'Aug 14', description: 'Gym membership', amount: '- $39.00' },
  { date: 'Aug 12', description: 'Grocery store', amount: '- $74.20' },
  { date: 'Aug 09', description: 'Refund — returns', amount: '+ $52.10' },
  { date: 'Aug 06', description: 'Phone bill', amount: '- $45.00' },
  { date: 'Aug 03', description: 'Bookshop', amount: '- $28.75' },
  { date: 'Aug 01', description: 'Rent', amount: '- $1,650.00' },
]

export default function TableScrollable() {
  return (
    <ScrollArea className="border-border-muted h-75 w-full max-w-md rounded-lg border p-2">
      <Table className="border-0 p-0 [&>thead>tr>th]:sticky [&>thead>tr>th]:top-0">
        <TableHeader>
          <TableRow>
            <TableHead>Date</TableHead>
            <TableHead>Description</TableHead>
            <TableHead className="text-end">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.description}>
              <TableCell>{row.date}</TableCell>
              <TableCell className="text-foreground-strong font-medium">{row.description}</TableCell>
              <TableCell className="text-end tabular-nums">{row.amount}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </ScrollArea>
  )
}

Horizontal scroll

When a table has more columns than will fit, wrap it in a horizontal ScrollArea and keep the cells from wrapping with whitespace-nowrap. The columns scroll sideways instead of cramping.

Name	Email	Role	Team	Location	Joined
Sarah Jenkins	sarah@appica.dev	Owner	Product	San Francisco	Jan 2021
Daniel Reyes	daniel@appica.dev	Editor	Engineering	Austin	Mar 2022
Mateo Rossi	mateo@appica.dev	Viewer	Design	Milan	Jul 2022
Amara Okafor	amara@appica.dev	Editor	Marketing	Lagos	Nov 2023
Noah Patel	noah@appica.dev	Viewer	Support	Toronto	Feb 2024

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@appica/ui-react/table'
import { ScrollArea } from '@appica/ui-react/scroll-area'

const rows = [
  {
    name: 'Sarah Jenkins',
    email: 'sarah@appica.dev',
    role: 'Owner',
    team: 'Product',
    location: 'San Francisco',
    joined: 'Jan 2021',
  },
  {
    name: 'Daniel Reyes',
    email: 'daniel@appica.dev',
    role: 'Editor',
    team: 'Engineering',
    location: 'Austin',
    joined: 'Mar 2022',
  },
  {
    name: 'Mateo Rossi',
    email: 'mateo@appica.dev',
    role: 'Viewer',
    team: 'Design',
    location: 'Milan',
    joined: 'Jul 2022',
  },
  {
    name: 'Amara Okafor',
    email: 'amara@appica.dev',
    role: 'Editor',
    team: 'Marketing',
    location: 'Lagos',
    joined: 'Nov 2023',
  },
  {
    name: 'Noah Patel',
    email: 'noah@appica.dev',
    role: 'Viewer',
    team: 'Support',
    location: 'Toronto',
    joined: 'Feb 2024',
  },
]

export default function TableWide() {
  return (
    <ScrollArea orientation="horizontal" className="w-full max-w-md">
      <Table className="whitespace-nowrap">
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Role</TableHead>
            <TableHead>Team</TableHead>
            <TableHead>Location</TableHead>
            <TableHead>Joined</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.email}>
              <TableCell className="text-foreground-strong font-medium">{row.name}</TableCell>
              <TableCell>{row.email}</TableCell>
              <TableCell>{row.role}</TableCell>
              <TableCell>{row.team}</TableCell>
              <TableCell>{row.location}</TableCell>
              <TableCell>{row.joined}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </ScrollArea>
  )
}

RTL

Every Appica UI component supports right-to-left layouts out of the box. Set the dir attribute on a container (commonly your <html> element) so CSS logical properties resolve correctly, and wrap your tree in DirectionProvider so direction-aware behavior follows the same direction.

import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

Columns lay out from the right, the rounded corners mirror to the correct sides, and a text-end amount column moves to the left edge — all because the styling uses logical properties. For setup details and caveats, see the RTL guide.

أحدث المعاملات
التاريخ	الوصف	المبلغ
٣٠ أغسطس	الراتب	+ ٤٬١٥٠٫٠٠ $
٢٤ أغسطس	نتفليكس	- ٢٠٫٠٠ $
١٧ أغسطس	الكهرباء	- ١٨٦٫٣٥ $

API reference

Table and its parts are styled native table elements — they're not Base UI primitives. Each forwards ref and every remaining attribute to its underlying element, so standard table attributes (colSpan, scope, …) work as usual.

Table

The <table> root. Owns the surface, sizing, and row/column treatments.

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Cell padding, corner radius, and text scale.
`borderStyle`	`'solid' \| 'dashed' \| 'none'`	`'solid'`	Style of the cell separators.
`stripedRows`	`boolean`	`false`	Tint alternating rows.
`stripedColumns`	`boolean`	`false`	Tint alternating columns.
`hoverableRows`	`boolean`	`false`	Tint a row on pointer hover.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

TableCaption

A <caption> describing the table. Placed above or below.

Prop	Type	Default	Description
`position`	`'top' \| 'bottom'`	`'bottom'`	Render the caption above or below the table.
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

TableRow

A <tr>. Use highlighted to call out a single row.

Prop	Type	Default	Description
`highlighted`	`boolean`	`false`	Apply the persistent highlight background (`data-highlighted`).
`className`	`string`	—	Extra classes, merged via `tailwind-merge`.

TableHeader, TableBody, TableHead, TableCell

Thin wrappers over <thead>, <tbody>, <th>, and <td>. They take their native attributes plus className (merged via tailwind-merge). TableHead is start-aligned by default — add text-end (or text-center) for other alignments.

Accessibility

The component renders real table semantics — <table>, <thead>, <tbody>, <tr>, <th>, <td> — so screen readers announce rows, columns, and headers natively.
Use TableHead for header cells, and add scope="col" (or scope="row" for a row header) when the relationship isn't obvious, so assistive tech maps each data cell to its header.
A TableCaption gives the table an accessible name; keep it even when it's visually subtle.
highlighted is a visual cue only — if the highlighted row carries meaning (e.g. "current plan"), convey that in text as well, not by color alone.
Row hover and the highlight are background-only changes that don't affect the reading order or content.

Actions & Inputs

Data Display

Decoration & Effects

Layout

Menus

Navigation

Overlays

Status & Feedback

Table

Usage

Examples

Default

Sizes

Striped

Hoverable rows

Border styles

Highlighted row

Rich content

Scrollable

Horizontal scroll

RTL

API reference

Table

TableCaption

TableRow

TableHeader, TableBody, TableHead, TableCell

Accessibility