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