Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Both Orientations Scroll Area for React

A table of 20 people with Name, Email, Role, Department, Location and Status, in a panel that scrolls up and sideways.

A panel holds a table of 20 people. The columns are Name, Email, Role, Department, Location and Status. The panel scrolls vertically and horizontally.

Scroll both ways when a table has more columns and rows than the panel. A Table that drops columns is easier if a sideways scroll is awkward. Base UI in React does not build the rows.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Scroll Area anatomy: root, viewport, content, scrollbar, thumb

Usage

<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-start font-medium">Name</th>
          <th className="px-4 py-2 text-start font-medium">Email</th>
          <th className="px-4 py-2 text-start font-medium">Role</th>
          <th className="px-4 py-2 text-start font-medium">Department</th>
          <th className="px-4 py-2 text-start font-medium">Location</th>
          <th className="px-4 py-2 text-start font-medium">Status</th>
        </tr>
      </thead>
      <tbody>
        {members.map((member) => (
          <tr className="border-b" key={member.email}>
            <td className="px-4 py-2 text-sm">{member.name}</td>
            <td className="px-4 py-2 text-muted-foreground text-sm">
              {member.email}
            </td>
            <td className="px-4 py-2 text-sm">{member.role}</td>
            <td className="px-4 py-2 text-sm">{member.department}</td>
            <td className="px-4 py-2 text-sm">{member.location}</td>
            <td className="px-4 py-2 text-sm">{member.status}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

FAQ

Why does this table scroll both ways?

ScrollArea is h-[400px] and max-w-md, and the table sits in a div with w-max. The fixed height scrolls the twenty rows. w-max lets the six columns run wider than the frame.

Which bar does this file add?

ScrollBar with orientation set to horizontal. The root already renders the vertical bar. Both are inside the same ScrollArea.

What are the columns?

Name, Email, Role, Department, Location, and Status. Each th and the cells use px-4 py-2 and text-start. Body cells that are secondary, such as the email, add text-sm text-muted-foreground.

How many people are in the table?

Twenty, from Array.from. Role cycles Admin, Editor, and Viewer. Department cycles Engineering, Design, Marketing, and Sales. Location is San Francisco or New York. Status is Active or Inactive.

Where is the padding around the table?

p-4 is on the w-max wrapper, so it scrolls with the table. The frame is rounded-md border bg-background on ScrollArea, plus w-full max-w-md.

Do the column headings stick?

No. The thead is ordinary table markup inside the scrolling wrapper, so the headings move with the rows. border-b on the header row and on each body row draws the lines.

API Reference

Scroll Area

Sets orientation="horizontal". The rest is on the Scroll Area page.

All 8 scroll area examples