Fixed Height

From version 0.8.10 datagrids can now scroll easily if you set their height. The header and footer stay fixed, only the body containing the rows scrolls. It's as simple as setting the height of the clr-datagrid element to a specific value, or making it 100% to fill its container:

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users

Specifying a header's width in any way, including through CSS with a simple class, locks the corresponding column size and makes it non-flexible. No need to duplicate that information on the cells, just the header is enough.

In cases where there is not enough data to display the datagrid will fill the container until it reach 100% of the height

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users