A styled data table that renders column headers and rows of cells, with row-hover highlighting and support for rich cell content like badges or avatars.
import Table from "@/components/ui/table";
import Avatar from "@/components/ui/table-utils/avatar";
import Badge from "@/components/ui/table-utils/badge";
import Stack from "@/components/ui/table-utils/stack";
import Text from "@/components/ui/table-utils/text";
export default function TableRichCellsDemo() {
return (
<div style={{ width: 520 }}>
<Table
columns={["Ticket", "Owner", "Status"]}
rows={[
[
"#4821",
<Stack direction="row" gap={8} align="center">
<Avatar name="Sam Keller" size={20} />
<Text size="sm">Sam Keller</Text>
</Stack>,
<Badge variant="warning">Needs approval</Badge>,
],
[
"#4822",
<Stack direction="row" gap={8} align="center">
<Avatar name="Dana Ruiz" size={20} />
<Text size="sm">Dana Ruiz</Text>
</Stack>,
<Badge variant="success">Resolved</Badge>,
],
[
"#4823",
<Stack direction="row" gap={8} align="center">
<Avatar name="Priya Nair" size={20} />
<Text size="sm">Priya Nair</Text>
</Stack>,
<Badge>Open</Badge>,
],
]}
/>
</div>
);
}
Loading preview...
