SM01 Container Scroll
Self-contained grid with max-height and internal scrollbar
Live Demo
Grid with internal scrollbar. Scroll inside the grid.
Code
When to Use
Best For
Dashboard widgets, modals, sidebars - anywhere grid needs a fixed height.
Benefits
Sticky headers stay visible while scrolling content.
Grid is self-contained, doesn't affect page layout.
Note
This is the default/recommended mode for most use cases.
SM02 Page Scroll
Full-height grid using browser's native page scrollbar
Live Demo
Grid expands to full height. No internal scrollbar - use page scroll.
Code
When to Use
Best For
Full-page data tables where grid is the main content.
Benefits
Native page scroll feel - familiar UX.
Works with browser's scroll restoration.
Better for mobile - native momentum scrolling.
Trade-off
Headers scroll out of view (not sticky to viewport).
SM03 Hybrid Mode
Horizontal grid scrollbar with vertical page scrollbar for wide tables
Live Demo
Wide table with horizontal scroll. Vertical uses page scroll.
Code
When to Use
Best For
Wide data tables with many columns in content-focused pages.
Benefits
Horizontal scroll contained to grid.
Vertical scroll feels native.
Common Pattern
Use max-width: 100% to fit container width while allowing horizontal scroll for wide content.
Quick Reference
| Mode | CSS | Vertical Scroll | Horizontal Scroll | Use Case |
|---|---|---|---|---|
| Container | max-height: 300px | Grid | Grid | Widgets, modals, fixed layouts |
| Page | (none) | Page | Page | Full-page tables, main content |
| Hybrid | max-width: 100% | Page | Grid | Wide tables in content pages |