shadcn.io is not affiliated with official shadcn/ui

Both Orientations Scroll Area for React

Q: 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.

Q: 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.

Q: 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.

Q: 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.

Q: 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.

Q: 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.

A scroll area that scrolls both ways, for a table with more columns and rows than fit.

Wide tables with many columns make people pan sideways, lose context, then scroll down and lose their place again. This example puts a six-column, twenty-row table in a 400px Scroll Area that scrolls on both axes. The inner wrapper uses w-max, so the columns never wrap and the content sets the width. Use it for data tables, spreadsheets, and admin panels whose content is both wider and taller than its frame.

PreviewCode

Name	Email	Role	Department	Location	Status
User 1	user1@example.com	Admin	Engineering	San Francisco	Active
User 2	user2@example.com	Viewer	Sales	New York	Inactive
User 3	user3@example.com	Editor	Marketing	San Francisco	Active
User 4	user4@example.com	Admin	Design	New York	Inactive
User 5	user5@example.com	Editor	Engineering	San Francisco	Active
User 6	user6@example.com	Viewer	Sales	New York	Inactive
User 7	user7@example.com	Admin	Design	San Francisco	Active
User 8	user8@example.com	Viewer	Sales	New York	Inactive
User 9	user9@example.com	Editor	Engineering	San Francisco	Active
User 10	user10@example.com	Admin	Design	New York	Inactive
User 11	user11@example.com	Editor	Marketing	San Francisco	Active
User 12	user12@example.com	Viewer	Sales	New York	Inactive
User 13	user13@example.com	Admin	Engineering	San Francisco	Active
User 14	user14@example.com	Viewer	Sales	New York	Inactive
User 15	user15@example.com	Editor	Marketing	San Francisco	Active
User 16	user16@example.com	Admin	Design	New York	Inactive
User 17	user17@example.com	Editor	Engineering	San Francisco	Active
User 18	user18@example.com	Viewer	Sales	New York	Inactive
User 19	user19@example.com	Admin	Design	San Francisco	Active
User 20	user20@example.com	Viewer	Sales	New York	Inactive

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

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.

All 8 scroll area examples

Preview