COMPONENT

Table

Data table with sortable columns, hover rows, and responsive overflow. On mobile, replaced by ListItem + FlatList.

Default

Nome	Funcao	Status
Maria dos Santos	Egbomi	Ativo
Joao Oliveira	Oga	Ativo
Ana Costa	Iyawo	Pendente

Sortable Columns

Use sortable, sorted, and onSort on TableHeadto enable column sorting. The component renders the correct aria-sort attribute.

<TableHead
  sortable
  sorted={sortKey === "name" ? sortDir : false}
  onSort={() => toggleSort("name")}
>
  Nome
</TableHead>

API Reference

Prop	Type	Default	Description
sortable	boolean	false	Enable sort indicator and click handler
sorted	"asc" \| "desc" \| false	false	Current sort direction
onSort	() => void	—	Called when header is clicked
hoverable	boolean	true	Row hover highlight (TableRow)

React Native (ListItem)

Tables don't work on mobile. Use ListItem inside FlatList instead. Each row becomes a tappable list item with leading avatar, trailing badge, and press feedback.

Mobile equivalent

import { ListItem, ListAvatar, Badge } from "@/components/mobile";
import { FlatList } from "react-native";

<FlatList
  data={members}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <ListItem
      title={item.name}
      subtitle={item.role}
      leading={<ListAvatar initials="MS" />}
      trailing={<Badge variant="success">Ativo</Badge>}
      onPress={() => navigate(item.id)}
    />
  )}
  removeClippedSubviews
  maxToRenderPerBatch={15}
  windowSize={7}
/>