SM01 Interactive Demo
Toggle between container and full-height modes live
Live Demo
Grid caps at 350px and scrolls internally when content exceeds it.
Code
How it works
Container
Grid caps itself with a pixel max-height. The shadow DOM's .wg uses max-height: inherit, so the host constraint propagates into the scroll container.
Full Height
height: 100% against an unbounded parent resolves to auto, so the grid sizes to its content and the page layout grows to wrap it.
tableBorderOnly = true moves the scroll container to .wg__table-container and leaves the outer .wg with overflow: visible. Side effect: wheel events are no longer captured by the grid, so page scroll works naturally over it.
SM02 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 |
Additional Properties
| Property | Type | Default | Description |
|---|---|---|---|
isScrollable | boolean | false | Constrain grid height to viewport. Enables vertical scrolling within a calculated max-height. |
scrollMaxHeight | string | - | Custom max-height for the grid container (e.g., '500px', '80vh'). |
tableBorderOnly | boolean | false | Only show border around the table, not the outer container (pagination/toolbar area). |