The purpose of this page is to contain various datagrids with fixed data so we can run css regression tests against
it. Not to be published on website.
Basic with Custom Cell Rendering
User IDNameCreation dateFavorite color{{user.id}}{{user.name}}{{user.creation | date}}{{variableLengthUsers.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
Selected user:
No user selected.{{singleSelected.name}}
User IDNameCreation dateFavorite color{{user.id}}{{user.name}}{{user.creation | date}}{{nonPaginatedUsers.length}} users
Multi selection
Selected users:
No user selected.{{user.name}}
Users to be added to group:
No user selected.{{user.name}}
Users to be deleted:
No user selected.{{user.name}}
User to be edited:
No user selected.{{toEdit.name}}
Users to be exported:
No user selected.{{user.name}}
0">
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}} usersUser IDNameCreation dateFavorite color{{[].length}} users
Vertical scrolling
User IDNameCreation datePokemonFavorite color{{user.id}}{{user.name}}{{user.creation | date}}{{user.pokemon.name}}{{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
Inline Toggle
User IDNameCreation dateFavorite color
{{user.id}}
{{user.name}}{{user.creation | date}}{{user.color}}{{users.length}} users