Table size variants synchronized with button/input sizes. Each variant provides enough space for buttons and inputs of the same size.
Default (Compact) - ~31px rows
Best for data-heavy tables where you need to scan hundreds of rows efficiently.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011-04-25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008-11-28 | $162,700 |
2x Spacing - ~62px rows
Balanced spacing for better readability when you have moderate amounts of data.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011-04-25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
3x Spacing - ~93px rows
Spacious layout for presentation tables or when emphasis and clarity are priorities.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011-04-25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
Usage Guide
Default (Compact)
<table class="pa-table">
...
</table>2x Spacing
<table class="pa-table pa-table--2x">
...
</table>3x Spacing
<table class="pa-table pa-table--3x">
...
</table>When to use each size:
- Default (Compact): Data grids, logs, transaction lists, any isTable with 50+ rows
- 2x Spacing: Reports, dashboards, summary tables with 10-50 rows
- 3x Spacing: Feature comparisons, pricing tables, highlighted data with <10 rows