Compact Datagrid

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 ID Name Pokemon {{user.id}} {{user.name}} {{user.pokemon.name}} {{users.length}} users

Basic Structure

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{nonPaginatedUsers.length}} users

Using smart iterator, property binding, and sorting

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{nonPaginatedUsers.length}} users

Filters and pagination

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

Single selection

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{nonPaginatedUsers.length}} users

Multi selection

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{nonPaginatedUsers.length}} users

Placeholder

User ID Name Creation date Favorite color We couldn't find any users! {{[].length}} users

Vertical scrolling (Rows with badges)

User ID Name Creation date Pokemon Favorite 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 ID Name Pokemon Favorite color Filler {{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 data Short header Large 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 ID Name Creation date Pokemon Favorite 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 ID Name Creation date Favorite color {{user.id}} The pokemon is strong. {{user.name}} The user is strong. {{user.creation | date}} {{nonPaginatedUsers.length}} users