# Scroll Area Advanced 1 - Both orientations

> Both Orientations.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/scroll-area-scroll-area-advanced-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/scroll-area-scroll-area-advanced-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/scroll-area-scroll-area-advanced-1-light-d002064310051e48.png
- Registry item: https://shadcnblocks.com/r/scroll-area-scroll-area-advanced-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/scroll-area-scroll-area-advanced-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `scroll-area`

## Files

### `example/scroll-area/scroll-area-advanced-1.tsx`

```tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

export const title = "Both Orientations";

const Example = () => (
  <ScrollArea className="h-[400px] w-full max-w-md rounded-md border bg-background">
    <div className="w-max p-4">
      <table className="w-full">
        <thead>
          <tr className="border-b">
            <th className="px-4 py-2 text-left font-medium">Name</th>
            <th className="px-4 py-2 text-left font-medium">Email</th>
            <th className="px-4 py-2 text-left font-medium">Role</th>
            <th className="px-4 py-2 text-left font-medium">Department</th>
            <th className="px-4 py-2 text-left font-medium">Location</th>
            <th className="px-4 py-2 text-left font-medium">Status</th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: 20 }).map((_, i) => (
            <tr className="border-b" key={i}>
              <td className="px-4 py-2 text-sm">User {i + 1}</td>
              <td className="px-4 py-2 text-sm text-muted-foreground">
                user{i + 1}@example.com
              </td>
              <td className="px-4 py-2 text-sm">
                {i % 3 === 0 ? "Admin" : i % 2 === 0 ? "Editor" : "Viewer"}
              </td>
              <td className="px-4 py-2 text-sm">
                {i % 4 === 0
                  ? "Engineering"
                  : i % 3 === 0
                    ? "Design"
                    : i % 2 === 0
                      ? "Marketing"
                      : "Sales"}
              </td>
              <td className="px-4 py-2 text-sm">
                {i % 2 === 0 ? "San Francisco" : "New York"}
              </td>
              <td className="px-4 py-2 text-sm">
                {i % 2 === 0 ? "Active" : "Inactive"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
    <ScrollBar orientation="horizontal" />
    <ScrollBar orientation="vertical" />
  </ScrollArea>
);

export default Example;
```