A scrollable container that fades its edges and keeps a visible or hidden scrollbar, so users always know there is more content to scroll past.
import { ScrollArea } from "@/components/ui/scroll-area";
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"];
const REGIONS = ["NA", "EU", "APAC", "LATAM", "MEA"];
export default function ScrollAreaBothDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-10">
<div className="w-full max-w-[520px] rounded-xl border border-border bg-card p-2">
<ScrollArea
label="Usage by region and month"
orientation="both"
maxHeight={200}
>
<table className="w-max border-collapse text-left text-[12px]">
<thead>
<tr>
<th className="sticky top-0 bg-card px-3 py-2 text-muted-foreground">
Region
</th>
{MONTHS.map((month) => (
<th
key={month}
className="sticky top-0 bg-card px-3 py-2 text-muted-foreground"
>
{month}
</th>
))}
</tr>
</thead>
<tbody>
{REGIONS.map((region, row) => (
<tr key={region}>
<td className="px-3 py-2 font-medium text-foreground">
{region}
</td>
{MONTHS.map((month, col) => (
<td key={month} className="px-3 py-2 text-muted-foreground">
{(((row + 3) * (col + 7) * 37) % 900) + 100}
</td>
))}
</tr>
))}
</tbody>
</table>
</ScrollArea>
</div>
</div>
);
}
