To increase the information density of your Datagrid, add the
datagrid-compact class to it. This class decreases the amount of whitespace in the
default Datagrid style so that you can display more rows in the fixed height. Or if your Datagrid doesn't have a fixed
height, you could decrease the overall amount of space that it takes.
User IDNamePokemon{{user.id}}
{{user.name}}
{{user.pokemon.name}}{{users.length}} users
Basic Structure
User IDNameCreation dateFavorite color{{user.id}}
{{user.name}}
{{user.creation | date}}{{nonPaginatedUsers.length}} users
Using smart iterator, property binding, and sorting
User IDNameCreation date
Pokemon
Favorite color{{user.id}}{{user.name}}{{user.creation | date}}{{user.pokemon.name}}{{nonPaginatedUsers.length}} users
Filters and pagination
User IDNameCreation date
Pokemon
Favorite color
{{user.id}}{{user.name}}{{user.creation | date}}{{user.pokemon.name}}
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
Single selection
User IDNameCreation dateFavorite color{{user.id}}{{user.name}}{{user.creation | date}}{{nonPaginatedUsers.length}} users
Multi selection
User IDNameCreation dateFavorite color{{user.id}}{{user.name}}{{user.creation | date}}{{nonPaginatedUsers.length}} users
Placeholder
User IDNameCreation dateFavorite colorWe couldn't find any users!{{[].length}} users
Vertical scrolling (Rows with badges)
User IDNameCreation datePokemonFavorite color{{user.id}}{{user.name}}{{user.creation | date}}
{{user.pokemon.name}}
#{{user.pokemon.number}}{{users.length}} users
Horizontal scrolling
For instance when in a narrow card.
User IDNamePokemonFavorite colorFiller{{user.id}}{{user.name}}{{user.pokemon.name}}This is a very wide column.{{nonPaginatedUsers.length}} users
Smart column sizing
This column as a long header but short dataShort headerLarge data{{user.id}}{{user.name}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor tellus, tincidunt eget mauris molestie,
ullamcorper facilisis lacus. Vivamus sagittis suscipit libero, et tristique justo consectetur eget.
{{nonPaginatedUsers.length}} users
Expandable rows
User IDNameCreation datePokemonFavorite color{{user.id}}{{user.name}}{{user.creation | date}}{{user.pokemon.name}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam.
Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque
sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. Aenean sagittis nibh
lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. Vestibulum
vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam posuere ipsum tincidunt
velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis sit amet metus
finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, at suscipit diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin in neque in ante placerat mattis id sed quam.Proin rhoncus lacus et tempor dignissim.Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu.Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra.{{nonPaginatedUsers.length}} users
Hide-show columns
User IDNameCreation datePokemonFavorite colorNo users found{{user.id}}{{user.name}}{{user.creation | date}}{{user.pokemon.name}}
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
Rows with Signpost
User IDNameCreation dateFavorite color
{{user.id}}
The pokemon is strong.
{{user.name}}
The user is strong.{{user.creation | date}}{{nonPaginatedUsers.length}} users