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 ID
Name
Creation date
Pokemon
Favorite color
No 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