Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dense Table
A React table with compact spacing using h-8 rows, py-1 padding, and text-sm for displaying many records in limited space
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Long log files and large datasets eat screen space—users scroll forever. This React dense table uses h-8 rows and py-1 cells. Built with shadcn/ui Table with custom height and padding classes, the compact layout fits more data—perfect for activity logs, audit trails, system logs, data exports, admin tables, or any table where showing maximum records per screen matters and users need to scan through many rows quickly without endless scrolling.
| ID | Event | User | IP Address | Time |
|---|---|---|---|---|
| 1 | User login | [email protected] | 192.168.1.1 | 10:23 AM |
| 2 | File uploaded | [email protected] | 192.168.1.2 | 10:25 AM |
| 3 | Settings changed | [email protected] | 192.168.1.3 | 10:28 AM |
| 4 | User logout | [email protected] | 192.168.1.4 | 10:30 AM |
| 5 | API request | system | 192.168.1.5 | 10:31 AM |
| 6 | Database backup | system | 192.168.1.6 | 10:32 AM |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Table
Standard spacing table
Table with Vertical Lines
Table with column borders
Paginated Table
Table with pagination controls
Vertical Table
Key-value table layout
Data Table
Feature-rich data table
Log Viewer
Log viewing component